DESIGNMAP

  1. TOP
  2. ブックレビュー
  3. 『いちばんよくわかるHTML5&CSS3デザインきちんと入門』

『いちばんよくわかるHTML5&CSS3デザインきちんと入門』

多くのWeb制作の入門書を書かれている狩野祐東さんによるHTML、CSSの入門書。
狩野さんの本は本書に限らず、丁寧かつ分かりやすい解説が特徴で安心してオススメできる。旧ブログでも何度も紹介している。

HTML、CSSの組み方・書き方の定石は常に変わっている。
一気に大きく変わるというより、日々、少しづつ変化しているイメージがある。本当にHTML、CSSのコーディングは生ものである。

本書はHTML、CSSの最新系の基本を学ぶことができる。

実践の観点から実装の急所が解説されている。
いくつかご紹介すると、

font-familyプロパティの「font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, "MS Pゴシック", sans-serif;」と「font-family: sans-serif;」の違い、remを使ったフォントサイズの指定のメリット、line-hightプロパティの明解な解説、font-weightプロパティの値が数値の場合の説明、id名の付け方のベストプラクティス、:linkとaの違い、上手な<div>の使い方、imgタグのsrcset属性、メディアクエリは切り替えるスタイルの近くに書くこと

などである。

個人的に一番読みたかったのはCHPATER9の「ページ全体のレイアウトとナビゲーション」の章だった。

本章ではフレックスボックスを使って、シングルカラム、2コラム、3コラムをレスポンシブWebデザインを前提に実装していく。CSSはモバイルファーストCSSで書かれており、ブレイクポイントは768pxの一箇所を採用。

HTMLは実践に耐えられる3重構造にして、フレックスボックスの解説は実践で使える範囲に限定して解説しているところは見事である。

本書はチュートリアル本ではなく、個別論点をリファレンス的に積み上げていって、最後のCHAPTER10で総まとめとして、4ページ構成のWebサイトのサンプルが提示されるという形式になっている。

細かい箇所で気になったのは、CHPATER9とCHPATER10のサンプルでJavaScript(jQuery本体とjQueryのコード)を読み込んでいるのだが、本書では触れられてない点である。ハンバーグメニューをタップすると、メニューが表示/非表示される機能で使っている。

スポンサーリンク

プロフィール

DESIGNMAP
ディレクター
ON VISITINGを制作・運営。
お問い合わせ