【綺麗に見せたい！】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ファイルにコピペするだけで良いので初心者でも手軽に使えるでしょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
グラデーションの配色を参考にできるサイト
実際にどのようにサイトのデザインに利用したら良いのかを迷う方も多いでしょう。
いくつか参考になるサイトをご紹介します。
Pixel Palace
背景の動画に対してグラデーションを効かせています。
WeWeb
CSSでのグラデーションではなく、最初から背景画像としてグラデーションがかかった画像を使用している例です。
Ingram Cole Accountant
こちらもCSSでのグラデーションではなく、最初から背景画像としてグラデーションがかかった画像を使用している例です。
Gifn
CSSで背景画像に対してグラデーションをかけている例です。
Impossible Bureau
メニューなど、ナビゲーション部分にグラデーションを利用している例です。
まとめ
以上、グラデーションをCSSで設定する基本的な方法から、便利なサイトのツールを利用してオリジナルのグラデーションを作成しコーディングをコピーする方法、また実際のサイトで利用する場合の参考になるサイトをいくつかご紹介しました。
初心者でも簡単に実装できてしまうので、ぜひ試してみてください。
おしゃれな見た目が完成したら友達に自慢してみましょう！
開始位置・終了位置によってグラデーションの向きも変えることができるんだ。
そうそう、こういう感じにしたかったんです。
グラデーションを使うときは、表示されなかった場合のために背景色を仮で指定しておくといいね。
閲覧側の色々な環境に対応するのが大事ですね。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
