斜めストライプ背景
45度に傾いた縞模様を全面に敷くカラフルな背景です。 repeating-linear-gradient という関数を使い、2色を交互に一定幅で繰り返すだけで縞が生まれます。角度を45度に指定しているため、斜めのダイナミックな印象になります。画像を使わない純CSSなので軽量で、表示も即座です。
解説
45度に傾いた縞模様を全面に敷くカラフルな背景です。repeating-linear-gradientという関数を使い、2色を交互に一定幅で繰り返すだけで縞が生まれます。角度を45度に指定しているため、斜めのダイナミックな印象になります。画像を使わない純CSSなので軽量で、表示も即座です。
向いている場面
セールやキャンペーンのバナー、イベント告知のヒーロー、注意を引きたいCTA帯などに合います。サンプルでは中央の見出しを太字の白文字にして、縞の上でも視認できるようにしています。
- 縞の幅は
12pxと24pxの区切り位置を揃えて変更する - 2色（
#667eeaと#7888ee）を近い色にすると上品、離すと派手になる - 角度
45degを90degにすれば縦縞、0degで横縞
縞のコントラストを強くしすぎると目がチカチカするため、文字を乗せる範囲は色差を抑えるか半透明の下地を敷くと読みやすくなります。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
縞の太さや色は自由に変えられますか
はい。repeating-linear-gradient の中で2色とそれぞれの区切り位置（初期は12pxと24px）を指定しているので、数値を揃えて書き換えれば縞幅を、色コードを変えれば配色を調整できます。
縞の向きを縦や横に変えるには
先頭の角度指定 45deg を変更します。90deg で縦縞、0deg で横縞になります。角度を細かく変えると斜めの傾きも自由に調整できます。