『HTML5/CSS3モダンコーディング』を読んでいました #kosen14s 読書会
kosen14s 読書会 10日目、担当やましーです。担当は1周まわったのですが有志により読書会は続いており、立川のガルパンのような状態です。まだもうちょっと終わりそうにないしどこまで続くか見守っていきたいです。
今回は『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方』という本を紹介します(読んだのは去年の秋頃ですが…)。
むかし「これすごいで一回見てみ〜」と http://yoshiko-pg.github.io/ というポートフォリオサイトを見せてもらったことがありまして、HTML/CSS/JSでこんなに広い表現ができるのかとびっくりしました。
それからしばらく経ってこの本が出ると聞いて、ふと著者のかたのお名前を見て「あ!!!!!あのすんげーポートフォリオサイトの!!!」「これは絶対読まなあかん」と思って買いました。
どんな本?
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
- 作者: 吉田真麻
- 出版社/メーカー: 翔泳社
- 発売日: 2015/11/02
- メディア: Kindle版
- この商品を含むブログを見る
よく見る人気のWebページのデザインスタイル
をハンズオン形式で作っていきましょう、という内容です。リンク先に見本があります。
IE9より下は切っていて、
HTMLの
- section
- article
- nav
やCSSの
- :last-child擬似クラス
- 単位rem
などをハック無しで使う前提でいます。うれしい。
とにかくサンプルサイトがかっこいい!
コードを書いていくたびサイトがどんどんかっこよくなっていくので、モチベーションが途切れることがありません。 やっぱり作るならかっこいいサイトがいいです。
著者のかたは Goodpatch の社員さんなんですよね。憧れます…!
ONE POINT の説明がわかりやすい!
例えば、プロパティを当てる前→当てた後、marginについて、などの図がとてもわかりやすいです。
これまで position や display をなんとなくで使ってしまっていたのですが、図を見て「なるほどだからあの時うまくいかんかったんか〜」と理解できました。
今までの自分が書いたコードを振り返るようになる
この本を読み終わってサンプルサイトも3つ作り終えると、「めっちゃ勉強になった…すごい本に出会ってもた!」という感情のほかに「やばい、今まで書いてきたコード無駄多くて全然だめやん…」「できることなら全部書き直したい」と思うようになりました。
もっと前にこの本を読めていたら、開発スピードも上がっていただろうしもっとかっこいいサイトになっていただろうなぁ…
こんなひとにおすすめ
対象は、HTML5/CSS3を書いて主要なタグ・プロパティを知っている人〜ひとりでWebサイトを作ったことがある人、でしょうか。逆に全く触れたことのない人にはちょっと難しいかもしれません。
主要なタグ・プロパティを知っている人は「こんな書きかたをするんだ」「こんなこともできるんだ」、ひとりでWebサイトを作ったことがある人は「こんな実装方法もあるのか」「今度はこう書いてみよう」とそれぞれ勉強になる部分が変わってくると思います。
おわりに
この本が誰かのほしい物リストに入っていたら必ず贈るようにしています。 Kindle版は時々セールになっているので、ぜひ読んで写して書いてみてほしいです。