CSS プログラミング ホーム

今更聞けない!CSSだけで背景色を分割する方法

2017年8月29日

 

 

環境

  • 画面分割
  • 分割
  • css
  • CSS
  • css3
  • CSS3
  • html
  • HTML
  • html5
  • HTML5
  • linear-gradient

説明

linear-gradientを使うとcssで背景色をに分割することができます。使用例はこの通りlinear-gradient(開始位置と角度, 開始色, 途中色, 終了色);で引数に関しての説明は下記にまとめました。

引数1引数2引数3
開始位置と角度・開始色途中色終了色

実装

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>


  <style type="text/css">
  body {
    background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);
   }
  </style>
</body>
</html>

実行

スクリーンショット 2017-08-29 14.46.17.png

Pocket
LinkedIn にシェア

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-CSS, プログラミング, ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.