[CSS] 背景（background-color）に、2色指定する方法

こんにちは、@yoheiMuneです。
最近LPのマークアップで、背景を2色にするcssを実装したので、ブログにも残しておきたいと思います。

何がしたいのか

以下のように、背景（backgroundまたはbackground-color）を2色にする場合の実装です。

どうやって実装するのか

cssのbackgroundプロパティに、linear-gradientを指定します。

.bg {
    /*上から下へ*/
    background: linear-gradient(180deg,yellow 0%,yellow 100px,lime 100px,lime 100%);
}

色が変わるところ（ここでは100px）で、明確に色を変更することで2色を表現しています。この方法を使えば2色以上を指定することも可能です。

また、以下のように、左から右へ色を変えることもできます。

.bg {
    /*左から右へ*/
    background: linear-gradient(90deg,yellow 0%,yellow 100px,lime 100px,lime 100%);
}

90degと方向を変えたところがポイントです。この方向を例えば45degとすると、斜めにすることもできます。

最後に

マークアップをする際に、今回のような小ネタをいっぱい持っていると楽にできていいなーと思います。これからもたくさんアウトプットしていけたらと思います。

最後になりますが本ブログでは、フロントエンド、PHP、Python、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！