SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.05.25
  • CATEGORY
TITLE

【CSS】gradientグラデーションの実装してみよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】linear-gradientグラデーションの実装してみよう!
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • gradientの使い方について学びたい方へ
  • 今回は線形・円形のグラデーションについての記事になります
gradientのイメージ図

上の図のように、gradientを指定することにより、線形・円形のグラデーションが可能になります。
最後まで読んで理解度をあげましょう!

指定できる値
  • linear-gradient
    linear(線形)-gradient(グラデーション)の意味になり、線形のグラデーションを指定します
  • radial-gradient
    radial(円形)-gradient(グラデーション)の意味になり、円形のグラデーションを指定します

gradientについて

gradientについて

gradientとは、グラデーションを指定する際に使用します。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(開始色,終了色);

/*--radial(円形)--*/
background: radial-gradient(中央の色,外側の色);

このように、色と色を,(カンマ)で区切るように指定します。
実際に、次の章で解説していきます。

linear-gradient(線形)のグラデーションについて

linear-gradient(線形)のグラデーションについて

先ほどの指定方法を踏まえて解説していきます。

/*--linear(線形)--*/
background: linear-gradient(開始色,終了色);

2色のグラデーション

シンプルな書き方は、2色を指定する方法になります。
上から下に、開始色は明るいオレンジ(#F8E5C5)、終了色は暗いオレンジ(#EF7101)を指定しています。

2色のグラデーション

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: linear-gradient(#F8E5C5,#EF7101);
}

3色のグラデーション

中間色を入れ、3色をグラデーションを実装します。
3色を指定する際には、開始色,中間色,終了色を指定しています。4色も同じように指定できます。

3色のグラデーション

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: linear-gradient(#F8E5C5,#EF7101,#970000);
}

グラデーションの領域を指定

開始色は50%、終了色は100%など数値で領域を指定することも可能になります。
開始色=数値 中間色=数値 終了色=数値になります
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(開始色 数値,中間色 数値,終了色 数値);

グラデーションに領域を指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: linear-gradient(#F8E5C5 60%, #EF7101 90%, #970000 100%);
}
グラデーションに領域

上の図のように、開始色は60%、中間色90%、終了色100%に指定しています。
このように%で領域を指定できます。またマイナス(-)の値も指定可能になります。

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

グラデーションの方向はデフォルトで下に向かう指定になっております。
方向を指定することによって上や左上、右上に向かうグラデーションが可能になります。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(方向,開始色,中間色,終了色);

グラデーションに方向を指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: linear-gradient(225deg,#F8E5C5,#EF7101,#970000);
}
degでの指定方法

上の図のように、deg指定が可能になります。
0〜360の指定が可能になります。
またdeg以外にも方向の指定方法ができます。

指定できる方向

  • to top
    上に向かうグラデーション
  • to top right
    右上に向かうグラデーション
  • to right
    右に向かうグラデーション
  • to bottom right
    右下に向かうグラデーション
  • to bottom(初期値)
    下に向かうグラデーション
  • to bottom left
    左下に向かうグラデーション
  • to left
    左に向かうグラデーション
  • to top left
    左上に向かうグラデーション
/*--上に向かうグラデーション--*/
background: linear-gradient(to top,開始色,終了色);

/*--右上に向かうグラデーション--*/
background: linear-gradient(to top right,開始色,終了色);

/*--右に向かうグラデーション--*/
background: linear-gradient(to right,開始色,終了色);

/*--右下に向かうグラデーション--*/
background: linear-gradient(to bottom right,開始色,終了色);

/*--左下に向かうグラデーション--*/
background: linear-gradient(to bottom left,開始色,終了色);

/*--左に向かうグラデーション--*/
background: linear-gradient(to left,開始色,終了色);

/*--左上に向かうグラデーション--*/
background: linear-gradient(to top left,開始色,終了色);

ポイント!
1.linear(線形)-gradient(グラデーション)の意味になり、線形のグラデーションを指定します。
2.開始色と終了色を,(カンマ)で区切るように指定します。
3.グラデーションの領域を指定する際には、色を指定後=領域を指定します。
4.グラデーションの方向を指定する際には、deg、キーワードで指定します。

radial-gradient(円形)のグラデーションについて

radial-gradient

先ほどの指定方法を踏まえて解説していきます。

/*--radial(円形)--*/
background: radial-gradient(中央の色,外側の色);

2色のグラデーション

シンプルな書き方は、2色を指定する方法になります。
中央の色は明るいオレンジ(#F8E5C5)、外側の色は暗いオレンジ(#EF7101)を指定しています。

2色のグラデーション

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: radial-gradient(#F8E5C5,#EF7101);
}

グラデーションの形状を指定

円形のグラデーションには形状を変更できます。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(形状,中央の色,外側の色);

グラデーションの形状を指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: radial-gradient(circle,#F8E5C5 40%, #EF7101 100%);
}
円形グラデーションのパターン

指定できる形状

  • ellipse(初期値)
    楕円のグラデーション
  • circle
    正円のグラデーション
	/*--楕円のグラデーション--*/  
	background: radial-gradient(ellipse,中央の色,外側の色);
	
	/*--正円のグラデーション--*/  
	background: radial-gradient(circle,中央の色,外側の色);

グラデーションのサイズを指定

円形のグラデーションにはサイズを変更できます。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(形状 サイズ,中央の色,外側の色);

グラデーションのサイズを指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: radial-gradient(circle closest-side,#F8E5C5, #EF7101);
}

指定できるサイズ

  • closest-side
    要素の大きさの一番近い辺に合わせます
  • closest-corner
    要素の大きさの一番近い角に合わせます
  • farthest-side
    要素の大きさの一番遠い辺に合わせます
  • farthest-corner
    要素の大きさの一番遠い角に合わせます
	/*--大きさの一番近い辺--*/  
	background: radial-gradient(形状 closest-side,中央の色,外側の色);
	
	/*--大きさの一番近い角--*/  
	background: radial-gradient(形状 closest-corner,中央の色,外側の色);
	
	/*--大きさの一番遠い辺--*/  
	background: radial-gradient(形状 farthest-side,中央の色,外側の色);
	
	/*--大きさの一番遠い角--*/  
	background: radial-gradient(形状 farthest-corner,中央の色,外側の色);

グラデーションの中心の位置を指定

円形のグラデーションには中心の位置を変更できます。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(形状 サイズ 中止の位置,中央の色,外側の色);

グラデーションの中心の位置を指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: radial-gradient(circle farthest-corner at bottom, #F8E5C5, #EF7101);
}

指定できる中心の位置

  • at top
    要素の上辺が中心になります
  • at top right
    要素の右上角が中心になります
  • at right
    要素の右辺が中心になります
  • at bottom right
    要素の右下角が中心になります
  • at bottom
    要素の下辺が中心になります
  • at bottom left
    要素の左下角が中心になります
  • at left
    要素の左辺が中心になります
  • at top left
    要素の左上角が中心になります
  • at center
    要素の中央が中心になります
  • at 数値と単位
    要素の左上角から、中心の座標を数値と単位で指定します
  • at %
    領域の幅と高さの割合を%で指定します
	/*--要素の上辺が中心--*/  
	background: radial-gradient(形状 サイズ at top,中央の色,外側の色);
	
	/*--要素の右上角が中心--*/  
	background: radial-gradient(形状 サイズ at top rightp,中央の色,外側の色);
	
	/*--要素の右辺が中心--*/  
	background: radial-gradient(形状 サイズ at right,中央の色,外側の色);
	
	/*--要素の右下角が中心--*/  
	background: radial-gradient(形状 サイズ at bottom right,中央の色,外側の色);
	
	/*--要素の下辺が中心--*/  
	background: radial-gradient(形状 サイズ at bottom,中央の色,外側の色);
	
	/*--要素の左下角が中心--*/  
	background: radial-gradient(形状 サイズ at bottom left,中央の色,外側の色);
	
	/*--要素の左辺が中心--*/  
	background: radial-gradient(形状 サイズ at left,中央の色,外側の色);
	
	/*--要素の左上角が中心--*/  
	background: radial-gradient(形状 サイズ at top left,中央の色,外側の色);
	
	/*--要素の中央が中心--*/  
	background: radial-gradient(形状 サイズ at center,中央の色,外側の色);	

グラデーションの位置を指定

円形のグラデーションには位置を変更できます。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(形状 サイズ 中止の位置,中央の色 開始位置,外側の色 終了位置);

グラデーションに位置を指定

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: radial-gradient(circle farthest-corner at top, #F8E5C5 40%, #EF7101 100%);
}

指定できるサイズ

  • 数値と単位
    位置を数値と単位で指定します
  • %
    位置を%で指定します
	/*--数値--*/  
	background: linear-gradient(形状 サイズ 中止の位置,中央の色 数値,外側の色 数値);

ポイント!
1.linear(円形)-gradient(グラデーション)の意味になり、線形のグラデーションを指定します。
2.中央の色と外側の色を,(カンマ)で区切るように指定します。

グラデーション作成ツール

今回は参考サイトのご紹介です!

Welcome to Shapy

Welcome to Shapy

簡単にグラデーションを作成してくれます。コピペで簡単に貼り付け可能です。

CSS GRADIENT ANIMATOR

簡単にグラデーションを作成してくれます。コピペで簡単に貼り付け可能です。

uiGradients

グラデーションのイメージを確認でき、パターンが豊富、オリジナルグラデーションも可能

CSS次のステップ

repeatingを指定することにより、ストライプ柄を実装しよう!

背景画像にグラデーションを重ねることができます

まとめ

今回はこれで以上です。

POINT
  • linear(線形)-gradient(グラデーション)の意味になり、線形のグラデーションを指定します
  • radial(円形)-gradient(グラデーション)の意味になり、円形のグラデーションを指定します
  • 開始色と終了色を,(カンマ)で区切るように指定します。
  • 中央の色と外側の色を,(カンマ)で区切るように指定します。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top