Top

メモ書き

css

【css】背景色(background)を2色(複数色)に指定する方法

  • CSS
  • HTML
  • 主のメモ

2023.11.05

デザインによっては背景色が2色になっていることがあります。
擬似クラスを使って背景色を表現することも可能ですが、知っているだけでもっと簡単に実現する方法があるのでご紹介します。

backgroundで背景色を2色(複数色)にするlinear-gradient

まずは結論となるコードを。

div {
    background: linear-gradient(90deg, #FFEA7D 0%, #FFEA7D 50%, #7880CE 50%, #7880CE 100%);
}

backgroundプロパティで、linear-gradient を使います。
本来、linear-gradient は直線状に色をグラデーションさせるときに使われます。
to を使って方向を指定する方法もありますが、細かな調整が効くので、角度を「deg」で指定しています。

上記コードでは左右に半分ずつ、黄色（#FFEA7D）と青色（#7880CE）が表示されます。
「90degの方向に、0%の位置は#FFEA7Dで始まって、50%の位置で#FFEA7Dになるようにし、50%の位置から#7880CEで始まって、100%の位置で#7880CEになるようにする」といった具合でしょうか。
結果、0〜50%、50〜100%はそれぞれ同じ単一の色を指定しているので、背景色が2色になるワケです。

【応用編】
linear-gradient , repeating-linear-gradientのサンプル一覧

今回紹介するサンプルはこちら。

  • グラデーション
  • 上下（縦で半分）
  • 左右（横で半分）
  • ナナメ
  • 透明色
  • 3色（複数色）
  • ストライプとボーダー

サンプルはまとめてここから。demo

cssで背景色をグラデーションにする方法

div {
    background: linear-gradient(180deg, #FFEA7D 0%, #7880CE 100%);
}

これを基本形として覚えておけばOK。
linear-gradient を使った複数色してはすべてこの基本を応用したものになります。
ちなみにグラデーションも180degの数値を変えれば角度をつけてグラデーションさせることも可能です。

縦で半分、上下2色の背景色を指定する方法

div {
    background: linear-gradient(180deg, #FFEA7D 0%, #FFEA7D 50%, #7880CE 50%, #7880CE 100%);
}

先ほど結論となるコードの上下版。私の経験では上下に分割して2色指定することはあまりないですが、静的ページの要素の途中から背景色がはじまっているところでは、このあと紹介している透明と組み合わせて使ったりしたら楽なこともあります。

横で半分、左右2色の背景色を指定する方法

div {
    background: linear-gradient(90deg, #FFEA7D 0%, #FFEA7D 50%, #7880CE 50%, #7880CE 100%);
}

一番使うのは、基本形のグラデーションかこれです。

画像を使わずに背景色をナナメに分割する方法

div {
    background: linear-gradient(190deg, #FFEA7D 0%, #FFEA7D 50%, #7880CE 50%, #7880CE 100%);
}

セクションとセクションの境を斜めに分割しているデザインなどで使えます。
linear-gradientを使わなくても、画像を書き出して擬似クラスにbackground-image,position入れて…でも実現できますが、結構コード必要ですからね。状況次第で臨機応変に。

linear-gradientで透明色を指定する方法

div {
    background: linear-gradient(90deg, #FFEA7D 0%, #FFEA7D 50%, rgba($color: #7880CE, $alpha: 0) 50%, rgba($color: #7880CE, $alpha: 0) 100%);
}

カラーコードではなくrgbaを利用すれば、透明度の指定もできます。
背景色がフェードして切り替わる次のセクションに切り替わるときなどに使えますね。

背景色を複数色にする方法

div {
    background: linear-gradient(10deg, #7880CE 0%, #7880CE 33%, #FFEA7D 33%, #FFEA7D 67%, #7880CE 67%, #7880CE 100%);
}

2色の応用編。%で「〜から〜まで」の範囲を決めることを理解していればカンタンですね。

【css】repeating-linear-gradient
背景をストライブやボーダーのデザインにする方法

//ストライプ
div {
    background: repeating-linear-gradient(90deg, #FFEA7D, #FFEA7D 10px, #7880CE 10px, #7880CE 20px);
}

//ボーダー
div {
    background: repeating-linear-gradient(180deg, #FFEA7D, #FFEA7D 10px, #7880CE 10px, #7880CE 20px);
}

ストライプやボーダーのように規則的に色が並ぶ背景デザインの場合は、repeating-linear-gradient を使います。
本来、repeating-linear-gradient()は、linear-gradient()の繰り返しバージョンです。
linear-gradient()は、指定した方向にグラデーションを生成しますが、repeating-linear-gradient()は、そのグラデーションを無限に繰り返すプロパティです。
値の解説は下記の通り。

div {
    background: repeating-linear-gradient(90deg /*角度*/, #FFEA7D /*開始色*/, #FFEA7D 10px /*終了色と位置*/, #7880CE 10px /*開始色②と位置*/, #7880CE 20px /*終了色②と位置*/);
}

伝わりますかね、、
ポイントは1色目の終了位置と2色目の開始位置が同じになっているところです。
基本的にはグラデーションのプロパティなので、同じでないと開いた距離はグラデーションになります。
これこそ画像で書き出してbackground-repeat でしょ。って思われているかもしれないですが、アニメーションとかいるかもしれないじゃないですか。涙

背景色を2色(複数色)にする方法　まとめ

いかがでしたでしょうか。
そんなに使用頻度は高くないですが、痒いところに手が届く系の内容にはなったのではないでしょうか。(笑)
ちなみに、背景色だ、2色だ、グラデーションだと言っていますが、ディベロッパーツールなどで確認すると、linear-gradientもrepeating-linear-gradientもbackground-imageに指定されていることがわかります。今回はややこしくなりそうだなーと思ったのでbackgroundであてて紹介しましたが、グラデーションのcssはbackground-imageに指定するのだということを頭の片隅に置いていただければ。

ではまた。

関連記事

一覧に戻る