Satodevcss新しいブログのレイアウトで使ったhtmlとcssをシェアします。上:トップページの新デザインブログのデザイン、レイアウトを大幅にアップデートしました。以前は1コラムで、上からブログのリスト、ABOUT、WORKとだーーっと羅列するだけだったのですが、ブログ記事のサムネイル画像を使ったリストにしたり、2コラムにするなど、よりブログデザインぽくしてみました。ブログのヘッダー、メインセクション、サイドバー、フッターといった主な構成要素を、崩れにくい形でどう配置すべきかどうか考え、CSSエキスパートの友人からもアドバイスをもらった結果、flexboxを活用してレイアウトを組むことにしました。以下は、ダミーのコンテンツを入れてますが、基本的に新しいブログレイアウトで活用しているCSSになります。ヘッダーと、メインセクションにそれぞれflexboxを使っています。中でセクションとヘッダーのdisplayをflexに設定しておくことで、画面が550pxよりも小さくなったときにはflexboxの設定が外れて、1コラムになるようにしてみました。ここ1週間ぐらいは、CSSのレイアウトとポジションを勉強してたのですが、奥が深いです。