ブログのデザインとレイアウトを更新 / CSSの醍醐味はレイアウトと配置かも

新しいブログのレイアウトで使ったhtmlとcssをシェアします。

bootcamp 上:トップページの新デザイン

ブログのデザイン、レイアウトを大幅にアップデートしました。
以前は1コラムで、上からブログのリスト、ABOUT、WORKとだーーっと羅列するだけだったのですが、ブログ記事のサムネイル画像を使ったリストにしたり、2コラムにするなど、よりブログデザインぽくしてみました。

今回のアップデートで特に意識したのは モバイル端末でもレイアウトが崩れにくくすること、かつ見やすさを保つこと でした。

ブログのヘッダー、メインセクション、サイドバー、フッターといった主な構成要素を、崩れにくい形でどう配置すべきかどうか考え、CSSエキスパートの友人からもアドバイスをもらった結果、flexboxを活用してレイアウトを組むことにしました。

以下は、ダミーのコンテンツを入れてますが、基本的に新しいブログレイアウトで活用しているCSSになります。
ヘッダーと、メインセクションにそれぞれflexboxを使っています。

CSSの最初で、@media(min-width:550px) の中でセクションとヘッダーのdisplayをflexに設定しておくことで、画面が550pxよりも小さくなったときにはflexboxの設定が外れて、1コラムになるようにしてみました。

ここ1週間ぐらいは、CSSのレイアウトとポジションを勉強してたのですが、奥が深いです。 gridなど割と新しいレイアウト方法も普及してきて、選択肢は増えていますが、どれを使うのがベストプラクティスなのかというのを、これからも意識したいと思いました!

ではでは!

Latest Posts