CSSだけでストライプの背景を作ってみる

スポンサーリンク
HTML・CSS

どうも、最近CSS総復習中のみなみさんです。

初めてホームページを制作してから、早いもので20年以上とかいう大変な年数になっていますが、やはり独学で個人活動だと、どうにも知識の抜け落ちが激しいものですね。
定期的に頑張って補完しないと、何もかもから取り残されていきそうで恐ろしい……。

さて、今回は復習も兼ねてCSSだけで色々なストライプの背景を作ってみようと思います。

説明はいらないからコピペできるCSSだけ欲しいんだよ!という方は、【コピペで簡単】CSSで作る伝統的ストライプ16パターンをご覧ください。

カスタマイズには以降の記事の知識が必要になりますので、カスタマイズを考えている方は、是非続きをお読みください。

ストライプ背景の作り方

ストライプ背景の作り方を、順を追って見ていきます。

repeating-linear-gradient()

ストライプ背景を作るには、repeating-linear-gradient()を使用します。

repeating-linear-gradient()は、background-imageプロパティで「線形グラデーションの繰り返し」を設定することが出来ます。

設定の仕方は、以下のようになります。

.stripe { 
background-image: repeating-linear-gradient(
    ストライプの角度,
    1色目の色指定 1色目の始点, 1色目の色指定 1色目の終点,
    2色目の色指定 2色目の始点, 2色目の色指定 2色目の終点);
}

基本的なストライプのコード

.stripe { 
background-image: repeating-linear-gradient(
    90deg,
    #d860a8 0, #d860a8 10px,
    #ffffff 10px, #ffffff 20px);
}

こちらは基本的なストライプのコードになります。

内容としては、ストライプの角度は90deg、1色目の色は#d860a8、1色目の始点は0で終点は10pxです。2色目の色は#fffff、始点は10pxで終点が20pxです。

これで、#d860a8と#ffffffの2色で、10pxの太さのストライプになります。

ストライプの角度

指定がない場合、ストライプは平行になり、ボーダーストライプになります。

.border-stripe {
background-image: repeating-linear-gradient(
    #955aad 0, #955aad 5px,
    #ffffff 5px, #ffffff 10px);
}

90度を設定すると縦縞のストライプ、45度を設定すると斜めストライプになります。もちろん任意の角度で設定することも出来ます。

.diagonal-stripe {
background-image: repeating-linear-gradient(
    -45deg,
    #5aad86 0, #5aad86 3px,
    #ffffff 3px, #ffffff 6px);
}

色の指定

repeating-linear-gradient()はカンマで区切れば複数の色を指定することも出来ます。色数の制限はなく、指定した色を繰り返します。

たとえば、以下のように色指定を追加していくと複数の色の組み合わせでストライプを作れます。

.colorful-stripe {
background-image: repeating-linear-gradient(
    90deg,
    #f6e5d7 0, #f6e5d7 10px,
    #73d0c2 10px, #73d0c2 20px,
    #eddc45 20px,#eddc45 30px,
    #ffc530 30px,#ffc530 40px,
    #978d86 40px,#978d86 50px);
}

この例だと、5色を指定しています。

同じ色を2回ずつ指定しているのは、始点と終点を同じにすることでグラデーションをベタ塗りにしているからです。
始点と終点で違う色を指定すると、ストライプのライン自体がグラデーションになります。元々、repeating-linear-gradient()は「線形グラデーションの繰り返し」なので、そうなります。

.gradient-stripe {
background-image: repeating-linear-gradient(
    90deg,
    #d860a8 0, #ffffff 40px,
    #4990ce 40px, #ffffff 80px);
}

幅の指定

ストライプの線の太さは、始点と終点の差で設定します。

.pinstripe {
background-image: repeating-linear-gradient(
    90deg,
    #616cd6 0, #616cd6 10px,
    #ffffff 10px, #ffffff 11px);
}

この例の場合、1色目のブルー(#616cd6)は始点から終点までが10pxなので10px幅のラインになりますが、2色目の白(#ffffff)は始点が10pxで終点が11pxなので1px幅のラインになります。

まとめ

ストライプ背景は、background-imageプロパティのrepeating-linear-gradient()で設定出来ます。

CSSのみなので、全体の背景はもちろんですが、ボックスやボタン、見出しなどにも簡単にストライプ背景を設定することが出来ます。

各種ブラウザにも対応しているようですので、問題なく使用も出来るかと思います。
好みのカラーリングのパターン背景画像を作ったり、インターネットで探したりするのも大変ですし、使用権利の問題等々が出てきても困りますので、ストライプ背景はCSSで実現した方が何かと好都合なんじゃないかなぁ?と思います。

タイトルとURLをコピーしました