【CSS】グラデーションの背景、文字、ボタン、animation、ジェネレイターなども解説｜｜HTML＆CSS入門講座（21）

HTML＆CSS
2021.07.22
この記事は約9分で読めます。

はじめに

　HTML＆CSS入門講座の第二十一弾として、【CSS】グラデーションの背景、文字、ボタン、box-shadow、animatio、ジェネレイターなども解説ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

  • CSSのグラデーションとは？
  • CSSグラデーションの書き方はどうすればよいの？
    • 上下、左右の線形グラデーション
    • 斜めのグラデーション
    • 角度を付けたグラデーション
    • グラデーションの位置を変える
    • 多色のグラデーション
    • 放射グラデ―ション（円形グラデーション）
  • 文字をグラデーションしてみましょ！
  • ボタンのグラデーションを作成してみよう！
  • 画像にグラデーションを重ねるにはどうすればよいの？
  • グラデーションのアニメーションはどうするの＞
  • グラデーションのanimation、ジェネレイターのサイトはどこのあるの？
　HTML＆CSS入門講座（20）では、【CSS】疑似要素の使い方、beforeとafterの使い方について解説してきました。
 
　ここでは【CSS】グラデーションについて深堀していきます。

CSSのグラデーションとは？

　よくネットサーフィンをしていると、トップページに奇麗な色の変化を（ある色からある色へ自然に連続的に変化する）使ったサイトを見かけます。

　このような、ある色からある色へ徐々に連続的に変化させることをcssでもできるのです。

CSSグラデーションの書き方

　線形グラデーションは、指定した要素の背景にcssの「background」または「background-image」プロパティにlinear-gradientを記述します。

上下、左右の線形グラデーション

　上下、左右のグラデーションの書き方は、次の通りです。

○○ {background: linear-gradient(方向, 開始色, 終了色);｝

ここに、
○○：HTMLのタグ、id、class名など
方向：デフォルト（指定なし、上から下に）、 to right（左から右へ）、to bottom 、to left、角度も指定可能
開始色、終了色：色名（英語）、カーラーコード

　 4つのボックス（幅：画面の大きさにより変わる100％、縦：150px）を作り、それをdisplayプロパティのflexで横並びとして、グラデーションとして赤からオレンジへ連続的に変化させるグラデーションを作成してみました。

　ここで、HTML、CSSの埋め込みには、 JSFiddleを利用させていただいています。

　HTML、CSS、Resultのタブをクリックすることにより、それぞれのコードや結果の表示を見ることができます。

　結果の表示では、全部表示されない場合は、横にスライドバーが表れますので、そのスライドバーを操作することにより、結果の全てを見ることができます。

斜めのグラデーション

　斜めのグラデーションの書き方は次の通りです。

○○ {background: linear-gradient(方向, 開始色, 終了色);｝

ここに、
○○：HTMLのタグ、id、class名など
方向：to top right 、to right bottmなど（どこの隅への指定）
開始色、終了色：色名（英語）、カーラーコード

　 4つのボックス（幅：画面の大きさにより変わる100％、縦：150px）を作り、それをdisplayプロパティのflexで横並びとして、グラデーションとして赤からオレンジへ連続的に変化させるグラデーションを作成してみました。

角度を付けたグラデーション

　角度を付けたグラデーションの書き方は次の通りです。

○○ {background: linear-gradient(角度, 開始色, 終了色);｝

ここに、
○○：HTMLのタグ、id、class名など
角度：60deg、120degなど
開始色、終了色：色名（英語）、カーラーコード

　角度が0degの場合は、下から上へのグラデーションになり、90degを指定すれば、左から右へのグラデ―ションとなります。

　ここでも、5つのボックス（幅：画面の大きさにより変わる100％、縦：150px）を作り、それぞれに角度を60deg、120deg、180deg、240deg、320deg設定し、それをdisplayプロパティのflexで横並びとして、赤からオレンジへ連続的に変化させるグラデーションを作成してみました。

グラデーションの位置を変える

　今までは、最初の色を指定してから最後の色まで連続的に色を変化させていましたが、最初の位置からある％までは最初に指定した色で、ある％位置から最後まで連続的にグラデーションをするということができます。

　グラデーションの位置指定したグラデーションの書き方は次の通りです。

○○ {background: linear-gradient(方向, 開始色 指定位置の％, 終了色);｝

ここに、
○○：HTMLのタグ、id、class名など
方向：デフォルト（指定なし、上から下に）、 to right（左から右へ）、to bottom 、to left、角度も指定可能
指定位置の％：0～100％
開始色、終了色：色名（英語）、カーラーコード

　 4つのボックス（幅：画面の大きさにより変わる100％、縦：150px）を作り、それぞれのボックスで位置指定を20％、40％、60％、80％として、それをdisplayプロパティのflexで横並びとして、グラデーションとして赤からオレンジへ連続的に変化させるグラデーションを作成してみました。

多色のグラデーション

　これまでは、２色間のグラデーションでしたが色の数を３色以上にすることが可能です。

　多色グラデーションの書き方は次の通りです。

○○ {background: linear-gradient(方向, 開始色 二番目の色,三番目の色、・・・ 終了色);｝

ここに、
○○：HTMLのタグ、id、class名など
方向：デフォルト（指定なし、上から下に）、 to right（左から右へ）、to bottom 、to left、角度も指定可能
指定位置の％：0～100％
開始色、終了色：色名（英語）、カーラーコード
　 ２つのボックス（幅：画面の大きさにより変わる100％、縦：75px）を作り、それぞれのボックスで３色（赤⇒緑⇒青、５色（赤⇒オレンジ、青、スカイブルー、白）を指定して、それをdisplayプロパティのblockで縦並びとしたグラデーションを作成してみました。
 

放射グラデ―ション（円形グラデーション）

　周りに放射する形でグラデーションを指定することができます。

　線形グラデーションと同様に、％指定、多色なども行えます。

　放射グラデーションの書き方は次の通り。

○○ {background: radial-gradient(開始色(中心) 位置指定％, ・・・終了色(外側));｝

ここに、
○○：HTMLのタグ、id、class名など
指定位置の％：0～100％（位置指定がない場合は、50％）
開始色、終了色：色名（英語）、カーラーコード
　 4つの円形のボックス（幅：画面の大きさにより変わる100％、縦：150px）を作り、それぞれの円形ボックスで普通２色（白⇒赤、位置指定30％（白⇒赤）、三食（赤⇒緑⇒青）、五色（赤⇒オレンジ⇒青⇒スカイブルー、白）を指定して、それをdisplayプロパティのflexで横並びとしたグラデーションを作成してみました。
 

文字をグラデーションしてみましょう！

　文字をグラデーションするためには、cssで３つの指定をしてやる必要があります。

  1. 背景色にグラデーション（linear-gradient）を使うこと。
    ○○ {background: linear-gradient(方向, 開始色, 終了色);｝
  2. 書いた文字を切り抜きその文字に背景色をいれるようにすること。
    -webkit-background-clip: text;
  3. 文字を透明化して（最初に設定されている文字色の黒が表示されないようにすること。
    color: transparent;

　それでは、早速、htmlの見だしh1タグに文字（定年後のスローラフブログ）を3色(skyblue、赤色、青色）のグラデーションを設定してしてみました。

ボタンのグラデーションを作成してみよう！

　最もボタンで利用するhtmlのリンクタグである<a>を使って、ボタンにグラデーションを付けて見ます。

　＜a＞タグの使い方は、次の通り

<a href="リンク先のURL" target="_blank”>リンク文字</a>

ここで、target="_blank”はリンク先を別タブで開く指定です。
　一つ目は、下から上へのグラデーション（白⇒赤）、二つ目が放射状のグラデーション（白⇒赤）、三つ目が上から下へのグラデーション（赤⇒白⇒青）、四つ目が（左から右へのグラデーション（青⇒スカイブルー⇒白⇒スカイブルー⇒青）を設定しています。

画像にグラデーションを重ねる

　花の画像（276×200px）の画像に放射状のグラデーション（rgba(241, 8, 39, 0.5)⇒rgba(136, 255, 0,0.8)をかけてみました。

 右がグラデーションをかけた方で、左が元画像です。

グラデーションのアニメーション

　htmlのbody要素全体の背景にグラデーションをかけ、そこに、前に解説した文字のグラデーションとボタンのグラデーションを置いたものを次の載せますので参考にしてください。

　背景が時間とともに少しずつ色の変化が起きるのが分かると思いますのでじっくりと見てみて下さいね。

グラデーションのanimation、ジェネレイターのサイト

　今まで、グラデーションの基本を解説してきましたが、応用やアニメーションなどはanimation、ジェネレイターのサイトがありますので、そちらを参考にすると良いでしょう。

サイト名 サイトの画像 サイトの簡単な内容
CSS Gradient Animator 2色だけでなく色を追加してグラデーションのアニメーションが作成可能なサイト
Ultimate CSS Gradient Generator PhotoShopのグラデーションを作成する時のような感じで、直感的に操作でき、色相や彩度、透過度、グラデーションがかかる方向を指定でき、グラデーションを作成できるサイト
CSS Gradient Generator 直観的に色を指定してグラデーションを作成できるサイト
GradPad カラーの追加・削除、向きなどをドラッグで操作しグラデーションを作成できるサイト

おわりに

　如何だったでしょうか？

　CSSのグラデーションとは？、CSSグラデーションの書き方はどうすればよいの？、上下、左右の線形グラデーション、斜めのグラデーション、角度を付けたグラデーション、グラデーションの位置を変える、多色のグラデーション、放射グラデ―ション（円形グラデーション）、文字をグラデーションしてみましょ！、ボタンのグラデーションを作成してみよう！、画像にグラデーションを重ねるにはどうすればよいの？、グラデーションのアニメーションはどうするの？グラデーションのanimation、ジェネレイターのサイトはどこのあるの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました