概要

3つのレイアウトを実際に作りながらHTML5/CSS3の実践コーディングを習得する

想定読者

HTMLとCSSの基礎は知っているが実践的なサイト制作経験がない駆け出しフロントエンドエンジニア、またはコーディングを学びたいデザイナーやバックエンドエンジニア

こんな人には向いていない

• HTML/CSSをゼロから学ぶ完全未経験者(タグの意味から説明するレベルではない)
• すでに複数のWebサイトを制作した経験があり、実務でCSS設計を行っているエンジニア(応用的な設計手法の解説は本書の対象外)
• 最新フレームワーク(TailwindCSSやCSS-in-JSなど)での開発手法を求める読者(出版が2015年でフロートベースの実装が中心)

読了後にできるようになること

• ヘッダー・メイン・サイドバー・フッターで構成されるスタンダードレイアウトをゼロからコーディングできる
• グリッドベースのボックスレイアウトを整列させるCSSの考え方と実装手順を理解できる
• スクロール誘導型のシングルページレイアウトを設計・実装できる
• デザインカンプから骨格を読み取り、コーディングフローを体系化できる
• スマートフォン対応(レスポンシブ)のコーディング手順を実践的に習得できる
• デベロッパーツールを使ったデバッグと確認の進め方を身につけられる

本書のキー概念(章解説)

• イントロダクション — コーディングの進め方とデベロッパーツールの使い方を先に押さえておくと、以降のPARTがスムーズに進む
• 第 1 章 スタンダードレイアウト — ヘッダー・メイン・サイドバー・フッターの基本構成。最も汎用性が高いレイアウト
• 第 2 章 グリッドレイアウト — ボックスの整列とサイズ調整が主題。ポートフォリオや商品一覧ページへの応用がしやすい
• 第 3 章 シングルページレイアウト — セクション構成・スクロール対応・スマートフォン対応まで含む。ボリュームが最も多く実践度が高い

ハイライト

• 実際のWeb制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます(現場のフローを再現するハンズオン形式という本書の核心的な特徴を最もよく表している)
• 一冊目のHTML/CSSでは紹介されていなかったモダンなコーディングをする方法を教えてくれる実用的な技術書です。ポートフォリオを作成した時に重宝しました(入門書の次のステップとしてポートフォリオ制作で実際に役立ったという具体的な活用例)

外部からの言及

• HTMLとCSSの入門書を終えた次のステップとして、ポートフォリオ制作や実践的なサイト構築に役立てたという声が複数見られる。特に入門書だけでは触れないモダンなコーディング手法の橋渡し役として評価されている(qiita)
• UIデザインを正しく・美しく実装に落とし込むためのCSS設計学習として参照した事例があり、見た目と実装の橋渡しを意識する読者層からの支持が見られる(qiita)

編集メモ

Qiita 言及記事4件確認、累計likes約986(うち本書を含む技術書まとめ記事が大半)。本書単体への直接言及はハンズオンテンプレート・学習教材紹介記事が中心で、実務参照型の引用は限定的。2015年出版で最新CSS仕様への対応は外れるため補完的な位置づけ

読む前に押さえておきたいこと

• HTMLタグの基本的な役割(div・header・main・footer・nav等)を知っている
• CSSのセレクタ・プロパティ・値の書き方を理解している
• ブラウザとテキストエディタを使ったHTML/CSSの動作確認を一度でも行ったことがある

学習のコツ

• PART0のイントロダクションにあるデベロッパーツールの使い方を先に熟読しておくと、PART1以降のコーディング作業中の確認速度が大きく変わる
• 3つのPARTは独立しているが、PART1(スタンダード)で骨格の読み取り方を身につけてからPART2・3に進む順番が学習効率として最良
• PART3のシングルページレイアウトはスマートフォン対応まで含むため、レスポンシブデザインを目的とする読者はPART3を重点的に手を動かす
• サポートサイト提供のサンプルコードは完成形の確認用に留め、まず自分でコーディングしてからファイルを参照する使い方が定着しやすい