[css]背景色を真ん中のところできっちり２色にして背景をツートンカラーにしてみよう

cssを使って今回は、背景色を２色設定する方法をご紹介します。
cssを使ってグラデーションをつけるときの応用で可能です。hoverなどを行うときに応用として使えたりデザインの幅が広がるかと思います。ぜひ覚えていってください。

背景をツートンカラーにするためのhtmlの準備

htmlの構造は、シンプルにdivタグ１つで行こうと思います。

<div class="bgcolor_two"></div>

上記の .bgcolor_twoにcssを当てて行こうと思います。

cssを使って背景をツートンカラーにしてみよう

cssは、グラデーションをつけるのと同じ考えになります。
cssのコードは次のようになります。

<style>
.bgcolor_two{
 width:100%;
 height:200px;
 background:linear-gradient(to right,#000 0%,#000 50%,#eee 50%,#eee 100%);
}
</style>

上記のコードを使ったサンプルは次のようになります。

今回のcssでは、右側に向かって0%の時から５０％まで#000のカラーで、50%から100%までは#eeeになるようにcssを記述しました。

この％をずらせばどこまで指定の色にするかを変えることできます。
またto rightの部分をto leftになどにすると逆にすることができます。
degを指定して斜めなども可能です。

まとめ

今回はcssを使って背景を２色にする方法をご紹介させていただきました。この方法をhoverなどに応用すると以下のようなものが作れたりします。

hoverすると２色のものが入れ替わるものなどに応用できます。ぜひ色々試してみてください。