CSSで色々なストライプを作る方法！

僕が依頼されるサイトには背景にストライプが入ったデザインが割と多いです。今までは小さい画像を作成して背景に敷き詰める方法で対応していました。

このような感じですね。
background: url("img/bg-stripe.png") left top repeat;

ソースだと↑のような感じになります。

ですが、https://colorcode-to-rgb.luck-jp.com/000000/ではボタンの下のストライプをCSSのみストライプで作りました。ちょうど良い機会なので、今後わざわざ画像づくりをしなくていいように、しっかりとストライプの作り方を理解しようと思います。

スポンサーリンク

ストライプを作るためのCSS（横ストライプ）

cssでストライプを作る方法は「background-image: linear-gradient(～)」と「background: repeating-linear-gradient(～)」の2つがあるようです。

それぞれシンプルなストライプで書き方を見てみましょう。

linear-gradient

background-image: linear-gradient(
  0deg, /* 角度の指定 */
  #fff 10px, /* 色1の「0位置」からの範囲 */
  #000 10px 20px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 20px 20px;

「linear-gradient」の場合、注意点が2点程あります。

  • linear-gradientの場合は画像という扱いなので「background-size」を指定する必要がある
  • リピートしない設定になっている場合は。「background-repeat: repeat;」を指定する必要もある

「repeating-linear-gradient」の場合の特徴は2つあります。

  • 色を指定する際に開始位置と終了位置もあわせて設定する
  • 最初の色設定は開始位置が省略されている
    ※開始位置は必ず「0位置」なので省略されているのだと思います

repeating-linear-gradient

background: repeating-linear-gradient(
  0deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

「repeating-linear-gradient」の場合の特徴は2つあります。

  • 色を指定する際に開始位置⇒終了位置⇒開始位置・・・という順番で交互に設定する
  • 最初の色設定は開始位置が省略されている
    ※開始位置は必ず「0位置」なので省略されているのだと思います

ストライプを細くするには？

各色の範囲を狭くすれば（位置を小さい方にずらせば）OKです。

linear-gradient

background-image: linear-gradient(
  0deg, /* 角度の指定 */
  #fff 1px, /* 色1の「0位置」からの範囲 */
  #000 1px 2px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 2px 2px;

※範囲が小さくなるためサイズ「background-size」も小さくします

epeating-linear-gradient

background: repeating-linear-gradient(
  0deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 1px, /* 色1終了（位置） */
  #000 1px, /* 色2開始（位置） */
  #000 2px /* 色2終了（位置） */
);

ストライプを縦にするには？

横を縦にするので、90°回せば縦になります。よって、角度を90°に設定すればOKです。

linear-gradient

background-image: linear-gradient(
  90deg, /* 角度の指定 */
  #fff 10px, /* 色1の「0位置」からの範囲 */
  #000 10px 20px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 20px 20px;

repeating-linear-gradient

background: repeating-linear-gradient(
  90deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

ストライプを斜めにするには？

縦にする方法と同じく回せば斜めになりますね。ただ斜めの場合であれば１～８９°であれば傾斜の異なる斜線が作れます。今回は角度を30°、45°、60°に設定してみましょう。

下記で実装したストライプを見ていただくと一目瞭然なのですが、「linear-gradient」は角度だけでは斜線にすることができません…。
※こちらで色々と検証してみました⇒linear-gradientの斜線ストライプが上手くいかない理由？色々検証！＞

ですので、特にこだわりが無ければ「repeating-linear-gradient」を使いましょう！

角度30°

linear-gradient

background-image: linear-gradient(
  30deg, /* 角度の指定 */
  #fff 10px, /* 色1の「0位置」からの範囲 */
  #000 10px 20px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 20px 20px;

repeating-linear-gradient

background: repeating-linear-gradient(
  30deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

角度45°

linear-gradient

background-image: linear-gradient(
  45deg, /* 角度の指定 */
  #fff 10px, /* 色1の「0位置」からの範囲 */
  #000 10px 20px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 20px 20px;

repeating-linear-gradient

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

角度60°

linear-gradient

background-image: linear-gradient(
  60deg, /* 角度の指定 */
  #fff 10px, /* 色1の「0位置」からの範囲 */
  #000 10px 20px /* 色2の範囲 */
 );
background-repeat: repeat;
background-size: 20px 20px;

repeating-linear-gradient

background: repeating-linear-gradient(
  60deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

まとめ

「linear-gradient」「repeating-linear-gradient」のどちらでもストライプは設定できますが、斜めのストライプのことを考えると「repeating-linear-gradient」を使う方が良いのかなと思います。

「repeating-linear-gradient」で斜めにする場合も角度を変更するだけで対応できます。

また、設定方法も若干ですが異なりますので、一先ずは一方だけ覚えてそちらを使っていくのが作業効率もいいかもしれないですね。

repeating-linear-gradientのストライプ一覧

横ストライプ

background: repeating-linear-gradient(
  0deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

縦ストライプ

background: repeating-linear-gradient(
  90deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

30°斜めストライプ

background: repeating-linear-gradient(
  30deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

45°斜めストライプ

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

60°斜めストライプ

background: repeating-linear-gradient(
  60deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

スポンサーリンク