SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.05.27
  • CATEGORY
TITLE

【CSS】繰り返しのグラデーションを実装してみよう!

SHU[シュウ]

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

サーバーとドメインの同時取得で.jpが無料

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

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • repeatingの使い方について学びたい方へ
  • 今回は繰り返しのグラデーション指定しストライプを作りましょう!
ストライプグラデーション

上の図のように、repeatingとlinear、radialを組み合わせることでストライプ模様も可能になります。
前回の記事を読んで、linear、radialを指定方法を確認してください。

CSSプロパティ参考になるかも
【CSS】gradientグラデーションの実装してみよう!

gradientを指定することにより、線形・円形のグラデーションが可能になります。


repeatingについて

repeatingについて

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

/*--linear(線形)--*/
background: repeating-linear-gradient();

/*--radial(円形)--*/
background: repeating-radial-gradient();

このように、backgroundを指定した後に、repeating-(ハイフン)linearまたはradialの指定になります。
repeatingは繰り返す意味になります。

repeating-linear-gradient(線形)

repeating-linear-gradient(線形)

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

/*--linear(線形)--*/
background: repeating-linear-gradient();

2色のグラデーション

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

0%〜50%を明るいオレンジ、50%〜100%を暗いオレンジになります。
その先もグラデーションを繰り返して埋めてくれます。

2色の繰り返しグラデーション

SHU BLOG

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

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

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

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

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

SHU BLOG

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

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

前回の記事にキーワードでの指定方法についての解説もあります。

線形のストライプ柄の指定方法

先ほどの方向(45deg)でストライプ柄を作成します。
コピペで作れるようにしておきますので、お好みのカラー、方向に変更してみてください。

ストライプ柄の指定方法

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: repeating-linear-gradient(45deg, #FFFFFF 0px, #FFFFFF 20px, #FFB05E 20px, #FFB05E 30px);
}

repeating-radial-gradient(円形)

repeating-radial-gradient(円形)

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

/*--radial(円形)--*/
background: repeating-radial-gradient();

円形の繰り返しグラデーション指定

closest-sideを指定し、要素の大きさの一番近い辺に合わせています。
50%、50%、の位置から同心円状に広がっていきます。

円形の繰り返しグラデーション指定

SHU BLOG

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

前回の記事にキーワードでの指定方法についての解説もあります。

円形のストライプ柄の指定方法

線形と同様に円形のストライプも可能になります。
linearをradialに変更し、45degをcircleに変更しただけになります。

円形のストライプ柄の指定方法

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>
.gradient {
    /*--グラデーション指定以外 省略--*/
	background: repeating-radial-gradient(circle, #FFFFFF 0px, #FFFFFF 20px, #FFB05E 20px, #FFB05E 30px);
}

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

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

Blend

2種類の色を選択し、線形、円形を選ぶだけです。コードも発行できます。

CSS GRADIENT ANIMATOR

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

uiGradients

グラデーションのイメージを確認でき、パターンが豊富!!

次回の記事

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

まとめ

今回はこれで以上になります。
次回の記事では画像に対してグラデーションを実装してみます。

POINT
  • repeatingとは、グラデーションの繰り返しを指定する際に使用します。
  • backgroundを指定した後に、repeating-(ハイフン)linearまたはradialの指定になります。
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top