作って学ぶ HTML ＆ CSS モダンコーディング(ツクッテマナブ　エイチティーエムエルシーエスエス　モダンコーディング)

モバイルファースト＆レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする!

本書では、モバイルファースト＆レスポンシブで、サンプルサイトを制作していく過程を実際に操作しながら学んでいきます。
サイトはパーツ単位で作成し、章ごとに 1 つのパーツを作成していきます。

Chpater1 ヘッダー
Chpater2 ヒーロー
Chapter3 画像とテキスト
Chpater4 記事一覧
Chapter5 フッター
Chapter6 記事
Chapter7 プラン＆フッター
Chapter8 ナビゲーション

それぞれのパーツの作成にあたっては、パーツのレイアウトを実現する CSS の選択肢を示し、場面に応じて適切なものを選択して、作成していきます。
章末には他の選択肢やそのバリエーションをまとめて解説していますので、デザインやレイアウトの技を幅広く身につけることができるでしょう。
HTML は最新の「 HTML Living Standard 」に準拠し、 CSS では従来から活用されてきたメディアクエリの他、 Flexbox 、 CSS Grid などのレイアウトのコントロール、 CSS 関数を使いこなします。

「本書では、新しい HTML&CSS に沿った形で『レスポンシブ Web デザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。
サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからの Web 制作に活用していただければと思います。』 (著者「はじめに」より)

演習用ファイルがダウンロードできますので、ぜひ本書で最新の HTML&CSS コーディングを体感してください。

【特典付き】
・特典 PDF 『 HTML&CSS 簡易リファレンス』
本書のサポートサイトから入手してください。
Introduction イントロダクション
Setup 下準備
Chpater1 ヘッダー
Chpater2 ヒーロー
Chapter3 画像とテキスト
Chpater4 記事一覧
Chapter5 フッター
Chapter6 記事
Chapter7 プラン＆フッター
Chapter8 ナビゲーション

HTML と CSS の入門書は無数にありますが、その多くはプロパティのカタログ的な解説に終始し、「実際のページをどう組み立てるのか」が見えにくいものです。本書はそこを逆転させ、完成したページを作りながら Flexbox や CSS Grid といったレイアウト手法を実践的に身につけるアプローチをとっています。著者のエビスコムは HTML/CSS の入門書を長年にわたって執筆してきた制作グループで、手を動かす読者の視点から構成を練り上げるスタイルが一貫しています。

扱うレイアウトパターンはカード型 UI 、レスポンシブなナビゲーション、グリッドを使った複雑な段組みなど実務で頻出するものが中心です。 float によるレイアウトの時代から抜け出せていない人や、 Flexbox は使えるが Grid の使いどころがつかめない人にとって、両者の使い分けを具体的な制作例で確認できる点は大きな収穫になります。

一方で、 JavaScript やフレームワーク、ビルドツールの話題には踏み込みません。あくまで HTML と CSS だけで完結する世界にスコープを絞った本であるため、 React や Next.js のコンポーネント設計と組み合わせる段階の知識は別の書籍で補う必要があります。 CSS の「手で書いて構造を理解する」段階を固めたい人に向いた、地に足のついた制作入門です。