CSSのlinear-gradient()関数で角度を指定して線形グラデーションを作る方法
CSSでグラデーションを作成する際、linear-gradient() 関数を使うと、グラデーションの方向（角度）を自由に指定できます。第一引数に角度を渡すことで、色が流れる方向を細かくコントロール可能です。
角度指定の基本ルール
角度は「deg」単位で指定し、基準は以下のようになっています。
- 0deg：下から上へ向かうグラデーション
- 90deg：左から右へ向かうグラデーション
- -90deg：右から左へ向かうグラデーション
- 180deg：上から下へ向かうグラデーション（初期値）
角度は時計回りに増えていくため、マイナスの値を指定すると反時計回りの方向になります。
実装コード例
以下のコードでは、0度・90度・-90度の3パターンのグラデーションを実装しています。オレンジからブルーへの色の変化が、それぞれ異なる方向に流れるのが確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
height: 100px;
background: linear-gradient(0deg, orange, blue);
}
#demo2 {
height: 100px;
background: linear-gradient(90deg, orange, blue);
}
#demo3 {
height: 100px;
background: linear-gradient(-90deg, orange, blue);
}
</style>
</head>
<body>
<h2>Linear Gradients</h2>
<div id="demo1">0 degree</div><br>
<div id="demo2">90 degrees</div><br>
<div id="demo3">-90 degrees</div>
</body>
</html>
コードのポイント
#demo1 は 0deg を指定しているため、オレンジが下、ブルーが上になる縦方向のグラデーションになります。#demo2 の 90deg は左から右へ、#demo3 の -90deg は右から左へと色が変化します。
まとめ
linear-gradient() の角度指定をマスターすれば、ボタンやバナー、背景装飾など、さまざまなUI要素に洗練されたグラデーション効果を簡単に追加できます。任意の角度（例：45deg や 135deg）も指定できるので、デザインに合わせて柔軟に調整してみてください。
-
CSSでリストの箇条書きマーカーをスタイリング＆アニメーション化する方法
CSSの list-style プロパティを使用すると、順序なしリスト（<ul>）や順序付きリスト（<ol>）の箇条書きマーカー（ブレット）を自由にカスタマイズできます。デフォルトのマーカーを非表示にしたうえで、box-shadow や :hover 疑似クラス、CSSカウンターなどを組み合わせることで、マウスオーバー時に動きのある魅力的なリストを作成できます。list-styleプロパティの基本構文CSSの list-style プロパティは、次のように記述します。li { list-style: /*値*/; }none を指定するとデフォルトのマーカーが消
-
【初心者向け】SeleniumでCSSセレクターをロケーターとして使う方法を徹底解説
Selenium WebDriverでは、CSSセレクターをロケーターとして利用することで、ページ上の要素を柔軟かつ正確に特定できます。CSS式の基本的な書式は「tagname[attribute=value]」ですが、id属性やclass属性を活用すると、より簡潔なセレクターを作成可能です。 CSSセレクターの基本構文 id属性を使う場合 id属性を利用する場合のCSS式の書式は「tagname#id」です。たとえば「input#txt-loc」というCSS式では、「input」がタグ名、「txt-loc」がid属性の値を表します。 class属性を使う場合 class属性を利用する場合の書