ほんの一手間で劇的に変わる HTML & CSS と Web デザイン実践講座

全国の書店員さんがオススメする本 (2021 年度 CPU 大賞) 第 1 位受賞!
前人未到、2 冊連続で書店員さんから大賞に選ばれる快挙!

読者の圧倒的な支持! シリーズ 40 万部突破の大ヒット!
全国の書店員がオススメする本 第 1 位や IT エンジニアがおすすめする本の大賞 & 特別賞など受賞を連発!

Web 制作に必要な一歩進んだ Web サイト制作の知識が一気に学べる!

Web 界隈やデザイナーに大人気!
Web 関連の情報やデザインについて記事が学べる『Web クリエイターボックス』の管理人、
Mana による渾身の HTML & CSS と Web デザインの実践知識が一気に学べる本

ほんの一手間で劇的に変わる!
一歩進んだ Web サイト制作の知識が一気に学べる!

・5 つのサイトから学べる! 今の Web サイトを作る最新の技術群
・自由な表現ができる! 手描き、斜め、グラデーション、あらゆる装飾の作り方
・今日から使える! 表とグラフ、アニメーションなど、JavaScript ライブラリ
・動画、カスタム変数、Emmet、Sass、問題解決の知識まで

Web クリエイターボックスの Mana が教える
Web サイト制作の実践 & 旬のスキル。
思い描いているものを形にできる魔法の 1 行が必ず見つかる!

コードも、デザインも、時短術も、全部学べる!

●本書の対象読者
・HTML と CSS の基礎学習までを終えた人
・Web サイト制作のワンランク上のスキルを学びたい人
・自由な装飾表現を用いて Web デザインを作りたい人
・アニメーションなど動きがあるサイトを作りたい人
・練習問題やお題に挑戦し、成果を皆と共有したい人
・効率よくコードを記述できる方法を知りたい人
・独学で困った際などの問題解決法を学びたい人

HTML と CSS の基礎は一通り学んだのに、自分で組んだページはどこか物足りない。その段差を埋めるために、完成している 5 つの Web サイトを見ながら、そこで使われているテクニックを 1 つひとつひも解いていくのが『ほんの一手間で劇的に変わる HTML & CSS と Web デザイン実践講座』 (Mana 著、SB クリエイティブ、2021 年 2 月刊、B5 変型判) です。著者の Mana は、版元プロフィールによれば日本でグラフィックデザイナーとして 2 年間働いた後にカナダ・バンクーバーの Web 制作の学校を卒業し、カナダ、オーストラリア、イギリスの企業で Web デザイナーとして働いた経歴を持ち、刊行時点では Web サイト制作のインストラクターとして教育に携わっています。運営するブログ「Web クリエイターボックス」は 2010 年に日本のアルファブロガーアワードを受賞し、著書『1 冊ですべて身につく HTML & CSS と Web デザイン入門講座』 (SB クリエイティブ) は 2019 年度 CPU 大賞 書籍部門の大賞を受賞、本書も版元によれば 2021 年度の CPU 大賞 (全国の書店員がオススメする本) を受賞しています。

5 つのサイトを解きほぐす全 8 章の構成

構成は全 8 章です。CHAPTER 1 で Web ページの仕組み、HTML と CSS の基礎、より管理しやすい CSS、JavaScript の読み込み方、ブラウザーによる見え方の違い、デベロッパーツールの使い方を確認した後、CHAPTER 2 から 6 が本書の本体で、章ごとに 1 つの完成サイトを題材にします。ランディングページではシングルカラムのレイアウト、全画面背景、フォントとアイコンフォントの詳しい使い方、ブレークポイントを、ブログサイトでは 2 カラムのレイアウトと見出し / 画像 / ボタン / リスト / 引用文 / ページ送り / 囲み枠 / ヘッダー / フッター / ナビゲーション / 表 / フォームの装飾、スクロールに合わせた追従を扱います。コーポレートサイトでは枠からはみ出す要素、グラフ、画像とテキストの互い違い表示、表、タイムライン、フォームの装飾、属性セレクター、イベントサイトでは CSS でページ内をスルスル動かす方法、ブレンドモード、カスタムプロパティ、トランジションとキーフレームのアニメーション、斜めのライン、グラデーション、スライドメニュー、ギャラリーサイトでは背景に動画を設置する方法、レスポンシブな画像、マルチカラム、フィルター、拡大、影、ライトボックス、ダークモード対応へと進みます。CHAPTER 2 から 6 の章末には練習問題とカスタマイズのお題があり、CHAPTER 7 は Emmet、calc 関数、Sass (VSCode での利用、ネスト、パーシャル、Mixin) による効率化、CHAPTER 8 はチェックリスト、エラーメッセージの読み解き、制作に関する質問ができるサイトの案内で締めます。版元サイトにはダウンロードと正誤情報のサポートページが用意されています。

一手間が効く理由、装飾 / アニメーション / カスタムプロパティの技術背景

技術的に見ると、本書が扱う「一手間」の多くは、CSS の仕様のうち入門書では後回しにされがちな領域に集中しています。疑似要素で飾りを足す、ブレンドモードやフィルターで画像の色を CSS 側から変える、斜めのラインやグラデーションを画像なしで描く、といった装飾は、画像を書き出し直さずにデザインを調整できる点で保守性にも直結します。トランジションとキーフレームによるアニメーションは、JavaScript を書かずに動きをつけられる一方で、何を動かすかの選び方を誤ると読みにくいページになるため、完成サイトの文脈で使い方を学べる意味は大きいです。カスタムプロパティ は色や余白の値を変数として一元管理する仕組みで、ギャラリーサイトのダークモード対応のように、テーマ切り替えを少ない記述で実現する土台になります。ブレークポイントと レスポンシブ対応 の考え方も、ランディングページとブログサイトの 2 つの題材で繰り返し扱われるため、画面幅ごとにレイアウトが崩れる原因を自分で切り分けられるようになります。

Sass と Emmet で効率化、問題解決まで含む実践講座の射程

CHAPTER 7 と 8 は、見栄えではなく制作の速さと詰まったときの抜け方を扱う章です。Sass のネスト、パーシャルによるファイル分割、Mixin によるスタイルの使い回しは、CSS が数百行を超えたときに効いてくる管理術で、Emmet の省略記法と calc 関数と合わせて、手癖で書いていたコードを短くします。独学者にとって価値が高いのは CHAPTER 8 で、公開前のチェックリスト、エラーメッセージの読み解き方、質問ができるサイトの紹介まで含めているため、教室に通わずに学ぶ人が詰まったときに先へ進めなくなる状況を想定した作りになっています。版元は対象読者として、HTML と CSS の基礎学習までを終えた人、自由な装飾表現を用いて Web デザインを作りたい人、アニメーションなど動きがあるサイトを作りたい人、効率よくコードを記述できる方法を知りたい人、独学で困った際などの問題解決法を学びたい人を挙げています。

HTML と CSS の基礎を終えた人向け、向かない読み方

前提知識は HTML のタグと CSS のセレクター、プロパティの基本が分かる程度で足ります。CHAPTER 1 で基礎の復習があるとはいえ、初めて HTML を書く人が最初に開く本ではなく、著者の入門講座のような基礎書を終えてから進む位置づけです。一方で、この本は Web 制作のコーディング寄りの実践書なので、配色理論やタイポグラフィの原則をデザイン学として体系的に学びたい人、あるいは React などのフレームワークでコンポーネント設計を学びたい人には目的が合いません。JavaScript は、版元の紹介ではグラフやアニメーションなどのライブラリを使う範囲で登場するため、文法そのものを体系的に学ぶ本としては期待しない方がよいでしょう。コーディングとデザインを学ぶ順番に迷っている人は、Web デザイン本の選び方 と合わせて位置づけを確認すると選びやすくなります。

自分のポートフォリオサイトやブログの見た目を教科書どおりの状態から一段引き上げたい人、業務でランディングページやコーポレートサイトを任され始めた駆け出しのコーダー、装飾やアニメーションを画像に頼らず CSS で実現したい人には、5 つの完成サイトを分解して学ぶこの構成が投じた時間に対して回収しやすい一冊です。章末のお題を実際に作って公開するところまでやれば、そのまま制作実績の種にもなります。