概要

HTML5・CSS3とレスポンシブWebデザインを基礎から実践まで習得する

想定読者

Webサイト制作を初めて学ぶ方、およびスマートフォン対応の書き方に乗り換えたい経験者

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

• JavaScriptやReact等のフレームワーク習得が目的で、HTML/CSSは既に把握しているエンジニア
• フレックスボックスやレスポンシブデザインを既に実務で運用している中上級者には基本事項の比重が大きい
• 2016年出版のため最新のCSS Grid / Container Queries 等の仕様を求める読者には情報が不足する

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

• HTMLドキュメントの構造とマークアップの考え方を正しく身につけられる
• CSSのボックスモデル・パディング・ボーダー・マージンを理解し、意図通りのレイアウトを組める
• フレックスボックスを使ったマルチカラムレイアウトとナビゲーションメニューを実装できる
• レスポンシブWebデザインの原理とメディアクエリの書き方を習得し、スマートフォン対応ページを作れる
• テーブルとフォームのアクセシビリティを意識したマークアップができる
• テキスト装飾・リンク・画像表示など頻出コーディング操作を体系的に整理できる

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

• 第 1 章 Webサイトの仕組みを知ろう — URL、ファイル構造、制作環境の整備まで扱い、完全な初心者でも迷わず着手できる出発点
• 第 2 章 HTMLの基礎知識とマークアップの実践例 — 「マークアップの考え方トレーニング」で暗記でなく思考プロセスを養う構成が特徴
• 第 3 章 CSSの基礎知識とページデザインの実践例 — CSS適用のトレーニング形式で、書いてすぐ結果を確認するサイクルが習慣化される
• 第 4 章 テキストの装飾 — フォントサイズ・行間・太字・色など実務頻出の装飾操作を網羅
• 第 5 章 リンクの設定と画像の表示 — 画像の回り込みなど古典的テクニックも含む。現代的代替(Flexbox等)への橋渡しは9章以降
• 第 6 章 ボックスと情報の整理 — ボックスモデルの理解はCSS全体の土台。この章を丁寧に読むと後段のレイアウト章の理解速度が上がる
• 第 7 章 テーブル — アクセシビリティを考慮したテーブルマークアップを扱う点が入門書として珍しい
• 第 8 章 フォーム — 送受信の仕組みからフォーム部品の種類まで。バックエンド連携の入口として有用
• 第 9 章 ページ全体のレイアウトとナビゲーション — フレックスボックスによるコラムレイアウトとナビゲーション実装が本書の実践的クライマックス
• 第 10 章 レスポンシブWebデザインのページを作成しよう — メディアクエリを使った実際のレスポンシブサイト制作。前章までの知識を統合する総まとめ

ハイライト

• スマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。(「考え方」と「実践」の両輪を明示しているのが本書のポジションを端的に示す箇所)

編集メモ

Qiita言及記事を確認できた件数0件 / 楽天ランキング履歴なし。2016年出版の入門書であり、現時点ではHTML/CSS入門カテゴリの補完的選択肢として位置づける

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

• テキストエディタ(VSCode等)の基本操作とファイル保存ができること
• ブラウザの開発者ツール(DevTools)を開く方法を知っていると検証がスムーズ

学習のコツ

• 6章「ボックスモデル」は短いが密度が高い。ここで詰まった場合は章末を先に飛ばして9章のフレックスボックスに進み、ボックスの振る舞いを体験してから戻ると理解が早い
• 9章と10章はそれぞれ独立した完成形サンプルを扱う。写経するだけでなく、自分のサイトのアイデアで置き換えながら試すとレイアウト感覚が定着しやすい
• 7章のテーブルアクセシビリティ節は初心者書では省略されがちな領域。実務でフォームやデータ表示を扱う際の基礎として一読する価値がある