【cssのみ！】ストライプをcssのみで表現する方法を解説（コピペやツール紹介あり）

2023年1月10日

みなさん初めまして。

今まで様々なクライアントのサイトを制作してきましたが自分のサイトを持つのは初めてなので何を書こうか悩みましたが、やはり私にはウェブやデザインのことしか話せないなと思い、とりあえず最初はcssでストライプを実装する方法について書こうかなと思いました。

それではいってみましょう。

cssでストライプを実装する

実際にCSSでストライプを表現するときは、反復線形グラデーションを生成できる関数のrepeating-linear-gradient()を利用してストライプを作成します。

body{ background: repeating-linear-gradient(#000, #000 20px, #fff 20px, #fff 40px); }

上記のbodyを任意のクラスに変更すれば黒と白のストライプができるはずです。これを応用して自力で色を置き換えましょう。

body{ background: repeating-linear-gradient(90deg, #000, #000 20px, #fff 20px, #fff 40px); }

上記の90degの部分で角度をいじってます。斜めにしたい場合は135degなど45度刻みでいじってみるといいと思います。

ここからは無料で使えるストライプ生成のツールを紹介します。

CSS STRIPE GENERATORはCSSでストライプを作るためのジェネレーターです。

ここで色とか角度プレビューしてコピペするのが一番早いとおもいます。