はてなブログのテーマを製作しているのですが、最初から躓いております。
みなさんこんにちわ、モノトーン好きのmonoです。
レスポンシブデザインのテーマを作成したくてCSSの本を購入したのですが、中古のCSSの本を購入したので情報が古くて使えませんでした。涙
ということで、flexboxのレイアウトに躓いております。
CSSって難しいですね。
目標とするレスポンシブデザイン
どんなレスポンシブデザインのテーマを作りたいかというと
スマホ→1カラム タブレット→記事まで1カラムでサイドバーは1カラムの下に2列 パソコン→普通の2カラム
これをCSSで書かないといけないのですが、初心者にはハードルが高くって。
順番としては、モバイルファーストで書きたいので
スマホ→タブレット→パソコンという順番でレイアウトしていこうと思います。
スマホの1カラムをflexboxで書く
まずはHTMLを確認してメインの部分とサイドバーの部分が何のクラスで書かれているのか確認します。
記事が入っているのが#wrapper、サイドバーが#box2となっていて、その2つを囲っているのが#content-innerです。
親要素のflexboxを設定すると小要素が縦や横に並ぶので、まずは親要素の#content-innerにflexboxを書きます。
#content-inner { display: flex; flex-direction: column; justify-content: space-between; }
content-innerの中にある子要素を縦に並べて、各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せるということですね。
要するに1カラムの並びになります。
次、タブレットを縦にした時に、記事は1カラムのままで サイドバーは2列にする。
@media (min-width: 768px) { #box2-inner { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; } .hatena-module { width: 48%; } }
記事の部分は1カラムのままなのでwrapperの記載はせずにそのままでいいです。
@media (min-width: 768px) でレスポンシブデザイン特有の768px以上はこれを適用するという意味です。
なので、モバイルの時に書いた記述も継承しつつ、さらに768px以上はこの処理をするという意味になります。
box2-innerには、サイドバーのモジュールが入っているので、親要素であるbox2-innerにflexboxを設定します。
flex-wrap: wrap;は、折り返し。
サイドバーの部分は2列にしたいので、.hatena-moduleの横幅を48%にして、適度に間が空くようにしました。
justify-content: space-between;にすると両端に寄るので自然と間が空くんですね。
次はパソコン。
@media (min-width: 1024px) { #content-inner { flex-direction: row; } #wrapper { width: calc(100% - 380px); } #box2 { width: 336px; } .hatena-module { width: 100%; } }
パソコンは普通の2カラムにしたいので、content-innerをflex-direction: row;で子要素を横並びにします。
サイドバーは固定幅の336pxにして、wrapperの部分は可変にしています。
サイドバー部分はスマホの時に48%としていたのを100%にして1列に戻します。
苦労したのは、メインとサイドバーの間のスペースをどういう風にとったらいいのかということです。
メインの部分を可変にしているので、試行錯誤して、wrapperをwidth: calc(100% - 380px);としました。
100%の横幅から336pxとスペース分を除いた横幅に設定することで、メインとサイドバーの間のスペースを空けています。
雑感
これだけ書くのに数時間を要しました。 疲れちゃった。
width: calc(100% - 380px);
CSSって計算もしてくれるんですね。
追記
サイドバーのカラムのところを .hatena-moduleとだけしていたのですが、記事下や記事上のモジュールにも影響を与えるので、#box2-inner .hatena-moduleに変更しました。
@media (min-width: 768px) { #box2-inner .hatena-module { width: 45%; } }
@media (min-width: 1024px) { #box2-inner .hatena-module { width: 100%; } }