2018/11/22更新

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

このエントリーをはてなブックマークに追加            

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



何がしたいのか

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

上の100pxは黄色の背景
残りは黄緑色の背景



どうやって実装するのか

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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。