HTML5/CSS3モダンコーディング

1つ目を終えた。
わかりやすくて良い本だと思う。
ただ、モダンと書いてあるけどflexbox, grid layoutは使われていない。

勉強も兼ねてflexboxとgrid layout使ってみたらすごくcssがシンプルになった。
横に並べたいときはとりあえず display:flex を使っておけば良さそう。
今までfloatやinline-block使ってたところはflexで書き換えられそう。
grid layoutは始めにgridの幅と高さ決めるおかげでcssがとても見やすくなる。
ちなみにgrid layoutでこんな感じに書くとこんなふうになる。

  grid-template-rows: 100px 1fr 100px;
  grid-row-gap: 35px;
  grid-template-columns: 1fr 660px 275px 1fr;
  grid-column-gap: 35px;
  grid-template-areas: 
    "header header header   header" 
    "...... main   sidemenu ......" 
    "footer footer footer   footer";