【CSS】背景（background）を2色にする

  • 2019.6.18

背景を2色にする。
いわゆる、半分こ。
ん、どうやるんだっけ？
って思ったのでメモ。
『background』の『linear-gradient』をうまく使うとCSSだけでコーディング可能です。

きのこさん
パン、半分こ、しましょうか？
きのこさん
わ、ありがとうございます

茶と紺、縦の半分こ

See the Pen
CSSだけで、背景を2色にする by 125naroom (@125naroom)
on CodePen.

茶と紺、横の半分こ

See the Pen
CSSだけで、背景を2色にする、横の半分こ by 125naroom (@125naroom)
on CodePen.

茶と紺、斜めの半分こ

See the Pen
CSSだけで、背景を2色にする、斜めの半分こ by 125naroom (@125naroom)
on CodePen.

CSS解説

縦の半分こ、『180deg』がポイント

.oneArea {
  background: linear-gradient(180deg, #b79376 0%, #b79376 50%, #315a8c 50%, #315a8c 100%);
}

横の半分こ、『90deg』がポイント

.oneArea {
  background: linear-gradient(90deg, #b79376 0%, #b79376 50%, #315a8c 50%, #315a8c 100%);
}

斜めの半分こ、『45deg』がポイント

.oneArea {
  background: linear-gradient(45deg, #b79376 0%, #b79376 50%, #315a8c 50%, #315a8c 100%);
}

※半分こじゃなくても大丈夫。『%』を調整すればOKです。

グラデーションの応用だったりする

実はグラデーションの仕組みに似ています。応用でいろいろ使えたりするので参考にどうぞ。

【CSS】しましま（縞模様）をつくる

▽グラデーションを使うとシマシマ模様も作れたりする
CSSだけで、しましま（縞模様）をつくる

さいごに

きのこさん
やっぱり半分の半分でもいいですか？
きのこさん
いいですよー
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

かんれん

Googleさんのおすすめ

人気記事

more

Googleさんのおすすめ

デザインの記事


Fatal error: Uncaught FeedException: Cannot load feed. in /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/inc/Feed.php:188 Stack trace: #0 /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/inc/Feed.php(51): Feed::loadXml('https://designn...', NULL, NULL) #1 /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/other_list.php(17): Feed::loadRss('https://designn...') #2 /home/naroom125/125naroom.com/public_html/wp/wp-includes/template.php(725): require('/home/naroom125...') #3 /home/naroom125/125naroom.com/public_html/wp/wp-includes/template.php(672): load_template('/home/naroom125...', false) #4 /home/naroom125/125naroom.com/public_html/wp/wp-includes/general-template.php(168): locate_template(Array, true, false) #5 /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/single01.php(192): get_template_part('other_list') #6 /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/single.php(4): in /home/naroom125/125naroom.com/public_html/wp/wp-content/themes/design125naroom/inc/Feed.php on line 188