61
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

背景色を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色国旗やチェック柄など、応用も利きますね!

61
55
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?