Help us understand the problem. What is going on with this article?

背景色を2色で分割表示する方法

More than 3 years have passed since last update.

背景色を2色で分割表示する方法

two-colors.png
こんな感じに背景色を2色指定します。

コード

colors.css
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

解説

グラデーションを表示するlinear-gradientを使用します。
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient#Browser_compatibility
↑ linear-gradientに関する詳細です。
http://caniuse.com/#feat=css-gradients
↑ 各ブラウザでの実装状況早見です

書式は...
background:linear-gradient(方向角度,色 位置,色 位置,...);

・方向角度
グラデーションの向きです。
0deg    ↑   (下から上へ)
90deg   →   (左から右へ)
180deg   ↓   (上から下へ)
270deg   ←  (右から左へ)

角度ではなく以下のキーワードで指定することも可能です。
to top   =  0deg
to right  =  90deg
to bottom = 180deg
to left   = 270deg
言葉通りですね。
方向角度を省略した場合は自動的に to bottom(180deg) となります。

・色 位置
実際にコードと結果を照らし合わせると分かり易いです。
例えば...

background:linear-gradient(to right, blue 0%, red 100%);

ならば
gradu.png
といったように、0%から100%にかけて、青色から赤色へと徐々に変化していきます。
(0%がスタート位置、100%がゴール位置)
また、

background:linear-gradient(to right,blue,red);

と、位置を省略した場合にも、青から赤へのグラデーションという意味になり、
先のコードと同じ結果になります。

そういえば、冒頭の画像では、グラデーションではなく、
真ん中部分でスパッと色が区切られていました。

colors.css
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

冒頭のコードでは

青(0%)~青(50%)のグラデーション
赤(50%)~赤(100%)のグラデーション

と指定されています。

青 → 青 と、同じ色へ進むので、実際にはグラデーションが発生せず、
0%から50%まで青色で塗りたくられるという訳です。
赤も同様ですね。結果、0~50%まで青色、50%~100%まで赤色、と2色2分割となります。

%指定なので要素の幅が縮んだとしても、片方の色が削れたりもしません。
linear-gradientはグラデーションだけでなく、
3色国旗やチェック柄など、応用も利きますね!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away