5.1 線形グラデーション
グラデーションはウェブデザインで強力なツールで、画像を使わずに色の滑らかな移行を作成できるんだ。CSSは主に2種類のグラデーションを提供してる：線形（linear-gradient）と放射状（radial-gradient）。これらのグラデーションは要素の背景やボタンの作成、その他の視覚効果に使われるよ。
線形グラデーション (linear-gradient)
線形グラデーションは、特定の線（軸）に沿って2色以上の色の滑らかな移行を作成するよ。線は水平、垂直、または任意の角度で設定できるんだ。
構文
background: linear-gradient( direction, color-stop1, color-stop2, ...);
値
direction: グラデーションの方向。度単位で指定できる（例：90deg）、キーワードを使うことも可能（例：to right,to bottom left）color-stop: グラデーション内の色とその位置を決めるカラーストップ
使用例
水平グラデーション:
CSS
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
HTML
<body>
<div class="linear-gradient-horizontal">水平グラデーション</div>
</body>
垂直グラデーション:
CSS
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
HTML
<body>
<div class="linear-gradient-vertical">垂直グラデーション</div>
</body>
斜めグラデーション:
CSS
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
HTML
<body>
<div class="linear-gradient-diagonal">斜めグラデーション</div>
</body>
多色グラデーション:
CSS
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
HTML
<body>
<div class="linear-gradient-multi">多色グラデーション</div>
</body>
コードの説明:
to right: グラデーションは左から右へ進むよto bottom: グラデーションは上から下へ進むよ45deg: グラデーションは45度の角度で進むよred,yellow,green,blue: 多色グラデーションを作るための色のストップがいくつかあるよ
5.2 放射状グラデーション
radial-gradientは中心から外側へ色が滑らかに移行するグラデーションを作成するよ。放射状グラデーションは3Dのような面白い視覚効果を作成することができるんだ。
構文:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
値:
shape: グラデーションの形で、circle（円）やellipse（楕円）にできる（デフォルトは楕円）size: グラデーションのサイズで、closest-side、closest-corner、farthest-side、farthest-cornerが使えるよposition: グラデーションの中心の位置で、パーセントやピクセル、キーワード（例：center,top,left）で指定できるんだcolor-stop: グラデーション内の色とその位置を決めるカラーストップ
使用例
円形グラデーション:
CSS
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
HTML
<body>
<div class="radial-gradient-circle">円形グラデーション</div>
</body>
楕円グラデーション:
CSS
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
HTML
<body>
<div class="radial-gradient-ellipse">楕円グラデーション</div>
</body>
中心からのグラデーション:
CSS
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
HTML
<body>
<div class="radial-gradient-at-center">中心からのグラデーション</div>
</body>
角からのグラデーション:
CSS
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
HTML
<body>
<div class="radial-gradient-at-corner">角からのグラデーション</div>
</body>
コードの説明:
circle: 円形グラデーションを作成するよellipse: 楕円グラデーションを作成するよat center: グラデーションは中心から開始するよat top left: グラデーションは左上から開始するよred,blue,green: 多色グラデーションを作るための色のストップがいくつかあるよ
5.3 グラデーションの追加設定
繰り返しグラデーション
1. 繰り返し線形グラデーション (repeating-linear-gradient)
繰り返し線形グラデーションは、線形グラデーションを使った繰り返し模様を作成するよ。
CSS
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. 繰り返し放射状グラデーション (repeating-radial-gradient)
CSS
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. 透明なカラーストップ
カラーストップには透明度を含めることができ、より複雑な視覚効果を作成できるんだ。
CSS
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. 複数のグラデーションを一緒に使う
複数のグラデーションを使って複雑な背景を作成できるよ。
CSS
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION