画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法

シマシマ模様の枠線や区切り線に模様を作りたい場合、従来のCSSだと枠線の背景に縞模様の画像をリピートさせて作っていました。

しかし縞模様の画像を用意するのは面倒なうえに画像の作り方を間違えると縞模様がいびつになることもあります。

しかしCSS3で追加されたグラデーションプロパティを使うと簡単にそういう枠線も作れます。そこでここではシマシマ模様の枠線を作る方法について解説します。

しま模様の作り方

CSSだけでしま模様を作るにはCSS3で新たに追加されたrepeating-linear-gradient関数を使います。この関数の構文は次の通りです。

repeating-linear-gradient(方向, 開始色, 途中色..., 終了色)

方向には次の２つの形式の値を渡します。

• 角度
  「deg」という単位をつける。45度にしたいなら45degという値を渡す
• to [方向キーワード]
  toの後にrightなどの方向を表すキーワードを渡すとその方向に向かってグラデーションする。渡せるキーワードは「top」「left」「right」「bottom」の４種類

次に色ですが、シマシマ模様を作る場合は次のように色の後にその色でどの距離までグラデーションをするか段階的に指定することで縞模様が作れます。

background: repeating-linear-gradient(to right, blue, blue 3px, white 3px, white 6px);

このbackgroundプロパティを指定した要素は次のように青と白の縞模様がかかって表示されます。

さらに向きや色を変えることで次のような縞模様を作ることが可能です。

向きが45度で赤白のしま模様

background: repeating-linear-gradient(45deg, red, red 5px, white 5px, white 10px);

下から上へ赤緑青の３色のしま模様

background: repeating-linear-gradient(to top, red, red 5px, green 5px, green 10px, blue 10px ,blue 15px);

このようにrepeating-linear-gradientを使うと簡単に縞模様が作れます。

ただし未対応のブラウザのために次のように「-moz-」「-webkit-」「-o-」などのベンダープリフィックス(接頭字)をつけておいた方がいいです。

background: -webkit-repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);
background: -moz-repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);
background: repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);

ただし以下のコードでは見やすさのためにベンダープリフィックスは省略します。

しましまの区切り線と枠線を作る方法

区切り線

しましまの区切り線を作るにはhrタグのbackgroundプロパティにグラデーションを指定するだけです。

CSSコード例

hr
{
    background: repeating-linear-gradient(45deg, red, red 5px, white 5px, white 10px);
   height: 5px;
}

実際のブラウザでは次のように表示されます。

枠線

枠線のborder-imageプロパティにもグラデーションを指定できますが、あまり表示がきれいにならないので別の方法を使います。

ここではafter疑似要素にグラデーションをかけ、もとの要素で内側を塗りつぶすことで疑似的に枠を作ります。次の例を見てください。

CSSコード例

.stripe_border
{
  position: relative;
  background: rgba(255, 255, 255, 1);
  padding: 12px;
  width: 200px; 
  height: 100px;
}

.stripe_border::after
{
position: absolute;
    top: -10px; bottom: -10px;
    left: -10px; right: -10px;
    background: repeating-linear-gradient(45deg, red, red 3px, white 3px, white 6px);
    background-color: black;
    content: '';
    z-index: -1;
}

このCSSクラス(stripe_border)を適用した要素は次のようにしましまの枠線で囲まれます。

しましまの間隔や色などを変えると面白い縞模様も作れます。

次が色々なしま模様のついた枠線とそのコード例です。

See the Pen いろんなしましま枠線 by kaz1503 (@kaz1503) on CodePen.dark

以上画像を使わずCSSだけでしましまの枠線や区切り線を作る方法について解説しました。しまの間隔や色や角度などを変えると面白いしましまが作れると思います。