Zenn
📝

【CSS】背景を2色に分け、コンテンツはwrapperの中に格納させたセクションを作る

2023/05/29に公開
CSS
HTML
tech

Webページのデザインで【背景が2色に分かれたセクション】を好きで時々使っています。
背景の分かれ具合とコンテンツが幅制御の配下に置かれているという点を両立させたコーディングのサンプルを今回はご紹介致します。

実装上の注意点

紹介する方法はコンテンツの量に応じて背景色を付ける方法ではないため、スマホなどでレイアウトを変更する際はご注意下さい。
後述のlinear-gradientの設定内容をメディアクエリで変更しにくいという点をご理解頂いた上でお読み下さい。

私の場合、実装の際にスマホ時は2色分けとは別のデザインでご提案するといった方法を採っています。

実装図

分かりやすく図解にしてみました。
AとBが背景として全幅、Eの最大幅が設定されたcontent-wrapperの配下にCとDが置かれている…というような構成です。

HTML

<section class="asymmetry">
  <div class="wrapper content-grid">
    <div class="column column-left">コンテンツ左</div>
    <div class="column column-right">コンテンツ右</div>
  </div>
</section>

上記のような感じでコーディングします。
シンプルな構成ですね。
CSSについては少し分解して見てみたいと思います。

sectionの背景のCSS

.asymmetry {
   background: linear-gradient(90deg, #fafafa 0%, #fafafa 40%, #fff 40%, #fff 100%);
   padding: 20px 0;
}

background: linear-gradient();
これを使って色を分けます。
90degで縦分けにしつつ、色の割合で各色の配分を決めます。
あとは上下にpaddingで余白を設定しておきます。

wrapperのCSS

.wrapper {
　　width: 90%;
  　max-width: 1200px;
    margin: auto;
}

これはシンプルですね。
個人的にはwrapperにmarginで余白を作るコーディングより、widthを割合で決めて余白とするコーディングが好みなので採用しています。

content-gridのCSS

.content-grid {
  display: grid;
  grid-template-columns: 38.75% 1fr;
  grid-template-rows: auto;
}

gridを使ってコンテンツを並べましょう。
grid-template-columnsをlinear-gradientと同じ値にしてもよいですが、少し背景とズレてしまうような感じになるので、違和感のないよう少し数値を削っています。
この数値の部分をもっとシステマチックにしたかったなぁ…良い方法があれば是非教えて下さい。

今回は使っていませんが、column-gapを使うとコンテンツ間の余白を作り出すことも可能です。
後述のcolumnごとのmarginで対応する方がシンプルだと思います。

columnのCSS

.column-left {
   margin-right: 20px;
}

.column-right {
   margin-left: 20px;
}

左右で中央に接している方の側にmarginを入れて、columnのコンテンツ内容が色の境目にぶつからないようにしてあげると綺麗になると思います。
共通で設定したい内容があれば.columnに必要なプロパティと値を記述するようにします。

以上の手順で、2色背景とwrapperの制御配下にコンテンツを置いたセクションが出来上がりです。

終わりに

背景を2色に分ける方法はよく見かけますが、コンテンツの幅制御まで言及した情報がなかなかないのではないかと感じ、記事にしてみました。
自分でも好きなレイアウトなので、よく使っています。

CSSは本格的に記事にするのが初めてですが、奥が深いなと感じる部分が多いですね…
以上、参考になりましたら幸いです。

Discussion