作って学ぶ 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 モダンコーディング』 (エビスコム 著、マイナビ出版、2021 年 9 月刊) は、モバイルファーストでレスポンシブなサイトの作り方を、サンプルサイトを実際に組み立てながら学ぶ HTML と CSS の実習書です。版元ドットコムの紹介文によれば、サイトはパーツ単位で作り、章ごとに 1 つのパーツを仕上げていきます。各パーツでは、レイアウトを実現する CSS の選択肢を示したうえで、場面に応じて適切なものを選んで作る進め方です。NDL の書誌では副題が「モバイルファースト & レスポンシブなサイト作成をステップ・バイ・ステップでマスターする」と記録されています。

ヘッダーからナビゲーションまで、部品ごとに作る章立て

目次は Introduction「イントロダクション」と Setup「下準備」の後に、Chapter 1「ヘッダー」、Chapter 2「ヒーロー」、Chapter 3「画像とテキスト」、Chapter 4「記事一覧」、Chapter 5「フッター」、Chapter 6「記事」、Chapter 7「プラン & フッター」、Chapter 8「ナビゲーション」と続きます。Web サイトの典型的な部品を 1 章に 1 つずつ作る並びで、フッターは Chapter 5 と Chapter 7 の 2 つの章の題に出てきます。紹介文によれば、章末には他の選択肢やそのバリエーションがまとめて解説されています。HTML は HTML Living Standard に準拠し、CSS では従来からのメディアクエリに加えて、Flexbox や CSS Grid によるレイアウトのコントロールと CSS 関数を使うと案内されています。演習用ファイルのダウンロードと、サポートサイトから入手する特典 PDF『HTML&CSS 簡易リファレンス』も用意されています。

モバイルファーストとレイアウト手法の選び分けが要る理由

レスポンシブデザイン は、1 つの HTML を画面の幅に応じて組み替えて表示する手法で、メディアクエリと伸縮するレイアウトで実現します。モバイルファーストは、まず狭い画面向けの基本のスタイルを書き、画面が広くなる条件をメディアクエリで足していく書き方で、スマートフォンで見たときの表示を基準に設計を進められます。レイアウトの道具は 1 つではありません。Flexbox は行か列の 1 方向に要素を並べて伸縮させるのに向き、CSS Grid は行と列の 2 方向の格子に要素を配置するのに向きます。さらに clamp () や min () のような CSS 関数を使うと、画面幅に応じて文字の大きさや余白を連続的に変えられ、メディアクエリの切り替え点を減らせます。同じ見た目を実現する書き方が複数あるため、1 つの方法を覚えても、別の場面でどれを選べばよいかで迷いがちです。部品ごとに選択肢を比べてから選ぶ本書の進め方は、この迷いに正面から向き合う形です。

2021 年刊の内容と、別の本を選ぶ方がよい目的

本書は 2021 年 9 月の刊行で、HTML Living Standard は継続して更新される仕様です。刊行後の仕様やブラウザーの対応の変化は、別の資料で補う前提になります。また紹介文が挙げるのは HTML と CSS の技法なので、WordPress などの CMS でのサイト構築や、JavaScript のフレームワークでの画面づくりを学びたい人は、目的に合う本を別に選ぶほうが近道です。

ヘッダーや記事一覧のような部品を自分で組めるようになりたい人、Flexbox と Grid のどちらを使うかで毎回迷う人、固定幅の作り方からモバイルファーストの書き方へ切り替えたい人にとって、部品ごとに選択肢を比べながら 1 つのサイトを作り上げる本書は、手を動かした分だけ判断の引き出しが増える 1 冊です。HTML と CSS の本を Web デザインの学び方全体のどこに置くかは、Web デザイン本ガイド で整理できます。