【書見記録】１冊ですべて身につくHTML＆CSSとWebデザイン入門講座

はじめに

「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」を一通り読了した。
本書は2019年に発売されて以来27万部^[1]を突破しているベストセラー本である。
「1冊ですべて身につく」とのタイトル通り、初心者の入門書として必要な知識や考え方を丁寧に解説している良書だった。

https://www.sbcr.jp/product/4797398892/

↓来月発売の第2版。欲しい。
https://amzn.asia/d/7Xhpq9I

本書の構成・できること

本書は7章構成になっており、1-3章がHTMLやCSSの基本知識の説明で、4-7章が実際に手を動かして実践する構成になっている。
前半は基本知識の解説が分かりやすいうえに、ユーザビリティやデザインの解説も手厚く、良いWebサイトを作るための工夫や考え方が文中に散りばめられている。
後半の実践編では4画面から成るカフェのサイトを作れる。HTMLタグやCSSプロパティの記述方法の学習は勿論、以下の内容やレスポンシブ対応の方法が学べる。

• TOP：フルスクリーンのページ
  • フルスクリーンレイアウトのページを作る
• NEWS：2カラムのページ
  • FlexBoxを用いてメインエリアとサイドバーから成る2カラムのレイアウトのページを作る
• MENU：タイル型のページ
  • CSSグリッドを用いて3×3のタイル型レイアウトのページを作る
• CONTACT：お問合せフォームと外部リンク埋め込みのページ
  • フォームと外部リンク（GoogleMap, FaceBook, Twitter, Youtube）を埋め込んだページを作る

完成したサイトは以下の通り。CSSの装飾でこれほどお洒落なサイトが作れるのかと感動した。

TOPページ（フルスクリーンレイアウト）

NEWSページ（2カラムのレイアウト）

MENUページ（タイル型のレイアウト）

CONTACTページ（レスポンシブ対応のフォームのレイアウト）

雑感

多すぎず少なすぎずのちょうど良い情報量で、初心者の1冊目にうってつけだと思う。
1周目は「自分で手を動かしておしゃれなサイトを作れた」成功体験が大きい。レスポンシブ対応やタイル型のレイアウトは作成時にとても感動した。
制作の流れやデザインの考え方など、Web制作を実際に行う中で大事になる考え方を多く取り上げられているのもすごく良かった。

自身はHTMLの本（※）を1冊読んだ後、CSSやデザインを学びたくてこの本を手に取ったが、万人にお勧めしたい本だと思った。
完全な初学者の場合、HTMLの入門書を1冊読んでから本書を読むと、よりスムーズに理解しやすいと思う。

また解説と例が十分にあるので、以降自身でコード模写やサイトを作るときに、本書を繰り返し読みながら制作すると、また学びがあるのではないかと思う。

総じて、教科書のように使いたい本だと感じた。

※本書の前に読んだHTML特化の入門書。取り扱っている内容は本書の2章とほぼ同じだが、例題と練習問題が多いので、独学でも学びやすい。
https://amzn.asia/d/a9S55Ka

最後に

本書を読み終えた後、この方の著書でHTML・CSS・JavaScriptを学びたいと思ったので、HTML＋CSS＋Webデザイン実践講座編とJavaScript入門編も買った。
読んで理解することも大事だが、手を動かして知識をものにするのも大事なので、今後はコード模写などを行うことで知識を落とし込んでいきたい。

脚注

1. 2024年1月の購入時点