狼読

 
2020/03/12

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

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

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

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

<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%の時から50%まで#000のカラーで、50%から100%までは#eeeになるようにcssを記述しました。

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

まとめ

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

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

2020/04/28

[html]チェックボタンを文字を押した時にチェックされるようにする方法

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読