ここでは、背景などのデザインとして活用できる斜めのストライプ柄をCSSのみで実装してみたいと思います。できあがるのは、こんなデザインです。
ボタンで表示を切り替えてご覧ください。
See the Pen striped04 by kenichi (@ken81) on CodePen.
コンテンツ
斜めのストライプの作り方
グラデーションの設定をする
See the Pen striped01 by kenichi (@ken81) on CodePen.
html{
background: linear-gradient(#fff, #C6E6FB);
}
background: linear-gradient(#色１, #色２);という形でbackgroundプロパティでグラデーションの設定をします。ここではセレクタがhtmlになっていますが、ストライプにしたい要素を指定してくださいね。
グラデーションをストライプに変える
See the Pen striped02 by kenichi (@ken81) on CodePen.
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%, ： ７５％が色２（グラデーションを打消し）
#色２ ： 残り（７５％～１００％）が色２
ストライプの幅を指定する
See the Pen striped03 by kenichi (@ken81) on CodePen.
html{
background: linear-gradient(#fff 50%, #C6E6FB 50%, #C6E6FB);
background-size: 40px 40px;
}
background-sizeプロパティで同じ値を２つ指定します。ここで指定した値の４分の１のサイズが線の幅になります。ここでは、10pxの幅を表現したいので、その４倍の40pxで指定しました。
角度を指定する
See the Pen striped04 by kenichi (@ken81) on CodePen.
html{
background: linear-gradient(
-45deg,
#fff 25%, #C6E6FB 25%,
#C6E6FB 50%, #fff 50%,
#fff 75%, #C6E6FB 75%,
#C6E6FB
);
background-size: 40px 40px;
}
一番最初に設定したグラデーションのところに-45degという形で角度を入れます。この場合、右斜め上の線になりますが、右斜め下にしたい場合は45degと入れくてださい。
これで斜めのストライプ模様が完成しました。ストライプがデザインできるようになると、例えば、見出しの下線をストライプにしたり、デザインの幅がいろいろと広がります。
See the Pen h1 striped by kenichi (@ken81) on CodePen.
あと、色の割合とか分かってくると３色以上の縞模様も作れるようになります。
See the Pen striped05 by kenichi (@ken81) on CodePen.
以上が、斜めのストライプをCSSのみでデザインする方法でした。
