【綺麗に見せたい！】CSSでグラデーションを付ける方法【初心者向け】現役エンジニアが解説
CSSでグラデーションをつける方法を紹介しています。サイトの配色をグラデーションにしたいという時に便利です。グラデーションの実装はとても簡単なので、初心者の方はまずコピペして試してみるのも良いでしょう！
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでグラデーションをつける方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
田島メンター！！サイトのTOP画面とかで、画面全体にきれいなグラデーションがかかってたりするのがありますよね。あれってどうやってるんですか〜？
それでは今回はgradientという関数について解説しよう。これを使うことで、画面にグラデーションを表示させることができるよ。
色の指定なども、同時にできるんですか？
グラデーションの各部分に使う色や、向きも設定することができるよ。基本の形を見てみよう。
CSSでグラデーションをつける書き方
グラデーションをつけるには「gradient」という関数を利用します。
以前は、ブラウザによって書き方が少し異なっていましたが、現在のモダンブラウザ（Internet Explorer 11〜、Google 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);
背景に画像などを差し込むと、より洗練された印象を受けるでしょう。
<CSSファイル>
続いて、放射線状のグラデーション表現です。
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だけで多くの表現ができるようになりました。
便利なツール
グラデーションの設定はすべて手作業で行うのは大変です。
それらを直感的に設定してコードをコピーできるツールのサイトがありますので、それらをご紹介します。
Ultimate CSS Gradient Generator
最初からプリセットが用意されているので、それを選ぶことで希望するグラデーションが選択できます。
一度プリセットを選んでから、色の変更など自由に設定できるので便利です。
CSS Gradient Animator
徐々にグラデーションしていくCSSのコードを自動で生成してくれるツールです。
自分で色を2,3色決め、動きの速さやグラデーションの角度などを決めれば自動でグラデーションしてくれます。
その場でデモが確認でき、あとは自分のCSSファイルにコピペするだけで良いので初心者でも手軽に使えるでしょう。
グラデーションの配色を参考にできるサイト
実際にどのようにサイトのデザインに利用したら良いのかを迷う方も多いでしょう。
いくつか参考になるサイトをご紹介します。
Pixel Palace
背景の動画に対してグラデーションを効かせています。
WeWeb
CSSでのグラデーションではなく、最初から背景画像としてグラデーションがかかった画像を使用している例です。
Ingram Cole Accountant
こちらもCSSでのグラデーションではなく、最初から背景画像としてグラデーションがかかった画像を使用している例です。
Gifn
CSSで背景画像に対してグラデーションをかけている例です。
Impossible Bureau
メニューなど、ナビゲーション部分にグラデーションを利用している例です。
まとめ
以上、グラデーションをCSSで設定する基本的な方法から、便利なサイトのツールを利用してオリジナルのグラデーションを作成しコーディングをコピーする方法、また実際のサイトで利用する場合の参考になるサイトをいくつかご紹介しました。
初心者でも簡単に実装できてしまうので、ぜひ試してみてください。
おしゃれな見た目が完成したら友達に自慢してみましょう！
開始位置・終了位置によってグラデーションの向きも変えることができるんだ。
そうそう、こういう感じにしたかったんです。
グラデーションを使うときは、表示されなかった場合のために背景色を仮で指定しておくといいね。
閲覧側の色々な環境に対応するのが大事ですね。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
