【本の感想】フレキシブルボックス / CSSグリッドで作るHTML5&CSS3 レッスンブック

【本の感想】フレキシブルボックス / CSSグリッドで作るHTML5&CSS3 レッスンブック

フレキシブルボックスとグリッドを知りたくて買った本。

ちょこちょこdisplay:flexを見かけるようになったのでしっかり勉強しようと、ついでにグリッドも面白そうだったので手に取りました。

エビスコムの本は今までも何冊か読みました。

内容の流れはウェブサイトを作りながらCSSプロパティの使い方を学んでいくというもの。

実際の挙動を知りながら進んでいくので、本を終える頃にはCSSに馴染んでいる、といった感じで安心の作りになっています。

どちらの本もモバイルファーストかつレスポンシブデザインで最近の主流を意識しており、そちらも参考になりました。

広告

フレキシブルボックス(display:flex;)

使いやすかったです。

下は比較としてclearfixとflexでのコードです。

clearfix

flex

display:flex;と指定するだけで横並びになります。

コードも短く、直感的です。

順番を入れ替えるのも容易で、clearfixの代わりに使えそうです。

他にも要素の折返し方向を簡単に指定できたり、floatでは難しそうなレイアウトが簡単に実装できそうでした。

グリッド(display:grid;)

グリッドデザインのサイトを作る時に便利そうなプロパティ。

こちらも直感的な指定の仕方でした。

こういうデザインは以前はtableで作ってたのかな?その代わりになりそうです。

display:grid;を使ったサイトはまだ1度も見たことが無いので使い勝手は分かりませんが、本の中では使いやすかったです。

行、列を増やすのも、余白指定も簡単にできました。

最後に

どちらの本も300ページ程度で本番に入るまで少しかかりますが、基本的なプロパティだけなら学習コストは低いと思います。

何より進めていけば頭に入ってきますので、本の流れに合う人ならオススメです!

おまけ

少しずつサイトができていくのも楽しい。

広告