CSS

CSSでグラデーションボーダーを作成する方法【実践編】

  /

CSSの世界では、Webページに視覚的な魅力を加えるための様々な手法が存在します。その中でも、グラデーションは非常に人気のあるテクニックです。
今回は、CSSのlinear-gradientとcalc関数を使って、ボーダーにグラデーション効果を適用する方法を紹介します。この記事では、理解しやすいように、基本的な概念から実践までを詳しく解説していきます。

Contents

linear-gradientとは

linear-gradientは、CSSで線形グラデーション（直線状の色の移り変わり）を作成するための関数です。背景色やボーダーなど、さまざまな要素に適用することができます。グラデーションの開始点と終了点の色を指定することで、2色以上の色が滑らかに移り変わる効果を得ることができます。

基本的な使い方

linear-gradient関数の基本的な構文は次のとおりです。

background: linear-gradient(direction, color-stop1, color-stop2, ...);

　

  • direction：グラデーションの方向（例：to right, to bottom, 45degなど）。
  • color-stop：色の指定（複数指定可能）。

例えば、黒から白へのグラデーションは次のように記述します。

background: linear-gradient(to right, black, white);

calcとは

calc関数は、CSS内で計算を行うための関数です。長さや角度、割合など、さまざまな単位を組み合わせて計算することができます。これにより、柔軟なレイアウトやスタイルを実現できます。

基本的な使い方

calc関数の基本的な構文は次のとおりです。

width: calc(100% - 50px);

　
この例では、要素の幅を親要素の幅の100%から50ピクセル引いた値に設定しています。

メリット

  • 視覚的な魅力：グラデーションは、単色よりも視覚的に魅力的で、ユーザーの注意を引きつけます。
  • 柔軟性：linear-gradientとcalcを組み合わせることで、非常に柔軟なデザインが可能です。
  • パフォーマンス：CSSのみで実現できるため、画像を使用する場合に比べてページの読み込みが速くなります。

デメリット

  • ブラウザ互換性：古いブラウザでは、linear-gradientやcalcがサポートされていない場合があります。
  • 複雑さ：高度なグラデーションや計算を行う場合、CSSの記述が複雑になることがあります。

実践編

CSSの記述

次に、実際にCSSを使用して、ボーダーにグラデーションを適用する方法を見ていきましょう。ここでは、黒から白へのグラデーションと、シルバーからゴールドへのグラデーションの例を示します。

黒から白へのグラデーション

.gradient-border {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto;
}
.gradient-border::before {
    content: "";
    position: absolute;
    top: -1px; /* ボーダーの幅 */
    left: -1px; /* ボーダーの幅 */
    width: calc(100% + 2px); /* ボーダーの幅 */
    height: calc(100% + 2px); /* ボーダーの幅 */
    background: linear-gradient(to right, black, white);
    z-index: -1;
    border-radius: 4px; /* 任意 */
}

シルバーからゴールドへのグラデーション

.gradient-border-silver-gold {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto;
}
.gradient-border-silver-gold::before {
    content: "";
    position: absolute;
    top: -1px; /* ボーダーの幅 */
    left: -1px; /* ボーダーの幅 */
    width: calc(100% + 2px); /* ボーダーの幅 */
    height: calc(100% + 2px); /* ボーダーの幅 */
    background: linear-gradient(to right, #C0C0C0, #FFD700);
    z-index: -1;
    border-radius: 4px; /* 任意 */
}

HTMLの記述

次に、上記のCSSを適用するHTMLの記述を示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSSのlinear-gradientとcalcを使ったグラデーション表示デモページ</title>

<meta name="description" content="CSSのlinear-gradientとcalcを使ったグラデーション表示デモページです">

<style>
body {
  font-size: 18px;
  text-align: center;
  background-color: #f0f0f0;
}
h1{
  font-size: 22px;
  line-height: 2em;
  padding: 20px 0;
}
h2{
  font-size: 20px;
  padding: 40px 0 10px 0;
}
.gradient-border {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto;
}
.gradient-border::before {
    content: "";
    position: absolute;
    top: -1px; /* ボーダーの幅 */
    left: -1px; /* ボーダーの幅 */
    width: calc(100% + 2px); /* ボーダーの幅 */
    height: calc(100% + 2px); /* ボーダーの幅 */
    background: linear-gradient(to right, black, white);
    z-index: -1;
    border-radius: 4px; /* 任意 */
}

.gradient-border-silver-gold {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto;
}
.gradient-border-silver-gold::before {
    content: "";
    position: absolute;
    top: -1px; /* ボーダーの幅 */
    left: -1px; /* ボーダーの幅 */
    width: calc(100% + 2px); /* ボーダーの幅 */
    height: calc(100% + 2px); /* ボーダーの幅 */
    background: linear-gradient(to right, #C0C0C0, #FFD700);
    z-index: -1;
    border-radius: 4px; /* 任意 */
}
</style>

</head>
<body>
<h1>CSSのlinear-gradientとcalcを使ったグラデーション表示</h1>

<h2>白から黒にグラデーション表示</h2>
<div class="gradient-border"></div>

<h2>シルバーからゴールドにグラデーション表示</h2>
<div class="gradient-border-silver-gold"></div>

</body>
</html>

　
このページでは、2つの異なるグラデーション効果を持つボーダーを表示しています。各ボーダーは、擬似要素::beforeを使用して実現されています。擬似要素は、要素の前に追加されるもので、ボーダーの外側に配置されます

CSSのlinear-gradientとcalcを使ったグラデーション表示デモページ

ここまで説明したコードを使って作成したデモページのURLは次のとおりです。

CSSのlinear-gradientとcalcを使ったグラデーション表示デモページ

まとめ

この記事では、CSSのlinear-gradientとcalc関数を使用して、ボーダーにグラデーション効果を適用する方法を解説しました。これらのテクニックを使用することで、視覚的に魅力的なデザインを簡単に実現することができます。基本的な概念を理解し、実際に手を動かして試してみることで、より高度なデザインスキルを身につけることができるでしょう。

グラデーション効果は、Webデザインにおいて非常に強力なツールです。今回紹介した方法を活用して、あなたのWebサイトに視覚的なインパクトを加えてみてください。

　
※参考にする場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

グラデーション linear-gradient calc
関連記事