CSS

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

ここでは、背景などのデザインとして活用できる斜めのストライプ柄を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(#色1, #色2);という形で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
  );
}

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

  background: linear-gradient(
    #色1 25%, #色2 25%,
    #色2 50%, #色1 50%,
    #色1 75%, #色2 75%,
    #色2
  );

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

CSSの解説

#色1 25%, : 0~25%が色1 
#色2 25%, : 25%が色2(グラデーションを打消し)
#色2 50%, : 25%~50%が色2
#色1 50%, : 50%が色1(グラデーションを打消し)
#色1 75%, : 50%~75%が色1
#色2 75%, : 75%が色2(グラデーションを打消し)
#色2    :  残り(75%~100%)が色2

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

See the Pen striped03 by kenichi (@ken81) on CodePen.

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

background-sizeプロパティで同じ値を2つ指定します。ここで指定した値の4分の1のサイズが線の幅になります。ここでは、10pxの幅を表現したいので、その4倍の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.

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

See the Pen striped05 by kenichi (@ken81) on CodePen.

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

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP