【CSS】要素の背景を2色に分けて表示する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSで要素の背景を2色に分けて表示する方法をご紹介しています。

上記のような疑問にお答えできればと思います。

では、解説していきます。

gradientを使う

CSSにはグラデーションを表現するための関数が用意されています。線形(linear-gradient)、放射(radial-gradient)、扇形(conic-gradient) です。
これらは2つ以上の色の間を変化させてグラデーションを表現することができます。この関数を利用して2色に分割した背景を描くことができます。

gradientはimageですので、使用する場合は下記のどちらかの方法で指定する必要があります。

background: 〇〇-gradient();
background-image: 〇〇-gradient();

より詳しい情報が欲しい方は、下記のページをご参照ください。わかりやすくておすすめです。

では実際にgradientを使って背景を表現してみましょう。

gradient()で2色の背景を表現する

まずで2色の背景を表示する要素を作成します。

HTML

<div id="app"></div>

続いてlinear-gradientで2色に分割した背景が表示されるように設定します。今回は半分に分割された2色の背景を表示したいので、線形のlinear-gradientを使用します。

CSS

#app {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(90deg, #384878 50%, #f5f5f5 50%);
}

上記では3つの引数を指定しています。ざっくりですが引数に指定する値は下記の通りです。

第1引数	グラデーションの向きを角度で指定します。
第2引数	色コードと色が変化する位置を指定します。
第3引数	色コードと色が変化する位置を指定します。

実行すると下記のような表示になります。要素の背景が2色で分割して表示されていますね。

See the Pen
QWbrYPy by ryohei (@intotheprogram)
on CodePen.

最後に

今回linear-gradientを使用して背景を2色で表示する方法をご紹介させていただきました。角度やパーセントを変更するだけで斜めに表示したり、境目をぼかして表示したりできますので、ぜひ数値を変更して色々なグラデーションを作成してみてくださいね。

以上、CSSで要素の背景を2色に分けて表示する方法のご紹介でした！