miruoo's blog

「プロの「引き出し」を増やす　HTML+CSSコーディングの強化書　改訂2版」感想

#読書感想

「「プロの「引き出し」を増やす　 HTML+CSS コーディングの強化書　改訂 2 版」」というマークアップの本を一旦一周読み終えました。 最後の Lesson26 が非常に分量が多く、ここだけ終えられていない状態ですが一旦それ以外は読んだ状態で書きます。

本のページ

https://books.mdn.co.jp/books/3224303002/

※2024 年 9 月時点で検索すると初版の方でヒットしてしまうのでご注意ください

どんな本？

HTML+CSS の本ですが、他の同ジャンル本では違い完全に実際の業務目線にたった中級者寄りの一冊です。自分の観測範囲でこれがフォローできているのはPiccalil 社のブログくらいしか知りません。 2021 年に出た初板も十分良書でしたが、大まかな流れはそのままに、 待望の Figma 対応やサポートが終了した IE11 対応に関する記載が削除され、grid ディスプレイといったモダンな CSS 手法に全体的に置き換えられたことで、広く勧めやすい本になりました。

フロントエンドエンジニアの自分からみても業務によく出てくるレイアウトとそのマークアップ方法がこれでもかというばかりに凝縮されています。またアクセシビリティに考慮したマークアップも実例にどう当てはめるのかがしっかり解説されています。マークアップは、 プログラミング言語と違ってコードだけ見ても動作イメージがつきにくいことや、様々なデバイスに手動で対応しないといけないので読む際はきちんと自分の手で写経しましょう。ページ数は 360P と標準くらいですが、かなり文字数が多いので気が向いたときに周回するとさらに力がつくと思います。

個人的にはこの読み方をおすすめします。

  1. 標準の HTML/CSS で実際に写経しながら 1 週に取り組む
  2. 1 から時間を置いて、jQuery や React などのフレームワークを使いながら 2 週目に取り組む

どんな人が読むといいか

といったようにマークアップにそこまで馴染んでいない人は最適です。逆にすでに業務でバリバリマークアップしている人には得られるものは少ないかもしれません。

良かったところ

よく出てくるレイアウトパターンが多く解説されている

LP や WordPress 系のサイトではお馴染みのレイアウトパターンは十分解説されていると思います。これ 1 冊仕上げれば特別アニメーションが凝っているでもない限り、LP サイトは十分対応できると言ってもいいでしょう。

一方モダンな Web サービスで見られるパターンは紹介されていないので、「ツールチップ」「変更履歴リストのレイアウト」「トースト」は紹介されていません。とはいえ、本書はサーバーからデータを持ってくる前提の サイト例が広く紹介されているのでそれほど気にはなりませんでした（文中では CMS を使う設定で登場します）。記事一覧などデータによって文字数がバラバラに表示される箇所の対処は今回の 2 版からgridディスプレイ、gapプロパティが全面に紹介されるようになり、大分学習コストが下がっています（IE11 はこれらの CSS が未対応でした）。

練習問題が良質

本書はお題のレイアウトを座学で学ぶ -> 練習問題に取り組むで読み進めることになります。練習問題は本書の仕様を読んだ後、Figma / XD のデザインカンプを見ながらマークアップ作業をするという流れです。 この仕様が結構業務に近い作りになっており、URL はもちろんパーツの最大幅（高さ）、grid ディスプレイの行揃え・ブレイクポイントなどがしっかり指定されています。デザインカンプでも画面パーツがコンポーネントとして分けられたシートも用意されていて、 フロントエンドエンジニアとしては勉強になりました。またアクセシビリティのページでは前のページで作ったサイトにアクセシビリティファーストに HTML を修正するという問題も登場し、アクセシビリティに優しいマークアップの練習も出来るのは大変ありがたかったです。

HTML+CSS の本なので基本これでマークアップしていく形ですが、2 週目以降 React とかフレームワークを使って組んでみるのもおすすめです（特にフォーム画面）。

気になったところ

本の内容自体は申し分ないのですが、特典関係でいくつか気になる箇所がありました。

  1. Figma のデザインファイルで度々誤字脱字が見受けられる

待望の Figma 対応がされた本書ですが、Exercise に取り組んでいると本書内のスクリーンショットと Figma と食い違っている箇所になんども遭遇しました。レイアウトが完全に崩壊している レベルのものはありませんでしたが、業務と同じように Figma を見ながらのマークアップをしたいので早めの修正をお願いしたいです。

XD については手元に確認環境がないためわかりません、すみません。

  1. 期間限定特典ファイルの提供期間が短すぎる

本書は期間限定特典ファイルで、2024 年以降に全ブラウザ対応された/予定の CSS プロパティが紹介されています。素晴らしいのがただこんなプロパティがありますだけでなく、 本文のどこどこページのマークアップは、この新しいプロパティでこう書けばもう少し楽に書けるようになりますという体裁が取られていることです。今までの書き方と今後広く使えるようになる書き方が 比較できるので新たなプロパティをどんどん使おうという気持ちにさせてくれます。本書に限らず今後も SNS とか Qiita あたりで、他のパターンも紹介してくれたらいいなぁって思うくらいにはとてもいい特典でした。

ですが、ダウンロード期間が 2024 年 10 月 31 日までと本書が同年 8 月発売のからなので 2 ヶ月間しかありません。他の技術本だと少なくとも 1 年以上配布されている印象なので、 あまりにも短すぎると思わざるを得ません。発売から数ヶ月経ってから本書の存在に気づく人も多いと思うので、延長を個人的に希望します（特別事情があれば仕方ないですが…）。