【綺麗に見せたい!】CSSでグラデーションを付ける方法【初心者向け】

CSSでグラデーションをつける方法を紹介しています。サイトの配色をグラデーションにしたいという時に便利です。グラデーションの実装はとても簡単なので、初心者の方はまずコピペして試してみるのも良いでしょう!

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

最近では、より綺麗に見せるために色をグラデーションさせたサイトをよく見ます。

パッと見て印象が強く残りますし、見ている人もおしゃれだなと感じるでしょう。綺麗にグラデーションされているだけで洗練されたサイトにも見えますね。

今回は、CSSでグラデーションをつける方法を紹介していきます。

とても簡単なので、初心者の方はまずコピペして試してみるのも良いでしょう!

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

大石ゆかり

田島メンター!!サイトのTOP画面とかで、画面全体にきれいなグラデーションがかかってたりするのがありますよね。あれってどうやってるんですか〜?

田島悠介

それでは今回はgradientという関数について解説しよう。これを使うことで、画面にグラデーションを表示させることができるよ。

大石ゆかり

色の指定なども、同時にできるんですか?

田島悠介

グラデーションの各部分に使う色や、向きも設定することができるよ。基本の形を見てみよう。

 

CSSでグラデーションをつける書き方

グラデーションをつけるには「gradient」という関数を利用します。

以前は、ブラウザによって書き方が少し異なっていましたが、現在のモダンブラウザ(Internet Explorer 11〜、chrome最新版など)では、統一された書き方でグラデーションを表現することができるようになりました。

この記事でも、その最新の書き方でグラデーションの表現方法をご紹介していきます。例えば、線形グラデーションの書き方は以下の通りです。

linear-gradient(方向, 色1, 色2[, 色3, 色4, ...])

 

※参考まで、古いブラウザをサポートする必要がある場合の書き方をご紹介します。それぞれの書き方は以下の通りです。

まずは、FirefoxなどのMozilla系ブラウザの書き方は以下の通りです。

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

 

以下は、Google ChromeやSafariでの書き方になります。

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

 

田島悠介

これがグラデーションを作成するときの書き方になるよ。

大石ゆかり

最近のブラウザでは記述方法が統一されたんですね。

田島悠介

そうだね。では実際に、グラデーションを画面で確認してみよう。

 

実際にグラデーションをつけてみる

 

実際にコードを書いてみましょう。

<HTMLファイル>

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="gradation.css">
  <title>CSSで書くグラデーション</title>
  </head>
  <body>
    <div class="gradation">
      <p class="gradation-text">CSSで書くグラデーション</p>
    </div>
  </body>
</html>

 

<CSSファイル>

.gradation{
  background: linear-gradient(to right, red, white);
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
p {
  font-size: 24px;
  color: #FFF;
}

 

実行すると以下のようになります。

 

linear-gradientは線形のグラデーション表現です。書き方は以下の通りです。

linear-gradient(方向, 色1, 色2[, 色3, 色4, ...])

 

上記の例の場合、以下の行でグラデーションを表現しています。右方向に向け、赤から白のグラデーションを表現しています。

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

 

CSSのグラデーションの行を変更してみましょう。

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

実行すると以下のようになります。この場合、右上方向に向け、青から白のグラデーションになります。

 

色を複数指定することもできます。

background: linear-gradient(to top right, yellow, blue, green);

 

色の次に割合を書くことで、グラデーションの幅を調整できます。

background: linear-gradient(to top right, yellow 40%, blue 60%, green);

 

背景に画像などを差し込むとより洗練された印象を受けるでしょう。

スクリーンショット 2016-06-08 19.43.35

<CSSファイル>

スクリーンショット 2016-06-08 19.44.12

 

続いて、放射線状のグラデーション表現です。

CSSのグラデーションの行を変更してみましょう。

background: radial-gradient(red, white);

実行すると以下のようになります。この場合、中央から外に向け、赤から白のグラデーションになります。

 

最後に組み合わせた例を見ていきましょう。

background:
  linear-gradient(to top, green 20%, rgba(255,0,0,0)),
  radial-gradient(50px at 80% 20%, white, blue);

実行すると以下のようになります。

今までは、ちょっと複雑な表現を行うには、画像ファイルを使う必要が合ったのですが、CSS3になって表現力の幅が広がったことで、CSSだけで多くの表現ができるようになりました。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

便利なツール

CSS Gradient Animator

スクリーンショット 2016-06-08 19.09.05

徐々にグラデーションしていくCSSのコードを自動で生成してくれるツールです。

自分で色を2.3色決め、動きの早さやグラデーションの角度などを決めれば自動でグラデーションしてくれます。その場でデモが確認でき、あとは自分のCSSファイルにコピペするだけで良いので初心者でも手軽に使えるでしょう。

 

以上、CSSでグラデーションをつける方法を紹介しました。

初心者でも簡単に実装できてしまうのでぜひ試してみてください。おしゃれな見た目が完成したら友達に自慢してみましょう!

 

田島悠介

開始位置・終了位置によってグラデーションの向きも変えることができるんだ。

大石ゆかり

そうそう、こういう感じにしたかったんです。

田島悠介

グラデーションを使うときは、表示されなかった場合のために背景色を仮で指定しておくといいね。

大石ゆかり

閲覧側の色々な環境に対応するのが大事ですね。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。