これだけで基本がしっかり身につく HTML/CSS & Web デザイン 1 冊目の本

知識ゼロから Web サイト制作を学ぶなら、この 1 冊ではじめよう。HTML / CSS の基本をやさしく解説。4 つのサイトをつくりながら楽しく学べる。重要パートは動画による解説つき。

『これだけで基本がしっかり身につく HTML/CSS & Web デザイン 1 冊目の本』 (Capybara Design 竹内直人、竹内瑠美 著、翔泳社、2021 年 10 月刊) は、Web サイト制作を知識ゼロから学ぶ人が最初に読む 1 冊として作られた HTML/CSS の入門書です。副題は「つくりながら楽しく学べる」で、手を動かして 4 種のサイトを完成させながら HTML/CSS と Web デザインの基本を身につける構成を取ります。版元が対象に挙げるのは、Web サイト制作をゼロから学びたい初心者、1 冊目の入門書を探している人、Web 制作の仕事を目指している人の 3 通りです。

全 5 部 15 章、SNS リンク集からレストランサイトまで 4 種の制作

構成は全 5 部 15 章です。Part 1「HTML を書いてみよう」 (01〜02 章) でウォーミングアップと HTML のきほんを押さえ、Part 2「SNS リンク集を作ってみよう」 (03〜04 章) で CSS のきほんを学びながら 1 つ目のサイトを仕上げます。Part 3「2 カラムページを作ってみよう」 (05〜06 章) はブログサイトの HTML と CSS、Part 4「1 カラムページを作ってみよう」 (07〜10 章) は Web 招待状サイトを作ったうえで CSS アニメーションを付け、レスポンシブウェブデザインに対応させます。Part 5「複数ページのサイトを作ってみよう」 (11〜15 章) は制作の流れと Web デザインのきほんから入り、レストランサイトの CSS をモバイル向け、PC 向けの順に書き、参考サイトの活用方法と Web サイトを公開する準備で締めます。版元の一覧によれば、SNS リンク集で基本の HTML と CSS とボックスモデル、ブログサイトで Flexbox レイアウトと構造化タグ、Web 招待状サイトでレスポンシブ Web デザインと CSS アニメーションと Web フォント、レストランサイトで複数ページサイトの構築と CSS グリッドレイアウトを学ぶ対応になっています。

Flexbox、レスポンシブ、CSS グリッドを制作の順番で学ぶ意味

この 4 種の並びは、CSS レイアウト技術の抽象度の順序でもあります。ボックスモデルで要素 1 つの幅 / 余白 / 境界の決まり方を理解した後、Flexbox で要素を 1 方向に並べて余白を配分する 1 次元のレイアウトに進み、レスポンシブデザイン で同じ HTML に対して画面幅ごとに CSS を切り替える発想を覚え、最後に行と列の 2 次元格子へ領域を割り当てる CSS グリッド で複数ページのサイトを組む、という段階になっています。12 章でモバイル向けの CSS を書いてから 13 章で PC 向けを重ねる順序も、狭い画面のスタイルを基準にして広い画面向けの指定を追加していく書き方を最初から手に馴染ませるものです。版元は、HTML の仕様が HTML Living Standard に一本化されたことを踏まえて本書はその仕様書に基づいて執筆されている、と説明しており、バックエンド中心のエンジニアが画面側を組む必要に迫られたときにも、古い書き方の癖を持ち込まずに基準線を引き直せる入門書です。

4 大特典と動画補足、この本が合う人と合わない人

版元が「4 大特典」と呼ぶダウンロード特典は、サンプルサイトのデザインデータ (Figma / XD)、Web サイトの公開方法を扱う特典 PDF (レンタルサーバーやドメイン、FTP ソフトの使い方)、Web デザイン編とコーディング編のおすすめサイト集、Flexbox レイアウト / CSS グリッドレイアウト / CSS のショートハンド / キーボード入力サポートの 4 種のチートシートで、翔泳社サイトでの無料 ID 登録とダウンロードが必要だと版元は注記しています。Flexbox や CSS アニメーションのように動きで理解したい項目は動画で補足され、手順ごとにファイルを用意してコード行も記載しているため、見本と同じにならないというつまずきを自分で見つけやすい、というのが版元の説明です。一方、目次に JavaScript の章はなく、動きのある UI やフロントエンドのフレームワークを学びたい人は別の本に進む必要があります。すでに HTML/CSS を書ける人にとっては、機能別に調べるリファレンスではなく制作手順に沿った本なので、辞書代わりには向きません。2021 年 10 月刊のため、デザインツールやブラウザの対応状況は刊行時点の環境を前提に読む必要があります。

HTML と CSS を独学で始めたいが何から手を付けるべきか分からない人、Flexbox と CSS グリッドの違いを言葉ではなく自分で組んだページで理解したい人にとって、4 種のサイトを順に完成させる本書は、投じた時間が形として残る 1 冊です。Web 制作の仕事を目指す人はもちろん、業務で急に画面を触ることになった開発者が土台を作り直す用途でも元が取れます。