CSS メインとサイドバーの2カラムを作成する練習

CSSで2カラムのレイアウトにするHTMLをマークアップしてから、CSSのdisplay:flexとflexプロパティでmain要素とaside要素を横並びにして、メインとサイドバー間の隙間を作るという簡単な手順で練習をします。

最初は2カラムを親要素の左にメイン、右にサイドバーのレイアウトで作成をしますが、左がサイドバーで右がメインの2カラムレイアウトにも切り替える練習もしています。

記事中で参考になる部分が見つかり、誰かの役に立つことがあれば幸いです。

1. メインとサイドバーのHTML
2. CSSでメインとサイドバーを横に並べる
3. 2カラムの隙間をpaddingで調整
4. メインが右にサイドバーが左の2カラム
5. 2カラムを縦に並べてレスポンシブにする

メインとサイドバーのHTML

まずはCSSで2カラムにするメインとサイドバーのHTMLをマークアップします。

<div class="wrapper">

    <main>
        <div class="main-content"></div>
        <div class="main-content"></div>
        <div class="main-content"></div>
        <div class="main-content"></div>
    </main>

    <aside>
        <div class="side-content"></div>
        <div class="side-content"></div>
        <div class="side-content"></div>
        <div class="side-content"></div>
    </aside>

</div>

wrapperクラスを付与したdiv要素を親要素にして、main要素とaside要素をマークアップします。

main要素が2カラムのメインコンテンツを入れる親要素、aside要素がサイドバーのコンテンツを入れる親要素になります。

各親要素に入れるコンテンツはdiv要素を4つマークアップして分かりやすく練習ができるようにしています。

メインとサイドバーのHTMLはCSSで最終的に以下の画像のような2カラムレイアウトにします。

ヘッダーとフッターは2カラムの練習でも必要であれば適宜でマークアップしてください。

CSSでメインとサイドバーを横に並べる

次はCSSでメインとサイドバーを横に並べる練習です。

CSSの記述量が少ないのでメインとサイドバーを横に並べて表示されるまでの記述をまとめて載せました。

.wrapper{
    width: 95%;
    max-width: 1100px;
    display: flex;
    margin: 0 auto;
}

main{
    flex: 3;
}
.main-content {
    padding-top: 37.1%;
    margin-bottom: 20px;
    background: #9e9e9e;
}

aside {
    flex: 1;
}
.side-content {
    background-color: #333;
    padding-top: 65%;
}

メインとサイドバーを横に並べるCSSの記述ポイントは3つです。

wrapperのdisplay:flex
mainのflex:3
asideのflex:1

です。

CSSのdisplay:flexは横に並べる子要素達の親要素に指定することでフレックスコンテナになり、子要素の1つ1つはフレックスアイテムになります。

そしてCSSのflex:3とflex:1について。

flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティを一括指定したプロパティです。

フレックスコンテナの領域にフレックスアイテムをどのように収めるか、flexプロパティの値に指定した整数の分を各flexアイテムに分配してアイテムを伸ばします。

今回の2カラムの練習では、親要素wrapperをフレックスコンテナにし、main要素に3分割分と、aside要素に1分割分を分け合って、メインとサイドバーが横並びになる2カラムのレイアウトに作成できます。

CSSのflexプロパティを使用してメインとサイドバーを横に並べると以下の画像のように表示します。

メインとサイドバーのコンテンツはpadding-topとbackground-colorで簡易的に表示させています。

これで２カラムの原型が作れたので2カラムのメインとサイドバーの隙間を作っていきます。

2カラムの隙間をpaddingで調整

2カラムの隙間はCSSのpaddingで調整して可変するイイ感じのレイアウトに完成させます。

main{
    padding: 60px 1.82% 60px 0;
}

aside {
    padding: 60px 0 60px 0.91%;
}

.side-content {
    margin: 0 0 6.67% 0;
}

現段階での2カラムのレイアウトは左のメインと右のサイドバーが、くっついている状態なので、メインとサイドの間に隙間を作ります。

mainセレクタにpaddingの一括指定を使用して、上60px、右1.82%、下60px、左0のpaddingで隙間を調整し、右サイドバーは上60px、右0、下60px、左0.91%のpaddingで隙間を作ります。

メインとサイドバーの間をpaddingで調整して隙間を作ると、CSSでレイアウトした2カラムは以下の画像のようになります。

横並びにしたメインとサイドの上下は60pxで統一したので、横にまっすぐ揃います。

メインとサイドバーの隙間を調整しているpaddingはパーセントの単位を指定することで、画面を縮小してもメインとサイドの隙間をいい感じで維持してくれます。

メインが右にサイドバーが左の2カラム

せっかくなので、「左：メイン＋右：サイド」で作成した2カラムを、CSSだけで「右：メイン＋左：サイド」のレイアウトに変更する練習もしてみてください。

.wrapper{
    flex-direction: row-reverse;
}

main{
    padding: 60px 0 60px 1.82%;
}

aside {
    padding: 60px 0.91% 60px 0;
}

右サイドから左サイドの2カラムに切り替えてレイアウトするには、CSSのflex-directionプロパティの値にrow-reverseを指定し、メインとサイドの親要素wrapperセレクタに記述します。

これによりメインとサイドバーのレイアウトが逆になって横に並ぶので、メインとサイドバーの隙間を調整しているpaddingも逆に修正し直します。

CSSを修正する記述量は少ないですが、メインが右に表示され、サイドバーは左に表示された2カラムのレイアウトに切り替えできます。

今まで、メインとサイドバーがある2カラムを逆にする場合には、HTMLの構造を逆にしてCSSのdisplay:flexを適用していたのですが、こんなに簡単に修正できることを知り、つい記事の説明に加えておきたかった次第であります。

2カラムを縦に並べてレスポンシブにする

CSSで横に並べる2カラムレイアウトを作成してきましたが、2カラムを縦に並べてレスポンシブにする練習もしておきたいですね。

画面が狭いスマホでは縦一列に並ぶ2カラムにすることにし、メディアクエリのブレイクポイントで指定する幅で横から縦にスタイルが切り替わるようにCSSを書いていきます。

@media screen and (max-width: 760px){
    .wrapper{
        display: flex;
        flex-direction: column;
    }
    main, aside{
        padding: 40px 10px;
    }
    .main-content{
        margin-left: 0;
    }
}

メディアクエリのブレイクポイントはmax-width: 760pxを指定します。

メディアクエリの中にはメインとサイドバーの親要素wrapperセレクタを記述してdisplay:flexとflex-direction: column;を適用します。

flex-direction: columnをメディアクエリ内に記述したことで、画面が760px以内になったときには、横に並ぶメインとサイドバーは、メインが上になりサイドバーが下に配置された縦並びの2カラムレイアウトに切り替わります。

そして横並びの2カラムで記述しているpaddingの値がメディアクエリにも継承されて左右にずれているため、mainとaside要素にはpaddingを記述して余白を値で統一します。

すると以下の縦長画像のようにCSSで縦に並べる2カラムのレスポンシブレイアウトを作成することができます。