自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【CSS】繰り返しのグラデーションを実装してみよう!についての解説になります!こんな方に読んでほしいCSSを学び始めた方へrepeatingの使い方について学びたい方へ今回は繰り返しのグラデーション指定しストライプを作りましょう!上の図のように、repeatingとlinear、radialを組み合わせることでストライプ模様も可能になります。前回の記事を読んで、linear、radialを指定方法を確認してください。CSSプロパティ参考になるかも【CSS】gradientグラデーションの実装してみよう!gradientを指定することにより、線形・円形のグラデーションが可能になります。ANIMATORuiGradientsまとめrepeatingについてrepeatingとは、グラデーションの繰り返しを指定する際に使用します。書き方は以下のようになります。repeating-radial-gradient();このように、backgroundを指定した後に、repeating-(ハイフン)linearまたはradialの指定になります。repeatingは繰り返す意味になります。repeating-linear-gradient(線形)先ほどの指定方法を踏まえて解説していきます。repeating-linear-gradient();2色のグラデーションシンプルな書き方は、2色の繰り返しを指定する方法になります。上から下に、開始色は明るいオレンジ(#F8E5C5)、終了色は暗いオレンジ(#EF7101)を指定しています。0%〜50%を明るいオレンジ、50%〜100%を暗いオレンジになります。その先もグラデーションを繰り返して埋めてくれます。50%);}グラデーションの方向を指定グラデーションの方向はデフォルトで下に向かう指定になっております。方向を指定することによって上や左上、右上に向かうグラデーションが可能になります。書き方は以下のようになります。30%);}上の図のように、deg指定が可能になります。0〜360の指定が可能になります。deg以外にも方向の指定方法ができます。前回の記事にキーワードでの指定方法についての解説もあります。先ほどの方向(45deg)でストライプ柄を作成します。コピペで作れるようにしておきますので、お好みのカラー、方向に変更してみてください。30px);}repeating-radial-gradient(円形)先ほどの指定方法を踏まえて解説していきます。repeating-radial-gradient();円形の繰り返しグラデーション指定closest-sideを指定し、要素の大きさの一番近い辺に合わせています。50%、50%、の位置から同心円状に広がっていきます。100%);}前回の記事にキーワードでの指定方法についての解説もあります。線形と同様に円形のストライプも可能になります。linearをradialに変更し、45degをcircleに変更しただけになります。30px);}グラデーション作成ツール今回は参考サイトのご紹介です!Blend2種類の色を選択し、線形、円形を選ぶだけです。コードも発行できます。ANIMATOR簡単にグラデーションを作成してくれます。コピペで簡単に貼り付け可能です。【CSS】グラデーションを背景画像に重ねてみよう!背景画像にグラデーションを重ねることができますまとめ今回はこれで以上になります。次回の記事では画像に対してグラデーションを実装してみます。POINTrepeatingとは、グラデーションの繰り返しを指定する際に使用します。backgroundを指定した後に、repeating-(ハイフン)linearまたはradialの指定になります。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。