気になっていた、現場のプロが本気で教える HTML/CSSデザイン講義を購入し、一通り読んでみたので感想を書いてみたいと思います。
ただのHTML本とは違う
この本はサンプルサイトを作りながら、HTMLやCSSの書き方を学んでいくスタイルとなっています。
こういうステップバイステップ形式でのやり方は他のHTML本でもあったりしますが、この本が他のHTML本と大きく違うのは、Sassを使って、効率よく・再利用しやすい記述をするというところ。
メンテナンス性を高く効率よく組み立てるためとして、前半の3章を使ってSassの導入からSassの書き方、CSS設計にページを割いています。
その分、HTMLを書く部分のページは少なくなってはいますが、最近のトレンドでもあるFlexを使ってレイアウトをがっつりしているなど、読み応えもあります。
サンプルのサイトもおしゃれなカフェのサイトで、書いていて面白いですし勉強にもなります。
モダンコーディング本を読んで面白いと思った人なら、この本もハマるのではないでしょうか。
こんな人におすすめ
- Sassを使った効率よく、再利用しやすい記述の仕方を知りたい
- 現場のプロがどうやって考えて作っているのか見たい
- flexboxを使ったレイアウトの方法を学びたい
この本を読む前の私のレベル
- SassはKoalaを使ってやったことがある。（Sassは入れ子、変数くらいしか使ってない）
- Node.jsとかGulpとかBEMとかはよくわからない
- flexboxは詳しくは知らない
この本をやってみて
CUI環境を使ってSassってみる
この本に載っているSassを使うための環境の構築に、黒い画面（コマンドプロンプト）を使ってする方法とKoalaというソフトウェアを使う方法があったのですが、Koalaはすでに使っていたので今回は試しにCUI環境でやってみることにしました。
黒い画面を使ってするといっても、あらかじめ本のほうで準備してくれているので、特に難しいことはありませんでした。
これを自分ひとりで構築するとなると、とたんにレベルが上がって大変だと思うので、これはありがたいですね。
Gulpって便利
多分Gulpの機能だと思いますが、勝手にCSSをミニファイ化してくれていたり、リアルタイムでブラウザを確認することができて便利でした。
この本ではGulpの設定なども事前にやってくれていたので、私は何も設定することはなかったのですが、自分で使うためにもっとGulpのことも勉強しないとなと思いました。
パーツごとにCSSを書く
私はこれまで一つのCSSにまるごと書き込んでいたのですが、この本ではSassの特徴をいかしてパーツごと（ヘッダーやボタンなど）にCSSを設定するやり方でした。
さらにBEMというCSSのクラスの名前の付け方をしています。
パーツごとに分けて書く、CSSのクラスの名前の付け方を統一することで、パっとみても分かりやすくなってますし、カスタマイズしやすくなっています。
確かにこうすることで利便性は上がりますが、あらかじめサイトを作る前から考えて設計することが大事になりますよね。
mixin、@contentを使ってのメディアクエリの設定がとっても楽
私はmixinなんて使ったこともないし、知らなかったのですがとても便利ですね。
特に便利だと思ったのが、メディアクエリを使ってレスポンシブデザインの設定をするとき。
@contentを使うことでCSSを別々に書く必要がなくなって、楽に書くことができます。
これは今後自分でもやっていきたいですね。
この本を読んで不満だったところ
この本を読んで唯一不満だったところがあります。
この本が初版でまだ正誤情報などもないからかもしれませんが、ところどころ書き加えるところのソースコードが太字になっていなかったり、書いたコードと本に載っているサイトのできあがりの表示がずれているところがありました。
このため、本の結果と違うとなってダウンロードしたサンプルのコードと比べてみたりして、立ち止まってしまうことがいくつかあり、すらすら～っと読み進めていくことができませんでした。
こういうところは初心者にとってはつまずきやすいポイントだと思うので、ここは残念ですね。
本ができた後に、一度本の通りにサイトを作っていってみれば気づくところだと思うんですけどね…
※（2016年9月29日追加）本の正誤表が更新されているようですので、そちらをチェックすると良いかもしれません。
それでもおすすめな1冊
不満な点もありましたが、それでも読んでいて面白かったですし、今後自分でWordPressのテーマなどつくるときにこの本の考え方を試してみたいと思いました。
私は趣味で独学でやっているのですが、効率のよいサイトの作り方を学べることで、現場での実務の環境に近づける感じがしてプロになった気分です。
Sassやflexboxを覚えたい、知りたいという方にはおすすめの1冊だと思います。