【CSS】グラデーションを作成する方法

ウェブデザインにおいて、グラデーションは視覚的な魅力を増すための強力なツールです。この記事では、CSSを使って簡単にグラデーションを作成する方法を紹介します。線形グラデーションと円形グラデーションの基本的な使い方から、実際にHTMLとCSSを使った例まで、幅広く解説します。

線形グラデーション（Linear Gradient）の作成方法
円形グラデーション（Radial Gradient）の作成方法
実際にグラデーションを使用した例
まとめ

線形グラデーション（Linear Gradient）の作成方法

線形グラデーションは、色が直線に沿って変化するグラデーションです。以下に、基本的な線形グラデーションの使い方を示します。

/* 水平方向の線形グラデーション */
.gradient-horizontal {
    background: linear-gradient(to right, red, blue);
}

/* 垂直方向の線形グラデーション */
.gradient-vertical {
    background: linear-gradient(to bottom, red, blue);
}

/* 斜め方向の線形グラデーション */
.gradient-diagonal {
    background: linear-gradient(45deg, red, blue);
}

/* 色の割合を指定した線形グラデーション */
.gradient-multiple {
    background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

円形グラデーション（Radial Gradient）の作成方法

円形グラデーションは、色が円の中心から放射状に変化するグラデーションです。以下に、基本的な円形グラデーションの使い方を示します。

/* デフォルトの円形グラデーション（中心から外側） */
.gradient-radial {
    background: radial-gradient(circle, red, blue);
}

/* 楕円形の円形グラデーション */
.gradient-ellipse {
    background: radial-gradient(ellipse, red, blue);
}

/* 複数の色を指定した円形グラデーション */
.gradient-radial-multiple {
    background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
}

実際にグラデーションを使用した例

以下は、上記のグラデーションを使った簡単なHTMLとCSSの例です。これを使えば、様々なグラデーション効果を実際に確認することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS グラデーション</title>
    <style>
        .gradient-box {
            width: 200px;
            height: 200px;
            margin: 20px;
            display: inline-block;
        }
        
        .gradient-horizontal {
            background: linear-gradient(to right, red, blue);
        }

        .gradient-vertical {
            background: linear-gradient(to bottom, red, blue);
        }

        .gradient-diagonal {
            background: linear-gradient(45deg, red, blue);
        }

        .gradient-multiple {
            background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
        }

        .gradient-radial {
            background: radial-gradient(circle, red, blue);
        }

        .gradient-ellipse {
            background: radial-gradient(ellipse, red, blue);
        }

        .gradient-radial-multiple {
            background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
        }
    </style>
</head>
<body>
    <div class="gradient-box gradient-horizontal"></div>
    <div class="gradient-box gradient-vertical"></div>
    <div class="gradient-box gradient-diagonal"></div>
    <div class="gradient-box gradient-multiple"></div>
    <div class="gradient-box gradient-radial"></div>
    <div class="gradient-box gradient-ellipse"></div>
    <div class="gradient-box gradient-radial-multiple"></div>
</body>
</html>

まとめ

CSSを使ってグラデーションを作成することで、ウェブサイトのデザインに動きと深みを加えることができます。線形グラデーションと円形グラデーションの基本を理解し、自分のプロジェクトに合ったスタイルを適用してみてください。様々な色の組み合わせや方向を試して、ユニークなデザインを楽しみましょう。