今更聞けない!CSSだけで背景色を分割する方法
環境
- 画面分割
- 分割
- css
- CSS
- css3
- CSS3
- html
- HTML
- html5
- HTML5
- linear-gradient
説明
linear-gradientを使うとcssで背景色をに分割することができます。使用例はこの通りlinear-gradient(開始位置と角度, 開始色, 途中色, 終了色);で引数に関しての説明は下記にまとめました。
| 引数１ | 引数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>
実行
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！