HTML/CSSの基礎を学べるおすすめ書籍

質問

去年に機会があって、オフィス活用の講習へ行きました。パソコン使用歴は長いのに、驚くべき機能や効率化を図れる使い方などがあり目から鱗でした。順を追って学習していくことの大切さを知りました。

私は今、会社のECサイトを作ったり管理する仕事に携わりたいと考えていますが、どうにもスキル不足で応募に踏み切れません。趣味ではweb制作をしています。しかしテンプレートをお借りして、タグサイトから気になるものをチョイスして、javascriptなどのプラグインは海外サイトから...という逆引き的使用をしていたため、じゃあ今から簡単なサイトを組み立て下さいと言われるとお手上げです。そしてHTML５などが出てきた今、戦力０と言ってもいいと思います。

講習は競争率と費用の仕事の問題で中々困難です。
新しめでわかりやすい、基礎を学べる書籍がありましたら教えて下さい。

回答No.1

ORUKA1951 · ベストアンサー

それが意外と難しい。そんな「まどろっこしい事」をしたくないから本に飛びつく。とりあえず見栄えだけは手に入る。それは、「テンプレートをお借りして、タグサイトから気になるものをチョイスして、javascriptなどのプラグインは海外サイトから...」と同じですし、本もそう書かないと売れない。
　一方、やはり、こつこつ基礎から学ぶのもネットしかない・・・。本には無いでしょう。

　ご存知のとおりネットにある情報の大部分は、「テンプレートをお借りして、タグサイトから気になるものをチョイスして、...」であるのも事実ですが、それでも、探せば、ネット上にしっかりしたサイトはたくさんあります。
　現在、HTML5が勧告の一歩手前に来ていて、そう待たずに勧告となるでしょうが、それが現実に使えるようになるのは、またまだ時間がかかります。【いつもながら、大きなシェアもっているIE・・IE8以前のものが足を引っ張っている。】
　しかし、HTML5でHTML4.01で説明が足りなかった部分が加えられていることは、極めて重要です。それは、HTML4.01ですでに推奨されていた-----文書構造とプレゼンテーションの完全な分離です。HTML5では、HTML4.01で「非推奨」という「軟弱な言葉」で示されていた、プレゼンテーションを目的としたすべての要素、属性が廃止になっています。残ったものも文書構造を示すものに説明が変わります。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者
　・・・【中略】・・・
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
　・・・【中略】・・・
　推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで、
4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )より

　「HTML4.01で説明が足りなかった部分」ですが、実はHTML4.01においても、
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで、
7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )より

と書かれていたとき、想定していたのは、
<div class="header">
　ここはヘッダ
</div>
<div class="section">
　ここは本文
　<div class="aside">
　　ここは本文と関係ない記事
　</div>
</div>
<div class="footer">
　ここはフッタ
　<div class="nav">
　　ここはナビゲーション
　</div>
</div>
のような使い方を想定していたのですが、現実には文書構造とはまったく関係ないleft,wrapper・・
　HTML5では、そのようなことを防ぐために
<header>
　ここはヘッダ
</header>
<section>
　ここは本文
　<aside>
　　ここは本文と関係ない記事
　</aside>
</section>
<footer>
　ここはフッタ
　<nav>
　　ここはナビゲーション
　</nav>
</footer>
と書くことになります。
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )

　以上を踏まえて
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
を、最初から最後まで読んでおくこと。これがあなたが探している一番の教科書でしょう。

　プレゼンテーションから解き放たれたHTMLは、そのままではシンプルで、あなたの目にはシンプルすぎるでしょう。しかし、それは誤解で、
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より

　HTMLでは不可能であったプレゼンテーションが可能になります。先日回答した
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
という、文書構造だけを記述したもの（あなたでもこの程度なら書けるはず・・）でも、スタイルシートで劇的に表現力があがります。
★離れた場所にマウスオーバーで画像を変えたい。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7364249.html )

　このようにスタイルシートは、すばらしいですが、残念ながら書籍を読んでこのようなスタイルシートが書けるようにはならないでしょう。じゃ、私(還暦過ぎました)はどうやって身につけたか・・・。それもHTMLと同じように、仕様書です。
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )
　(注)残念ながら、現在ウェブ標準と各ブラウザベンダーがみなしているのは、この改訂版のCSS2.1です。しかし、私もCSS2.1の良い邦訳は知りません。--変更点(CSS2.1 Appendix C 邦訳) ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )もしくは、原文(英語)の
★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
を見ることになるでしょう。

　以上・・・です。javascriptに関しては、ブラウザごとの違いもありjQuery: The Write Less, Do More, JavaScript Library ( http://jquery.com/ )のような優れたライブラリを使うほうが現実的です。もちろん、簡単なものなら学んで置いてソンはありません。
1) イヌでもわかるJavaScript講座 ( http://www.red.oit-net.jp/tatsuya/java/index.htm )
2) ５・６年生にもわかるやさしいJavaScript ( http://www.sky.sannet.ne.jp/masapine/java_top.html )
とか

　とにかく、紹介した仕様書を最初から通して読んでおくこと。そして必要なとき必要な項目を参照できるようになること。多分それが行き止まりの脇道に迷い込まずに、山を登れる一番の一番の早道でしょう。

　紹介したリンク先は必ず目を通してください。その前後にも大事なことがたくさんか枯れています。

お礼

素晴らしいアドバイスと引用、感謝致します。
やはり今の時代ネットでうまく情報収集するスキルが必要なようですね。
リンク先は全てブックマークさせていただきました。
じっくり遡って読んでいきたいと思います。