はてなブログテーマ製作｜レスポンシブデザインflexboxでつまずく

はてなブログのテーマを製作しているのですが、最初から躓いております。

みなさんこんにちわ、モノトーン好きの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とスペース分を除いた横幅に設定することで、メインとサイドバーの間のスペースを空けています。

雑感

これだけ書くのに数時間を要しました。 疲れちゃった。

今日覚えたCSS

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%;
    }
}