「たった1日で基本が身に付く! HTML&CSS 超入門」を読みました

たった1日で基本が身に付く! HTML&CSS 超入門

「たった1日で基本が身に付く! HTML&CSS 超入門」を読みました。著者の方は、スクールの講師としてWebを教えるなどされていることもあり、大変読みやすい一冊でした。

この書籍の良さは、HTML/Web技術の変遷を踏まえつつ、抑えるべきポイントをシンプルに説明していることだと思います。

このエントリーは、WINGSプロジェクトのレビュアーに応募し献本してもらいましたので、その書評となります。

HTML関連（前半）

HTML4.01、XHTML1.0、HTML5が存在する中で、違いを理解しつつ要点を学ぶことができます。

• サンプルは、主に最新のHTML5が主体で解説されています。ただ、HTML4のときは△△のように書いていたが、HTML5で○○のように書くという補足もあります。そのため、実際のWebサイトのHTMLを読んだときの理解も捗ります。
• HTML構文の説明だけではなく、Web制作の流れや、ディレクションする上で必要な用語の解説も含まれています。また、divタグの使い所やid/classの使い分けなどの実践的なノウハウも書かれています。
• さらにHTMLのフォームについても紹介しています。

CSS関連（後半）

HTML同様にCSSについても、わかっているようでわかっていない違いをうまく整理されています。

• まず、子セレクタと子孫セレクタといったセレクタの種類と違いに関する説明を始めに行っています。
• そして、デザイン崩れの調査時に理解するべきスタイルの継承について解説しています。親要素に指定したプロパティ値が子要素へと引き継がれる仕組みや、テキスト、リスト、テーブル関連以外の要素に対しても継承するinheritキーワードの解説をしています。
• そして、スタイルの競合についても紹介しており、作成者スタイルシート＞ユーザー（閲覧者）スタイルシート＞ブラウザデフォルトの優先度を!importantにて上げる方法や、セレクタの詳細度、詳細度が同じ場合の場所による優先度（後勝ち）について紹介しています。
• さらに、CSSとして重要な、ボックスモデルのcontent、height、width、padding、border、marginについて紹介し、色指定、テキスト、フォントについても紹介しています。
• 実際に段組みレイアウト設定を用いて、固定レイアウト(px)と可変レイアウト(%)の違い、ブロックレベル要素（改行されて表示され親要素と同じ幅をもつh1-h6,p,table.ul,ol,dl,div）とインライン要素（横並びに配置でき、高さや上下マージンが指定できないa,em,img,span）などについて紹介しています。
• またフロートレイアウトについても図を用いてわかりやすく解説しています。

最後に

• 初心者向けとしてははもちろんですが、すでにHTMLやCSSの概要を把握しつつも、いま一つ理解が足りなかったり、人に教えることができないといったレベルアップを考えている方にもおすすめしたい一冊です。
• HTMLやCSSを学びたいときに、分厚いリファレンス本を買ってもポイントが分からず使いこなせないことがあります。また初心者向けの本は簡単過ぎて得るものが無いことがあります。この本のバランスはとても良いため、知っている知識を体系的に理解するために最適な内容だと思いました。

よろしければ一度、読んでみてはいかがでしょうか。