レンちゃんとペンタ

【コピペでカンタン】CSSだけで作れるボーダー&ストライプ柄

【コピペでカンタン】CSSだけで作れるボーダー&ストライプ柄

ボーダーやストライプ柄をCSSだけで作る事ができます。
画像を使った実装に比べて、ボーダー幅や色調整がカンタンにできるメリットもあります。
サンプルもいくつか用意していますので、コピペでどうぞ。

この記事で分かること

  • CSSだけでボーダーを作る方法

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    ボーダー柄の作り方

    コピペでサクッと済ませたい方はこちらのCSSをどうぞ

    各パラメータをいじると、色やボーダー幅がカスタマイズできます。

    div{
      background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
    }
    CSSだけで作ったボーダーです

    以下、ロジックを説明します。

    ボーダーのしくみをじっくり解説

    現状、ボーダーを実装するスタイルシートは存在しないので、繰り返しの線形グラデーション(repeating-linear-gradientプロパティ)を工夫してボーダーに見せています。
    ということでここからは、まず基本のグラデーションから始めて、少しずつボーダーに整えていきながら内容を確認していきます。

    基本のグラデーション
    グラデーションの実装にはbackground-imageプロパティを使います。「background-color」じゃないんですね。
    例えばグレー(#DDD)から白(#FFF)へ変わるグラデーションは、このように実装することができます。

    div{
      background-image:repeating-linear-gradient(#DDD, #FFF);
    }
    要素の上から下へ、緩やかに切り替わる基本のグラデーション

    repeating-linear-gradient(色1, 色2)のように、半角カンマ区切りで色を繋げていきます。3色以上のグラデーションも可能です。

    グラデーション位置の変更
    色指定の後にサイズに関する数値を追加することによって、グラデーションの切り替わり位置を指定することができます。
    例えば50%に設定ると、要素の真ん中で色1から色2に突然切り替わるので、ボーダーのように見えます。

    div{
      background-image:repeating-linear-gradient(#DDD, #DDD 50%, #FFF 50%, #FFF);
    }
    要素の50%位置(縦中央)で急に色が変わることによって、ボーダーに見えるグラデーション

    グラデーションサイズの変更
    切り替わり位置をpx等で指定することによって、厳密なボーダーサイズを決めることができます。
    ここでは以下のようなボーダーを設定しています。

    ・0〜10px:グレー(#DDD)
    ・10〜20px:白(#FFF)

    21px以降は、0〜20pxのグラデーションが繰り返されます。

    div{
      background-image:repeating-linear-gradient(#DDD, #DDD 10px, #FFF 10px, #FFF 20px);
    }
    10pxごとにグレーと白をリピートするボーダー(厳密にはグラデーション)

    これでボーダー柄の完成です。

    応用編:不規則ボーダー

    切り替え位置を調整すれば、太さの異なるボーダーも作れます。

    div{
      background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 15px);
    }
    「グレーの幅」:「白の幅」の比率が「1:2」のボーダーです

    応用編:多色ボーダー

    色数を増やして切り替え位置を調整すれば、2色以上のボーダーも作れます。
    以下は3色の例です。

    div{
      background-image:repeating-linear-gradient(#DDD, #DDD 5px, #FFF 5px, #FFF 10px, #999 10px, #999 15px);
    }
    5pxずつの3色ボーダーです

    ストライプ柄の作り方

    グラデーションの色指定(repeating-linear-gradientプロパティの丸括弧の中身)の頭に角度を挿入すると、グラデーションを回転させることができます。
    回転角度の単位はdeg(degree=度)です。
    90度回転させれば、ストライプ柄になります。

    div{
      background-image:repeating-linear-gradient(90deg, #DDD, #DDD 10px, #FFF 10px, #FFF 20px);
    }
    ストライプ柄

    斜めボーダー・ストライプ柄の作り方

    角度を変えれば、斜めの縞模様も作れます。

    div{
      background-image:repeating-linear-gradient(45deg, #DDD, #DDD 10px, #FFF 10px, #FFF 20px);
    }
    45度の斜めボーダー・ストライプ柄

    まとめ

    これで、パターン柄用にシームレスな背景用画像を用意する手間から解放されますね。
    CSSだけで作れるドット(水玉)柄編チェック(格子)柄編やと合わせて、是非ご活用ください。

    1. Home
    2. 【コピペでカンタン】CSSだけで作れるボーダー&ストライプ柄

    Related Posts