CSSだけで背景パターン・模様を生成する方法!グラデーションのrepeating(リピーティング。繰り返し)プロパティを使って、様々なパターンを作ってみましょう!

  • マンツーマン個別講義開催中!

    勉強に行き詰まっていませんか?
    エラーの解消から、実装方法まで丁寧に教えます!
    講師が答えられるなら、基本的にどんな内容でもOK!

    詳細はこちら!
  • スクール形式講義

    プロを目指す方・講義を何回も受けられる方はこちら
    個別のカリキュラムを作成し、長期的にサポート!

    詳細はこちら!
今回は、グラデーションを指定する為のCSSのみで、ストライプなどの背景パターンを作る方法を紹介しています。
linear-gradient・radial-gradient・conic-gradient それぞれを他の動画で使い方などを紹介していますが、今回は
・repeating-linear-gradient(繰り返し線形グラデーション)
・repeating-radial-gradient(繰り返し円形グラデーション)
・repeating-conic-gradient(繰り返し扇形グラデーション)
を使って、背景パターン・模様を自在に描く方法を解説しています!

動画内で紹介していたツールのURLはこちら
https://front-end-tools.com/generateGradient/


線形グラデーション基礎の動画はこちら
https://factory-programming-mv.com/video/CEljNXV_ke8/

より複雑な線形グラデーションの指定をするための動画はこちら
https://factory-programming-mv.com/video/6AqNfA8Q0WY/

円形(radial-gradident)グラデーションの動画はこちら
https://factory-programming-mv.com/video/DuPVQralVL0/

扇形(conic-gradient)グラデーションの動画はこちら
https://factory-programming-mv.com/video/DuPVQralVL0/

関連する動画リスト

もっとみる