HTMLとCSSのオススメ本

現在HTMLとCSSを基礎知識をマスターしようとしています。
とりあえず、HTML&CSS入門本を1冊購入し最後まで読み終わりました。
実践形式な本だったので、その本に書かれてある手順通りの簡単なサンプルサイトが出来上がりました。

あまりにも簡単な内容だったので、基礎知識をマスターまでは出来ていないと思います。
ですので、2冊目として基礎～マスターまで学習できる本を探しています。

1冊目の実践形式で進めていける本はとても分かりやすかったので、文字ばっかりの知識紹介やタグの羅列辞典等ではなく、画像等をはさみながら操作手順をこなしていける内容の本、又はサイトを探しています。

良い本、またはサイトはありますでしょうか？

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/10/20 23:56

　ご卒業おめでとうございます。

　とても、難しい質問ですね。
　実は、どの書籍も大差ないのです。はっきり言うと『画像等をはさみながら操作手順をこなしていける内容』はそこまでなのです。それ以上は、まったく異なるアプローチでないと身につけられないのです。・・・・それが難しいと言った理由です。
　言い換えると、そこから先は「画像等をはさみながら操作手順を」示して説明することは無理なのです。
　すでに学ばれたように、HTMLは
・文書を読み解き内容を理解して、その文書を構成する要素(Element)に分解し、それぞれの要素をタグを使ってマークアップしていくメタ言語です。
　一方CSSは、
・HTMLの構造に基づいてセレクタを使って要素を指定してプレゼンテーションを指定するものです。
　言い換えると、「この様にデザインするためにHTMLをこの様に書き、スタイルをこの様に書く」というアプローチでは、それ以上前に進めないのです。なぜなら、文書はテーマもコンセプトも実に様々なのですから。デザインに縛られていたら、デザインのためにHTMLを書くことになり「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ではなくなってしまうからです。

　ここから先に進むためには、もう一度基本に立ち返って、ひたすら文書構造をマークアップしたHTMLを作成する訓練と、出来上がったHTMLを元に、それ(HTML)には一切手を加えずスタイルシートで様々にデザインしていく訓練なのです。
　それには、少なくとも仕様書を理解し「自家薬籠中の物 ( http://kotowaza-allguide.com/si/jikayakuroutyuu. … )」にしなければなりません。

　具体的に、なぜそれが「画像等をはさみながら操作手順を」示す方法では学べないかの例を挙げましょう。
HTML
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　これは、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」がとても参考になります。すなわち、文書を読み解き
<div class="header"></div><div class="section"></div>のようにマークアップしなさいということなのですが、これは図では無理でしょう。

CSS
　カスケーディングスタイルシートの根幹ともいえる「5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」や「6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」はどう逆立ちしても図では無理です。

　あなたに必要なことは
1) HTMLを文書構造をマークアップするように書ける様になること。このときデザインは考えない。---HTML4.01strictですよ。
　特に
　・リンクやjavascriptのターゲットでない限り無用なIDは書かない。
　・class名は文書構造を補完するものにする。
2) そのHTMLに手を加えず、様々なデザインをスタイルシートで指定してみる。
　・セレクタ--特に詳細度やカスケーディングを活用してシンプルで解りやすいものにする。

　その繰り返しでしょうね。参考書は
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　(注)現在ウェブ標準とされているものはCSS2.1です。詳細度やカスケーディング部分では変更があります。
　CSS 2.1 ( http://www.w3.org/TR/CSS2/ )--邦訳がないので「変更点 ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )」