斜めのストライプをCSSのみでデザインする方法

ここでは、背景などのデザインとして活用できる斜めのストライプ柄をCSSのみで実装してみたいと思います。できあがるのは、こんなデザインです。

ボタンで表示を切り替えてご覧ください。

コンテンツ [hide]

斜めのストライプの作り方

グラデーションの設定をする

html{
background: linear-gradient(#fff, #C6E6FB);
}

background: linear-gradient(#色１, #色２);という形でbackgroundプロパティでグラデーションの設定をします。ここではセレクタがhtmlになっていますが、ストライプにしたい要素を指定してくださいね。

グラデーションをストライプに変える

html{
  background: linear-gradient(
    #fff 25%, #C6E6FB 25%,
    #C6E6FB 50%, #fff 50%,
    #fff 75%, #C6E6FB 75%,
    #C6E6FB
  );
}

細かくて見えにくいかもしれませんが、上記の設定をするとグラデーションを２色の線に変えることができます。いきなりコードが複雑になって申し訳ないですが、下記のような設定です。

background: linear-gradient(
  #色１ 25%, #色２ 25%,
  #色２ 50%, #色１ 50%,
  #色１ 75%, #色２ 75%,
  #色２
);

本当はこんなに複雑にしなくても２色の線にすること自体は可能なのですが、斜めにするために必要な設定なのです。

CSSの解説

#色１ 25%,　：　０～２５％が色１　
#色２ 25%,　：　２５％が色２（グラデーションを打消し）
#色２ 50%,　：　２５％～５０％が色２
#色１ 50%,　：　５０％が色１（グラデーションを打消し）
#色１ 75%,　：　５０％～７５％が色１
#色２ 75%,　：　７５％が色２（グラデーションを打消し）
#色２　　　：　残り（７５％～１００％）が色２

ストライプの幅を指定する

html{
  background: linear-gradient(#fff 50%, #C6E6FB 50%, #C6E6FB);
  background-size: 40px 40px;
}

background-sizeプロパティで同じ値を２つ指定します。ここで指定した値の４分の１のサイズが線の幅になります。ここでは、10pxの幅を表現したいので、その４倍の40pxで指定しました。

角度を指定する

html{
    background: linear-gradient(
    -45deg,
    #fff 25%, #C6E6FB 25%,
    #C6E6FB 50%, #fff 50%,
    #fff 75%, #C6E6FB 75%,
    #C6E6FB
  );
  background-size: 40px 40px;
}

一番最初に設定したグラデーションのところに-45degという形で角度を入れます。この場合、右斜め上の線になりますが、右斜め下にしたい場合は45degと入れくてださい。

これで斜めのストライプ模様が完成しました。ストライプがデザインできるようになると、例えば、見出しの下線をストライプにしたり、デザインの幅がいろいろと広がります。

あと、色の割合とか分かってくると３色以上の縞模様も作れるようになります。

以上が、斜めのストライプをCSSのみでデザインする方法でした。

2018.06.27

CSSでグラデーションを実装｜linear-gradientの使い方

linear-gradientの使い方ここでは線形のグラデーションを表現できるlinear-gradientの使い方についてお話します。グラデーションには円形グラデーションというのもありますので、興味があったら下記の記事にも目を通してくださいね...

WordPressとデザインが学べるWebメディア