HTMLとCSSのお勧めの本を教えてください

ネットに上がっているHPのXHTMLやCSSを見ながらや
XHTML・CSSの説明やサンプルなどのブログやHPを読みながら
基本独学でコーディングをしています。
レイアウトがうまくいかず、教えてgooにも沢山お世話になりました（＾＾;）

しかし基本がよく分かっていないので
教えてgooの時もHTMLがおかしいやCSSの使い方が間違ってる等
ご指摘をよく頂きます。
やはり押さえる所は押さえないと…と思い
HTMLとCSSの仕様書のようなものを探しています。
※沢山読む時間がないのでCSSから読もうかと思います(>_<;)
仕事でうまくいかないのもCSSの部分が多いので…

自分で探したら、下記のような書籍はどうかなと思いました。
http://www.amazon.co.jp/Web標準XHTML-CSSデザイン-クリエイターが身につけておくべき新・100の法則。-加藤-善規/dp/4844324241/ref=cm_cr_pr_product_top

何かお勧めなものがあれば、よければ教えてください。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/08/30 00:15

邦訳なら

w3c 仕様書 邦訳 - Google 検索 ( https://www.google.com/#hl=ja&safe=off&sclient=p … )

　現在、多くのブラウザベンダーがウェブ標準とみなしているのは、HTML4.01strictとCSS2.1と考えてよいでしょう。XHTML1.0strict(HTML4.01をXMLで書き直したもの)、XHML1.1でもよいでしょう。
　HTML5の策定が進んでいる現状では、XHTMLはおいておいてHTML4.01strictを学ぶほうがよいでしょう。
★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　ただし、そこに書かれているように
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　transitinalやframesetには手を出さない。
　さすれば、『HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』を追加して学べばよいでしょう。
　実は、HTML4.01を学ぶときも、これを平行して読むとHTML4.01の仕様書で言い足りなかった部分がよく理解できるでしょう。
　HTML4.01の仕様書は徹底的に読んで理解しましょう。HTML5の元になる仕様ですから。

　スタイルシートは、その後で学びます。
　CSS2の邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )はありますが、CSS2.1の邦訳は知りません。仕方ないので、変更点(CSS2.1 Appendix C 邦訳) ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )

　残念ながら参考書のよいものは知りません。わたしもかって関わっていたのでわかりますが、実は解説本なんて書けないのです。だって、正確な仕様書という存在があり、それにすべて書かれているのですから、それ以上に何を書けと・・・・。仕様書を知らないうちしか書けないのです。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な
　内容になっていく。
・必要な情報に直接アクセスする。
　できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン
　版の仕様書には次の特徴を持たせた。
　　1) 要素や属性についての参照は何れも、本仕様書内の当該要素・属性の定義箇所に
　　　リンクしている。 各要素及び属性は、その一箇所で定義している。
　　2) 各ページに索引へのリンクがあるので、 要素または属性の定義を読むために、
　　　2回より多くリンク移動する必要はない。
　　3) 言語リファレンスマニュアルの各ページ冒頭には、全体の目次より更に詳細に
　　　当該ページ内容を記したページ目次を掲げてある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

この回答へのお礼

ORUKA1951様回答ありがとうございます。
HTML 4.01 Specificationをとにかく読んでみます！
実は前から作成したサイトが殆どXHTMLなのですが
HTML 4.01 Specificationを読むと、基礎はつかめて、後々XHTMLも理解できるようになりますか？
それともHTML５がもうでているようですので、XHTMLは切り捨てた方が良いのでしょうか…

よければアドバイスお願いします！

お礼日時：2012/08/31 19:57

No.2 回答者： ORUKA1951 回答日時： 2012/09/01 09:26

＞それともHTML５がもうでているようですので、XHTMLは切り捨てた方が良いのでしょうか…

　いえ、HTML5は未勧告です。HTML5は、確かにHTML4.01strictの改定と言う位置付けですが、HTML5には二通りの書き方があって、XML/XHTMLとしての書き方もあります。HTML5でありながら<img *** />という書き方もエラーではありません。XHTML5となります。
　私は、現在はHTML4.01strictに戻していますが、空要素の扱い(最後を/>とする)以外は常にXMLの書き方を踏襲しています。すなわち<p>はHTMLでは閉じタグは必須ではありませんが、必ず</p>で閉じるようにしている・・とか。
　HTML4.01では<img *** /><br />はエラーですから仕方ない。

　XML/XHTMLの一番の長所は、
・他のアプリケーションで利用しやすい。
・Extensible Markup Language--拡張可能マークアップ言語--独自要素を加えられる。
　ですので、その目的があるときはXHTMLで書きます。

　逆に言うと、そうでないときはXML/XHTMLにこだわりません。HTMLは何と言っても楽ですから・・
　ちなみに、XMLとして通用するHTML5の書き方も文書化されています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Polyglot マークアップを利用する文書は、HTML5 文書であると同時に XML 文書でもあり、さらに HTML 文書でもある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Polyglot マークアップ: HTML 互換の XHTML 文書( http://standards.mitsue.co.jp/resources/w3c/TR/h … )］より

＞HTML 4.01 Specificationを読むと、基礎はつかめて、後々XHTMLも理解できるようになりますか？
　そういえると思います。一番の理由は、優れた邦訳の存在です。XHTML1.0はHTML4.01をまったくそのままXMLに適合するよう書き直したものです。XHTML1.1はXHTML1.0のstrictそのもの(モジュール化された)ですし、XHTML2は中断されました。

　たしかにW3CはHTMLは4.01が最後の仕様で、今後はXHTMLに移行すると大々的に宣言していて、私もそうなることと信じていましたが、2004年から2006あたりに状況は一変してしまいました。
★HTML5が持つ本当の意味 － ＠IT ( http://www.atmarkit.co.jp/news/200801/25/html.html )
★Webの3つの問題を解決する「HTML5」とは何なのか（2/2）- ＠IT ( http://www.atmarkit.co.jp/fwcr/design/benkyo/htm … )

　HTML5は、単に文法だけではなくjavascriptやCSS,API,DOMなどを含んだ大きな仕様です。今後、その方向に進むことは確定ですので(たぶん)・・・、あえてXHTMLにこだわる必要はない。未来のあるHTMLをとにかく身につけようかと・・

＞XHTMLは切り捨てた方が良いのでしょうか…
　必要なときは使わなければならない技術なので身につけておくことは無駄にはならないです。HTMLと大きな差があるわけではありません。
　HTMLを書くときもXHTMLの文法を可能な限り使えば良いです。
たとえば、
　<div class="section">
　　　<div class="figure">
　　　　　<h3>挿絵</h3>
　　　　　<p>
　　　　　　<img src="" width="" height="" alt="">
　　　　　</p>
　　　</div>
　　　<h3>このセクションの見出し</h3>
　　　<p>
　　　　　ここからひとつの段落
　　　</p>
　　　<div class="aside">
　　　　　<h3>脚注</h3?
　　　　　<p>
　　　　　　　・・・
　　　　　</p>
　　　</div>
　</div>
と私は書きますが、これはHTML5にするときは
　<section>
　　　<figure>
　　　　　<h3>挿絵</h3>
　　　　　<p>
　　　　　　<img src="" width="" height="" alt="">
　　　　　</p>
　　　</figure>
　　　<h3>このセクションの見出し</h3>
　　　<p>
　　　　　ここからひとつの段落
　　　</p>
　　　<aside>
　　　　　<h3>脚注</h3?
　　　　　<p>
　　　　　　　・・・
　　　　　</p>
　　　</aside>
　</section>
ですし、XHTML1.1でしたら
　<div class="section">
　　　<div class="figure">
　　　　　<h3>挿絵</h3>
　　　　　<p>
　　　　　　<img src="" width="" height="" alt=""/>
　　　　　</p>
　　　</div>
　　　<h3>このセクションの見出し</h3>
　　　<p>
　　　　　ここからひとつの段落
　　　</p>
　　　<div class="aside">
　　　　　<h3>脚注</h3?
　　　　　<p>
　　　　　　　・・・
　　　　　</p>
　　　</div>
　</div>
ですね。
　XHTMLの文法でHTMLを記述しておけばとにかくソースを見て一目でわかる・・

この回答へのお礼

ORUKA1951様回答ありがとうございます！
まだまだ勉強不足なので、教えて頂いたことのすべてを把握できていないのですが
一つずつ調べながら、勉強していこうと思います。

本当にありがとうございました。

お礼日時：2012/09/04 23:13