WEBサイトの背景や、ちょっとした囲み罫で使われているストライプってどうやって作ってるんだろう？と思ったことはありませんか。
斜めのストライプとか初心者にとっては難しいように感じますが、作り方を理解してみると意外と簡単なので何かとストライプを使いたくなること間違いありません！
という事で今回は、縦・横・斜めそれぞれのストライプの作り方を紹介していきます。
目次
CSSの「repeating-linear-gradient」が便利
これまでCSSでストライプを作る場合は linear-gradient を使う方法が主流でした。
ただ、linear-gradient は斜めのストライプを作る場合に色々面倒で、思ったような表示にならないことが多々ありましたが、今回紹介する repeating-linear-gradient を使えば縦・横のストライプはもちろん、斜めのストライプも自由自在に作ることができます。
ストライプを作る前に
それでは早速 repeating-linear-gradient でストライプを作っていきますが、その前にベースとなるdiv要素に任意のクラス名をつけて、 background プロパティに repeating-linear-gradient 関数を記述しておきます。
基本のHTML
1 | <div class="stripe"></div> |
基本のCSS
1 2 3 | .stripe{ background:repeating-linear-gradient(); } |
これが基本のカタチになります。
ストライプの色を決める
次にストライプの色を決めます。
今回はわかりやすいようにオレンジ（#fb3）と補色のブルー（#58a）としておきます。
ストライプの色を repeating-linear-gradient 関数に記述しますが、考え方は通常の linear-gradient と同じで、ストライプのカラーストップの位置を色毎に指定していきます。
1 2 3 4 | .stripe{ background:repeating-linear-gradient( #fb3 0, #fb3 20px, #58a 20px, #58a 40px); } |
上記の記述だとグラデーションの初めから20pxまではオレンジ（#fb3）で、20pxから40pxまではブルー（#5ae）になります。
記述した部分をストライプの基本形として repeating-linear-gradient 関数が自動で繰り返してくれるので、結果的にストライプになって見えるというわけですね。
通常のストライプ模様
ということで、repeating-linear-gradient で作ったストライプはこんな感じになります。
See the Pen 通常のストライプ by Beginners-High (@dragonpa) on CodePen.
ちなみに、repeating-linear-gradient に記述した数値を大きくすればストライプが太くなり、小さくすれば細くなります。
色の変わり目を同じ数値（今回の場合は20px）にしておかないと色の境界がボケてしますので、しっかりと色が分かれたストライプを作る場合は注意しましょう。
縦型のストライプ模様
縦型のストライプは、基本のストライプを90度回転するだけなので、 repeating-linear-gradient に 90deg を追加してやります。
1 2 3 4 | .stripe{ background:repeating-linear-gradient( 90deg, #fb3 0, #fb3 20px, #58a 20px, #58a 40px); } |
See the Pen 縦型のストライプ by Beginners-High (@dragonpa) on CodePen.
斜めのストライプ模様
斜めのストライプも縦型ストライプ同様、基本のストライプを回転させるだけなんです。
回転させたい角度を repeating-linear-gradient に追加します。今回は 45deg としておきます。
1 2 3 4 | .stripe{ background:repeating-linear-gradient( 45deg, #fb3 0, #fb3 20px, #58a 20px, #58a 40px); } |
See the Pen 斜めのストライプ by Beginners-High (@dragonpa) on CodePen.
いやぁ〜めちゃくちゃ簡単すぎてクセになりそうです！
多色のストライプも自由自在
さらに色を増やしてカラーストップの位置を調整するだけで、３色や４色のストライプからランダムなストライプまで、CSSだけで自由自在にストライプが作れます。
1 2 3 4 5 6 7 | .stripe{ background:repeating-linear-gradient( 45deg, #fb3 0, #fb3 10px, #58a 10px, #58a 30px, #8d5 30px, #8d5 70px, #d69 70px, #d69 90px, #fff 90px, #fff 95px); } |
See the Pen 多色のストライプ by Beginners-High (@dragonpa) on CodePen.
まとめ
linear-gradientで斜めのストライプを作る時に角度が合わず苦労した人も多いと思いますが、repeating-linear-gradientのおかげで簡単に斜めストライプが作れるようになりました。
現行のブラウザはほぼ repeating-linear-gradient に対応しているようなので、いろんなシチュエーションで安心して使えそうです。
CSS初心者でもそれほど難しくない内容だと思うので、是非一度試してみてください。
「縦・横・斜めも自由自在！CSSで作るストライプは意外とカンタン！」でした。
