レンちゃんとペンタ

【コピペでカンタン】CSSだけで作れるドット(水玉)柄

【コピペでカンタン】CSSだけで作れるドット(水玉)柄

苦労してシームレスな画像を用意してなくても、スタイルシートだけでドット(水玉)が作れます。
サンプルもいくつか用意していますので、コピペでどうぞ。

この記事で分かること

  • CSSだけでドット(水玉)柄を作る方法

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

    レンちゃんとペンタ

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

    ドット(水玉)柄の作り方

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

    各パラメータをいじると、色や水玉のサイズがカスタマイズできます。

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

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

    ドット(水玉)のしくみをじっくり解説

    円形のグラデーション(radial-gradientプロパティ)を工夫して水玉に見せている、というのがこちらの種明かしです。
    ということでここからは、まず基本のグラデーションから始めて、少しずつ水玉柄に整えていきながら内容を確認していきます。

    基本のグラデーション
    グラデーションの実装にはbackground-imageプロパティを使います。「background-color」ではないので注意。
    例えば黒(#000)から白(#FFF)へ変わる円形グラデーションは、以下のような表記で実装することができます。

    div{
      background-image:radial-gradient(#000, #FFF);
    }
    要素の中央から外へ、円形に切り替わる基本のグラデーション

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

    グラデーション位置の変更
    色指定の後にサイズに関する数値を追加することによって、グラデーションの切り替わり位置を指定することができます。
    以下は、横半径50pxの位置で色1から色2に突然切り替えることで、輪郭のハッキリした円に見せています。

    div{
      background-image:radial-gradient(#DDD 50px, #FFF 50px);
    }
    本当はグラデーションなんだけど、50pxのトコロで急に色を変えることによって、円に見せることができます

    グラデーションサイズの変更
    「background-sizeプロパティを使うと、グラデーションのサイズを指定することができます。
    以下では、20*20pxの正方形内に半径5pxの円が入っているパターンを作っています。
    パターンは要素内を敷き詰めるように繰り返されるので、結果、水玉柄になります。

    div{
      background-image:radial-gradient(#DDD 5px, #FFF 5px);
      background-size:20px 20px;
    }
    20*20pxの正方形内に5*5pxの円が入っている水玉

    これでドット(水玉)柄の完成です。

    まとめ

    これで、シームレスな背景用の画像を用意する手間から解放されますね。
    CSSだけで作れるボーダー・ストライプ柄編チェック(格子)柄編もオススメです。

    1. Home
    2. 【コピペでカンタン】CSSだけで作れるドット(水玉)柄

    Related Posts