サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

背景を線形グラデーションにする（CSS:linear-gradient）

背景を線形グラデーションにする（CSS:linear-gradient）

この記事にはプロモーションが含まれています。

背景に画像を指定すると、画像ファイルを読み込む分ページ表示速度に影響を及ぼしますし、かといって背景色を指定するだけでは何だか物足りない…。
このように、画像を使わずに、単色以外でアクセントを加えたいという場面は割と多いです。
今回はそんな時に役に立つ、背景にグラデーションを指定できるbackground-image: linear-gradient()を紹介していきます。

– 目次 –
動画内容：グラデーションを指定する方法

Web制作では、「HOME」とかのメニューや、「お問い合わせはこちら」のボタンなどを、画像ではなくCSSを駆使して作る機会も多いです。
しかし、枠線をつけたり背景色を指定したりするだけでは、「何かが足りない感」が出てしまうこともあります。

まずは具体例をご覧ください。

お問い合わせはこちら

お問い合わせはこちら

上のサンプルが背景色（単色）で、下のサンプルがグラデーション背景です。

border-radius（角を丸くする）や、box-shadow（影をつける）を指定しているので、上のサンプルでもボタンには見えますし、何か致命的な問題があるというわけではないのですが、やや立体感に欠けていてのっぺりとした感じがあります。

一方、グラデーション背景のサンプルは光が当たっているように見えることで立体感が出ており、よりボタンっぽさが出ていると言えます。

ボタンは全てグラデーションにした方が良いというわけでは決してないのですが、表現手法は多いに越したことはありません。
というわけで、今回はbackground-image: linear-gradient()で、要素の背景をグラデーションにする方法を紹介します。

要素の背景をグラデーションにする

要素の背景をグラデーションにするには、該当の要素にbackground-image: linear-gradient(＊)というCSSを設定します。（＊にはグラデーションの色などの指定を記述）

単色を指定すれば良いだけのbackground-colorプロパティと違い、グラデーションには様々な設定を指定することができます。
その分様々な表現ができるのですが、逆に言えばかなり複雑な指定も可能であり、Web制作初心者がいきなりマスターしようとするにはややハードルが高いとも言えます。

なので、グラデーションの方向や細かい色の配分などはさておき、まずはグラデーションを設定する方法だけ覚えていきましょう。

まず、background-image: linear-gradient(＊)の「＊」の部分に、グラデーションにしたい色を２色以上指定します。

具体的には以下のような構文になります。

＊linear-gradient()の構文例＊
{ background-image: linear-gradient(red,blue); }

注意点としては、色と色の指定の間は , （ カンマ ） で区切るという点です。

それでは注意点に注意しながら、表示結果とサンプルコードを見てみましょう。

背景をグラデーションにする

    <p>背景をグラデーションにする</p>

      p {
        width: fit-content;
        margin: 2rem auto;
        padding: 10px;
        background-image: linear-gradient(yellow,orange);
        color: white;
      }

▲要素の上から下に向かって、red（赤）→blue（青色）にグラデーションにすることができました。

サンプルではグラデーションが分かりやすいように、赤と青という色の組み合わせにしていますが、グラデーションにする場合は黄色とオレンジなど類似色でまとめるのが基本です。（下のサンプルを参照）

背景をグラデーションにする

色味が異なる組み合わせのグラデーションは配色が難しく、見づらくなってしまう危険性が高いので、デザインや色に関してある程度勉強してからの方が良いかもしれません。

サンプルでは上から下へのグラデーションになっていますが、次章ではグラデーションの方向を調整していきます。

    POINT!
  1. ・background-image: linear-gradient()で、背景をグラデーションにできる！
  2. ・（ ）の中には、グラデーションにしたい色を２色以上指定する！
  3. ・グラデーションは、基本的に同系統の色でまとめた方が良い！

グラデーションの方向を指定する

グラデーションの方向を何も指定しない場合、上から下へのグラデーションになってしまいますが、グラデーションの方向も指定可能です。

指定の方法は、色の指定の前にキーワードで指定もしくは、数値で角度を指定します。

まずはキーワードで指定する方法から確認していきましょう。どのようなキーワードがあるのか、下の表をご覧ください。

キーワード説明
to left右から左に向かうグラデーション
to right左から右に向かうグラデーション
to top下から上へ向かうグラデーション
to bottom上から下へ向かうグラデーション（規定値）
to left top右下から左上に向かうグラデーション
to right top左下から右上に向かうグラデーション
to left bottom右上から左下に向かうグラデーション
to right bottom左上から右下に向かうグラデーション

▼下は、linear-gradient( to left top, red, blue);とした時のサンプルです。
左上に向かって、赤色から青色のグラデーションになっています。

背景をグラデーションにする（左上に向かうグラデーション）

グラデーションの方向（キーワード指定）を自由に変えられるようにしたサンプルも用意したので、キーワードによってグラデーションの方向が変わるのを実際に確認してみてください。

グラデーションの方向をキーワードで指定

垂直・真横とか、定型（傾き45度）の斜めであれば▲上で紹介したキーワード指定が早くて楽なのですが、グラデーションの向きを細かく指定するには角度を数値で指定する必要があります。

例として、傾き60度で左下→右上のグラデーションにしたければ

{ background-image: linear-gradient( 60deg, red, blue); }

というように指定します。

また、左上→右下へのグラデーションは120deg、右下→左上は-60deg…というように角度を変えることで向きを変えることも可能です。

用語解説：deg（Degree）

ちなみに、degの他には回転の度合いを表す「turn」を使った指定方法もあるのですが、角度を直接表す「deg」の方がわかりやすいかと思います。

それでは、数値＋deg指定で値を自由に設定できるサンプルを用意したので、色々な数値を入れて遊んでみてください！

グラデーションの方向（角度）を数値で指定

deg
    POINT!
  1. ・グラデーションの方向を指定するには、色の指定の前にキーワードか数値の指定を追加する！
  2. ・キーワードは垂直や水平、斜め45°など定型的な方向を指定できる！
  3. ・数値＋degで指定すると、グラデーションの細かい傾きも調整可能！

グラデーションの開始位置

これまでのグラデーションは、グラデーションの開始に指定した色から終了に指定した色まで、同じ割合で徐々に色が変わっていくようになっていました。
しかし、色が変わり始めるタイミングを調整したいということもありますよね。

この章では、グラデーションの色が変わり始めるタイミングを指定する方法を解説していきます。

グラデーションのタイミングを調整するには、グラデーションカラーの指定の後にグラデーションの開始点（２色目以降は開始点＆終了点）を数値＋％で指定します。

たとえば、赤→青のグラデーションで、グラデーションラインの70％の位置から色が変わり始めるようにしたい場合は、

{ background-image: linear-gradient(to right, red 70%, blue); }

というふうに指定します。こうすることで、70％の位置まではグラデーションせずに赤色が保たれます。そしてグラデーションの開始点となる70％を超えたところで、青色に向かったグラデーションが始まるということになります。

グラデーションの開始点を70%に指定

ちなみに、何も設定しない場合は、▼のようになります。

グラデーションの開始点を指定しない

また、最後に指定した色に関しては、グラデーションの終了点になります。

たとえば、linear-gradient(to right, red, blue 30%);とすれば、グラデーションラインの30％の位置でグラデーションが完了し、それ以降は青色が維持されるということになります。

グラデーションの終了点を30%に指定

このグラデーションの開始点・終了点の指定を利用することで、グラデーションにせずに、縞模様にすることも可能です。

次のサンプルは、linear-gradient(to right, red 30%, blue 30%);と設定することで、30％の位置でパッと色が切り替わるようにしています。

開始点と終了点を30%に指定

また、グラデーションを３色以上に設定する場合、間に挟まれる色は開始点と終了点の２つが存在することになります。
どちらとも存在する場合は、終了・開始の両方の点を指定可能です。▼

（赤→青）のグラデーション終了点を20%、（青→深緑）のグラデーション開始点を80%に指定

    <p>（赤→青）のグラデーション終了点を20%、（青→深緑）のグラデーション開始点を80%に指定</p>

    p {
      width: fit-content;
      margin: 2rem auto;
      padding: 10px;
      background-image: linear-gradient(to right, red 20%, blue 20% 80%,darkgreen 80%);
      color: white;
    }
    POINT!
  1. ・グラデーションの位置を調整するには、グラデーションカラーの開始／終了位置を指定する！
  2. ・グラデーションカラーの開始／終了位置は、数値＋％で指定する！
  3. ・開始位置と終了位置を重ねることで、グラデーションさせずに背景色を切り替えることも可能！

背景グラデーション＋背景画像

背景グラデーションは背景画像と組み合わせることもできます。

設定の仕方は簡単で、linear-gradient( )の後を , （ カンマ ） で区切って、続けてurl( )で画像のファイルパスを指定するだけです。

ただし、グラデーションカラーをキーワード値ではなく、rgbaなど色の透明度が指定できる方法で透明度をつけて指定しなければ、グラデーションに隠れて画像が見えなくなってしまうので注意が必要です。

ではさっそく、表示結果とサンプルコードを確認していきましょう。

背景画像＋グラデーション

    <div>
      <p>背景画像＋グラデーション</p>
    </div>

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(255, 255, 255, 0.74)),
                        url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
      width: 100%;
      max-width: 600px;
      height: 300px;
      background-size: cover;
      margin: 2rem auto;
      color: white;
    }

ちなみに、元の画像はこんな感じです。

青空の写真

▼のグラデーションを設定した上で、▲の画像を背景画像として設定しています。

これを、背景画像の指定→グラデーションの指定としてしまうと、背景画像に隠れてグラデーションが見えないということになるので、指定の順序も大切です。（＊背景画像の指定の記事はこちら）

グラデーションと背景画像を組み合わせることで、画像編集ソフトに頼ることなく、画像を装飾することができます。

また、画像編集ソフトで画像そのものにグラデーションをかけてしまうと、後でグラデーションの色を変更したいとなった時に画像を作り直す必要が出てきますが、CSSで調整していればプロパティの値（色の指定）を変更するだけで良いので楽です。

    POINT!
  1. ・背景グラデーションは背景画像と組み合わせることができる！
  2. ・方法は、linear-gradient()の後を,（カンマ）で区切り、続けてurl()で背景画像のファイルパスを指定するだけ！
  3. ・グラデーションの色は透明度を指定しなければ、背景画像が見えなくなってしまう！
  4. ・グラデーションの指定→背景画像の指定という順番で指定すること！

ワンポイントチェック

このブログではこのように文字に被る下線を使用していますが、これもlinear-gradientを使っています。

「え？グラデーションにはなってないけど？」

と思われるかもしれませんが、透明色（transparent）とラインの色のグラデーションにしており、またグラデーションの開始・終了位置を調整することで、パッと色が切り替わるようにしているため、グラデーションには見えないというだけです。

参考までに、改めてサンプルとコードを確認していきましょう。

文字に被る下線（アンダーライン）の作り方

  <span style="background-image: linear-gradient(transparent 50%, yellow 50%)">
	<strong>文字に被る下線（アンダーライン）の作り方</strong>
  </span>

また余談ですが、▼のようにアンダーラインが引かれるアニメーションを設定することもできます。

アンダーラインのアニメーションの作り方

アンダーラインアニメーション作成のポイントは、

１アニメーションは、background-size: 0px 100%; → 100% 100%; に設定

２background-repeat: no-repeat; に設定

です。JavaScriptと組み合わせて、ページスクロールに合わせてラインが引かれるようにすると、ここぞというタイミングで目立たせられるので効果的です。

さらに余談ですが、文字に被るアンダーラインはbox-shadowプロパティで影をつける位置を内側（inset）にすることでも実装可能です。

box-shadowプロパティでアンダーライン

   <span style="box-shadow: 0 -8px inset yellow;">
	<strong>box-shadowプロパティでアンダーライン</strong>
   </span>

話が横道に逸れましたが、同じ見た目にするのにも色々な方法があるというのがCSSの面白さだと思うので、ついでに紹介しておきました。

「これが正解」というのが無いことの方が多いので、皆さんも自分なりの方法を色々試してみると面白いと思いますよ！

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html {
      font-family: sans-serif;
    }
    .test {
      width: 70vw;
      height: 400px;
      margin: 200px auto;
      background-image: linear-gradient(to right, yellow, white, orange);
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
    }

    .grad_img {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(255, 255, 255, 0.74)),
                        url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
      width: 100%;
      max-width: 600px;
      height: 400px;
      background-size: cover;
      margin: 2rem auto;
      color: white;
    }

    .grad_start {
      width: 70vw;
      height: 400px;
      margin: 200px auto;
      background-image: linear-gradient(to right, yellow 30%, white 30% 60%, orange 60%);
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
      border: solid black;
    }

    .grad_angle {
      width: 70vw;
      height: 400px;
      margin: 200px auto;
      background-image: linear-gradient(160deg, yellow 30%, white 30% 60%, orange 60%);
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
      border: solid black;
    }


    </style>
  </head>
  <body>

    <div class="test">
      背景にグラデーションを指定
    </div>

    <div class="grad_img">
      <p>背景グラデーション＋背景画像</p>
    </div>

    <div class="grad_start">
      グラデーションの開始・終了位置を調整
    </div>

    <div class="grad_angle">
      グラデーションの角度を調整
    </div>

  </body>
</html>
記事のトップへ戻る
« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格：応用情報技術者/基本情報技術者/ウェブデザイン技能検定３級

Twitterアイコン Instagramアイコン