Webデザインのストライプ柄をコーディングするには、繰り返しできるか否かを見極めて切り出し、背景画像をリピート表示する。しかしこの手法には問題もある。

たとえば斜めストライプの場合だ。斜め線の角度が45°ならば、かろうじて繰り返しラインを見つけやすいが、この条件を外れると判別がつかない。つまりリピート表示用の画像を切り出すことができないということになる。

代替案は、対象エリア以上のサイズに切り出すことで、可変しても見切れることがないようにするというものがある。

ただデザインデータが、対象オブジェクトにストライプパターンを適用している場合は、当該オブジェクト以上のサイズに修正しなければならない。

また対象エリア以上の画像を配置するというのは、必要以上に大きな画像データを読み込むことに繋がり最善な策とは言い難い。

そんな場合には、CSSのみで対処できないか検討してみてはどうだろう。

このエントリーでは、CSSでストライプを表現する方法を紹介したい。

縦のストライプ（罫線）を書く

• repeating-linear-gradient関数を使う
• 90deg,で直角にする
• #FFF, #FFF 6px,で始点から6px地点まで#FFFにする
• #FF6C60 6px, #FF6C60 7pxで6px地点から7px地点まで#FF6C60にする

斜めのストライプ（罫線）を書く

• linear-gradient関数を使う
• background-sizeで繰り返すサイズを指定する
• -45deg,で角度をつける
• #fff, #fff 48.5%,で始点から48.5%地点まで#fffにする
• #FF6C60 49.5%, #FF6C60 50.5%,で49.5%地点から50.5%地点まで#FF6C60にする
• #fff 51.5%, #fffで51.5%地点から終点まで#fffにする

まとめ

以上がCSSでストライプを表現する方法の紹介だ。ご覧のようにグラデーションを表現するCSS関数（linear-gradient or repeating-linear-gradient）が使われている。

基本的な使い方は、A地点からB地点までをなめらかに変色させてグラデーションを表現するが、ここでは、A地点からB地点までを同一色にすることで区切りよく模様がついたというわけだ。

ストライプを含んだデザインデータをコーディングする機会があれば、検討してみてはいかがだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。