【ちょっと書評】「現場のプロが本気で教える　HTML/CSSデザイン講義」 : 立ち止まったら即死亡

いつ買ったか覚えてないのですが、少し前にこの「現場のプロが本気で教える　HTML/CSSデザイン講義」という参考書を買いました。

これまで私は、HTMLとCSSは趣味で触るくらいでした。

もちろんWeb系の会社にいた訳でもありませんので、実際の現場のルールやコーディングというものを知らず、ほとんどが我流です。

趣味であろうとWebサイトを触る人間であれば、実際のWebデザインの現場のやり方は知っておきたいところ。

というわけで、「現場のプロが本気で教えてくれる」そうなので、やってみました。

全体的な内容について

まず初めに、HTMLやCSSの基礎の基礎といった部分は理解していることが前提です。
とはいえ個人的には、それほど最初のハードルも高くないように感じました。

全体的な内容としては、

SASS利用環境の構築
CSSの重要ポイントの理解（優先順位など）
SASSの記法の理解
SASSを利用したサイト制作

といった構成になっています。

1～3は準備編の様なもので約100ページ、4がメインの内容で約170ページくらいです。
SASSを利用したサイト制作を、実際に手を動かしてやってみるのがメインとなります。

SASSの基本を学べる

直接CSSを組み立てるのではなく、SASSを利用して効率良くサイト制作を行うのが、本書のメインテーマのひとつです。

SASSは簡単に言うと、変数やら関数やら演算やらができる便利な進化系CSSです。
プログラムを少しでも触ったことがある人であれば、すんなり頭に入るのではないでしょうか。

例えば、複数の要素に同じ色が設定してあるとします。
変更するとなったら、CSSのそれぞれの値を変更しなければなりません。
ですがSASSを利用して、色の情報が入った変数を定義して、それぞれの値としてその変数を指定してやれば、変数の値を変更するだけで全ての要素の色が変わるのです。

メインのサイト制作のチャプターでも、最後までSASSを用いて制作していくので、嫌でもSASSに慣れます。
そしてその効率の良さから、通常のCSSを組み立てるのが億劫になるかもしれませんね。

修正等のメンテナンスに強いHTML/CSSを学べる

こちらも本書のメインテーマのひとつ。
ただ単に見た目が綺麗なコードを書けば良いという訳では無く、将来的なメンテナンスや他人が触ったときの事を想定したHTML/CSSの組み立て方を学べます。

HTMLはパーツごとに分け、それぞれに独立したCSSを設定します。
CSSの組み立ても決められた考え方があり、本書で「BEM」という設計手法が用いられています。
CSSを適用する際はHTMLタグにclassを設定する訳ですが、このclass名の付け方をルール化しておくことで、管理しやすくなるということですね。

私も全てを理解した訳では無いのですが、これまで気分で名付けていたclass名と、ルールに従って名付けたclass名を比較すると、やはりルールに従った方が全体的に見易いです。

このBEMの特徴をひとつ挙げるとすると、子孫セレクタは一切用いないという点です。

header nav ul { list-style-type: none; }

みたいな指定の仕方ですね。

あとID名も用いませんので、設定を行いたいHTMLタグに対してclass名のみをルールに従って設定しまくるのです。

<header class="header">
<div class="header__head">
<h1 class="logo">鳥取さんのホームページ</h1>
・・・

こんな感じで、class名をそれぞれの要素に設定していきます。
結構特徴のある名付け方をするので、最初は変な感じがするかもしれませんね。
（アンダースコア2つ記入のルールは特に）

BEMの詳しい内容は検索すると沢山でてくるので、色々参考にしてみてください。

内容に間違いが多いので注意

さて、そんな実際の現場のコーディングを学べる良い本なのですが・・・、ここで大きな問題があります。

尋常じゃないくらい本の内容に間違いが多いです。

びっくりした。本気でびっくりした。
ありとあらゆる箇所が間違っとる。
これほど内容が間違っとる本は初めて見た。

いや、誤字は別に良いんです。意味は分かりますから。
ソースコードの大部分がまるごと違うとか、説明文の通りに完成しないとかは本当に勘弁してほしい。
「～～すれば〇〇になります。」と書いてあるのにそうならず、実際は次のページの設定をしなければそうならなかったり。

読者にとっては本の内容が全てで信じざるを得ないので、読んでて挫けそうになりました。

以下、正誤表です。

1つ目は、発行所のソフトバンククリエイティブの公式ページの正誤表ですが・・・、一部のみです。
2つ目は、著者のGitHubのページの正誤表で、公式ページよりも正誤表が充実しています。

正誤表が充実してるっていうのもすごい悲しいのですが、残念ながらこれでも全ての間違いを網羅し切れておりません。
「じゃあどこに真の正誤表があるんや！」って話になりますが、そんなものは存在しません。
あまりの多さに、著者も正誤表の充実を諦めてしまったのでしょうか。

そう・・・答えは君たち・・・、『読者自身』が導き出すんや・・・！