『HTML5/CSS3モダンコーディング』を読んでいました #kosen14s 読書会

kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。

今回は『HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します（読んだのは去年の秋頃ですが…）。

むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。

それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ！！！！！あのすんげーポートフォリオサイトの！！！」「これは絶対読まなあかん」と思って買いました。

どんな本？

よく見る人気のWebページのデザインスタイル

をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。

IE9より下は切っていて、

HTMLの

やCSSの

などをハック無しで使う前提でいます。うれしい。

コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。やっぱり作るならかっこいいサイトがいいです。

著者のかたは Goodpatch の社員さんなんですよね。憧れます…！

例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。

これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。

この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた！」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。

もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…

対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。

主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。

この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。