ミギムキ

[CSS] セクションごとにコンテナを飛び越えて背景色をつけたい

公開日:2019/11/07 更新日:2020/10/29

セクションとセクションの境界を目立たせるために、セクションごと交互に薄く背景色をつけるという方法があります
ただセクションに背景色をつけるだけでは、コンテナで幅を設定していた場合に画面の横幅いっぱいに色をつけることができません
そこで、セクションのbefore疑似要素を使うことで画面いっぱいの背景色を実現します

サンプルコード

html

<div class="container">
    <section class="section">
        
    </section>
    <section class="section">
        
    </section>
    <section class="section">
        
    </section>
</div>

CSS

.container > .section {
    position: relative;
}
.container > .section:nth-of-type(even)::before {
    position: absolute;
    top: 0px;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    bottom: 0px;
    z-index: -1;
    background-color: #f8f8f8;
    content: "";
}

仕組み・解説

セレクタで「nth-of-type(even)」と指定することで、偶数番目のセレクタのみに背景色がつくようになります
セクションが入れ子になることを考慮して、コンテナの直下のセクションにだけ背景色がつくよう、直下セレクタの「>」を使用しています
before疑似要素の「left」と「right」を「calc(-50vw + 50%)」とすることで、コンテナのサイズに左右されない画面の幅を基準にした開始座標が設定できます
背景色がセクション内のコンテンツに被らないよう、「z-index」を「-1」としています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。