CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。

基本構文

background-image: linear-gradient(角度, カラー1, カラー2);

角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。

  • 0deg：下から上へ（to topと同じ）
  • 90deg：左から右へ（to rightと同じ）
  • 180deg：上から下へ（to bottomと同じ・初期値）
  • -90deg：右から左へ（to leftと同じ）

サンプルコード

以下は、CSSで角度を使って線形グラデーションの方向を設定する例です。90degと-90degを指定した2つの要素を比較しています。

HTML / CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    height: 200px;
    width: 300px;
    display: inline-block;
    margin-right: 10px;
}
.linearGradient {
    background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
    background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h1>角度による線形グラデーションの方向指定</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

左側のボックスは90degによりピンクから黄色へ左から右へ変化し、右側のボックスは-90degにより右から左へ変化していることがわかります。このように角度を調整すれば、斜め方向（45degや135degなど）も含めて自由にグラデーションの向きをデザインできます。

  1. CSSで放射状グラデーションのサイズを指定する方法

    CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下

  2. CSSで放射状グラデーションの形状を設定する方法

    CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで