HTML & CSS と Web デザインが 1 冊できちんと身につく本［増補改訂版］

＜コンセプト＞PC & モバイルサイトデザインの基礎力と HTML・CSS コーディングの知識が 1 冊で同時に身につく!
ウェブ制作を仕事にするなら HTML と CSS を学ぶことから始めますが、本書は体系立てた文法学習よりも、まずは「コーディングとはどのような作業なのか」を理解できる初学者向け入門書です。架空のカフェのショップ紹介 & ネットショップサイトをチュートリアル形式で作成しながら、基本的な HTML 要素 / CSS の基本構造 (セレクタ、プロパティ、値) を学ぶことができ、レイアウトのテクニックやデザイン (Web デザイン & レスポンシブデザイン) の基本も身につきます。
＜本書のポイント＞
・チュートリアル学習では、PC 版だけでなくウェブ制作の現場でニーズの高いモバイルサイトのデザインがしっかり学べます
・定番となった flexbox、display を使ったレイアウト手法の基礎から実践まで丁寧に解説します
・「フルスクリーン」「フレックスボックス」「シングルカラム」「2 カラム」「グリッド」の 5 種類のレイアウトパターンを学習できます
・横スクロールするレイアウト、アニメーションで拡大するボタンなど動きのあるサイトづくりも体験できます
・「動画コンテンツページ」「ネットショップページ」も制作します
＜綴じ込み特典つき＞
付録 1 デザインのバリエーションが学べる!「レスポンシブデザインのネタ帖」
付録 2 インターン、就転職に役立つ!「ポートフォリオ用アレンジのネタ帖」

『HTML & CSS と Web デザインが 1 冊できちんと身につく本 増補改訂版』 (服部 雄樹 著、技術評論社、2022 年 1 月 7 日発売) は、架空のカフェのショップ紹介とネットショップのサイトをチュートリアル形式で作りながら、HTML と CSS の基本、PC とモバイルのサイトデザインの基礎を同時に学ぶ初学者向けの入門書です。版元の概要は本書を、体系立てた文法学習よりも、まずは「コーディングとはどのような作業なのか」を理解できる入門書と説明しています。試し読み PDF の見出しは「楽器の練習もウェブサイト制作の学習もコピーが大事! コード写経で「作る喜び」を体験しよう!!」です。版元のプロフィールでは、著者は 2018 年に法人化した株式会社服部制作室でウェブサイトの制作、テンプレートデザインや UI 設計、セミナー登壇、書籍の執筆に携わると紹介されています。

全 11 章と Appendix の構成、サイトのしくみからポートフォリオまで

第 1 章はウェブサイトのしくみ、サイト制作のフロー、コーディング、ページのパーツとレイアウト、ウェブデザインの基礎知識で、第 2 章で Google Chrome と Visual Studio Code を入れ、入力したコードをブラウザーで確かめる方法と実習用のサンプルサイトを確認します。第 3 章と第 4 章が HTML と CSS の基本と書き方で、第 4 章にはウェブフォントの指定の節があります。第 5 章はレスポンシブデザインの基本、モバイルサイト用の CSS、ハンバーガーメニュー、モバイル用フッターのレイアウトの調整です。第 6 章から第 11 章までは、レイアウトの型ごとにページを 1 つずつ作る章で、順にフルスクリーン、フレックスボックス、シングルカラムの動画コンテンツページ、グリッドの格子状レイアウト、2 カラムのショップページ、Google マップ付きの問い合わせページです。この 6 つの章は、どれもモバイル用 CSS を書く節で終わります。巻末の Appendix はオリジナルのポートフォリオサイトへの改変で、綴じ込みの付録としてレスポンシブデザインのネタ帖とポートフォリオ用アレンジのネタ帖が付きます。

Flexbox とグリッド、1 方向と 2 方向で組むレイアウトの基礎

CSS で段組みを作る方法は、かつては float や表組みを転用するのが一般的で、要素の高さをそろえる、縦方向の中央に寄せるといった基本的な配置にも回り道の書き方が要りました。Flexbox は要素を横か縦の 1 方向に並べ、余白の配分と揃える位置を親要素の側の指定で決める仕組みで、ナビゲーションやカードの横並びに使われます。CSS Grid は行と列の 2 方向を同時に定義する仕組みで、格子状の一覧やページ全体の骨組みに使われます。どちらも display プロパティの値の指定から始まり、版元の紹介にも flexbox と display を使ったレイアウト手法を基礎から実践まで解説するとあります。もう 1 つの柱である レスポンシブデザイン は、メディアクエリで画面の幅ごとに CSS を切り替え、1 つの HTML を PC とスマートフォンの両方に合わせて表示する手法です。本書では、第 6 章から第 11 章のどの章でも、CSS を書く節のあとにモバイル用 CSS を書く節が置かれています。

はじめて HTML と CSS を学ぶ人、ウェブデザイナー志望者に向く理由

版元が挙げる対象は、はじめて HTML や CSS を学び、これからサイト制作をはじめる方、超初心者ではないが未経験からウェブデザイナーを目指している方、モバイル用サイトの制作やデザインについても学びたい方です。目次に HTML の要素や CSS のプロパティの一覧の章はありません。

自分で 1 つのサイトを最後まで組み上げたことがない人、PC 版だけでなくモバイル版のデザインとコーディングまでを一続きで経験したい人、就職や転職に向けてポートフォリオの土台を作りたい人に対して、本書は架空のカフェのサイトを題材に、5 種類のレイアウトとモバイル対応、ポートフォリオへの改変までを、章ごとに手を動かして進める構成になっています。