広告 Webデザイン Web制作 コーディング

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

みなさん初めまして。デザマンです。

今まで様々なクライアントのサイトを制作してきましたが自分のサイトを持つのは初めてなので何を書こうか悩みましたが、やはり私にはウェブやデザインのことしか話せないなと思い、とりあえず最初は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 STRIPE GENERATORはCSSでストライプを作るためのジェネレーターです。

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

CSS STRIPE GENERATOR

https://css-stripe-generator.firebaseapp.com/

-Webデザイン, Web制作, コーディング