Flexboxを使ったレイアウトを学ぶならこの本！6ステップでマスターする 「最新標準」HTML+CSSデザイン

投稿日 更新日

発売前からずっと楽しみにしていた、エビスコムの最新本『6ステップでマスターする 「最新標準」HTML+CSSデザイン』

Flexboxを使ったレイアウトを学べる本が出るのを待っていたのですが、この前紹介した「現場のプロが本気で教える HTML/CSSデザイン講義」のように、最近になってようやく出てきましたね。

この『6ステップでマスターする 「最新標準」HTML+CSSデザイン』でも、最新標準と書いてあるように、Flexboxを使ったレイアウトを学ぶことができます。

発売後すぐに買って読んだので、感想をさっと書いてみます。
今回のもやっぱり面白かった！

安心信頼のエビスコム本

Web制作の本では、一番わかりやすく面白くて大好きなエビスコムの本。
エビスコムの本はAmazonでも「HTML5&CSS3デザインブック 」や「HTML5&CSS3レッスンブック」など、皆高評価となっています。

私もはじめてエビスコムの本を読んだのが、HTML5&CSS3デザインブックでした。
この本のおかげで、Webサイトを作る楽しさに出会えたといっても過言ではありません。
エビスコム本は、どれも丁寧すぎるぐらいひとつひとつステップごとに分かれた解説、完成図とコードがそれぞれセットで書かれているので、非常に読みやすく順を追って理解を深めながら取り組むことができます。

HTML5&CSS3デザインブックの最新版といえる内容

6ステップでマスターする「最新標準」HTML+CSSデザイン

6ステップでマスターする「最新標準」HTML+CSSデザインは、そのHTML5&CSS3デザインブックの最新版といえる内容となってます。
まだどちらも持ってなくて今、買うんだったら間違いなくこちらがおすすめです！

出版社は違っているのですが、中身はHTML5&CSS3デザインブックと同じようなスタイルとなっており、すらすらと読み進めることができます。
HTML5&CSS3デザインブックとの違いは、やはり名前にもある通り最新標準で書かれているところにあります！

HTML5&CSS3デザインブックとの主な違い

HTML5&CSS3デザインブックとの主な違いは、最新のHTML5+CSSの機能を使っているところ。

  • 段組みにfloatではなく、Flexboxを使用
  • CSS3の新しい単位、remやvh、vwを使用
  • CSSの変数機能を使用

段組みにfloatではなく、Flexboxを使用

HTML5&CSS3デザインブックでは、前半部分にfloatを使ったボックスを横に並べる方法などを紹介しているのですが、今回の本ではFlexboxを使ってかんたんで楽に横並びを実現しています。

floatを使った書き方

元のHTML
<div class="box">
  <div class="boxA">boxA</div>
  <div class="boxB">boxB</div>
</div>
CSS
.box::after {
  content: "";
  display: block;
  clear: both;
}

.boxA {
  float: left;
  width: 50%;
}

.boxB {
  float: left;
  width: 50%;
}
floatを使って行った結果

ちゃんと横並びにすることができましたね。
表示にはデザインブックにあったgrid-guideのレイアウトを使わせてもらってます。

次にflexを使って書いてみたいと思います。

flexを使った書き方

CSS
.box {
  display: flex;
}

.boxA {
  flex: 1;
}

.boxB {
  flex: 1;
}
flexを使って行った結果

同じように横並びにすることができました。

未だにclearfixの意味とか分からないままfloatを使ってたのですが、これならflexと指定するだけなので楽チンですね。
flexの使い方が分からなくなっても、後ろのAPPENDIXのページでフレキシブルボックスレイアウトの説明が書かれているので、その都度見れば安心です。

CSS3の新しい単位、remやvh、vwを使用

remやvhなど使ったことはあったのですが、今回読んでみてうまく有効に使うことができていなかったんだなぁと実感しました。
ブラウザサイズに合わせて可変に動くフォントサイズの指定の仕方など面白かったですね。

CSSの変数機能を使用

これまで変数はSassでしか使えないものだと思っていたのですが、CSSでも変数を使うことができるということをはじめて知りました。
使えるといってもIE11やEdgeでは対応していないらしく、従来の書き方も設定しないといけないため、無駄な行が1行増えてます。（さすがIE…）
最後のほうにアレンジでサイトの色を変えているのですが、変更する際に一つ一つ書き換えないといけないので、今のところは設定しなくてもいいかな…

最新のHTML/CSSでコードを書こう

この本を元に、これまでfloatなどで書いてきたものをflexなどに書き換えてみるのもいいかもしれませんね。
私もこの本で作ったサンプルサイトを元にして、このサイトのWordPressのテーマに反映させてみようかと思います。

おまけ：floatについて

この記事を書いてる内にfloatって使えねぇなんて思っていたのですが、
floatって本来画像の回り込みに使うものでしたよね。

あんまり画像の回り込みを使うことがなかったので、floatはボックスを横並びにするためのものだと認識してしまっていたのですが、本来の使い方を試してあげるとfloatくんの良さが輝いて見えます。