border-style:dotted;の点の間隔やサイズを自由自在に変える方法

CSS3 2019年10月14日

「dotted」の見た目を自由に変更したい…！

要素に対して 点線のラインを引くCSSの記述といえば 真っ先に思い浮かぶのがお馴染みの 「border-style:dotted」ですが、 このプロパティには「点同士の間隔を調整ができない」 という地味に致命的な欠点があります。

デザイン性の高いサイトを組む時など こういう微調整が効かないのは 何とも歯がゆい思いがしますよね。

そこで本日はそんな融通の利かない border:dotted;に変わって インラインイメージというテクニックを使用することで この問題をスマートに解決する方法をご紹介します。

デモ

『border-style:dotted;』版
↓border-style:dotted;で引いた点線だよ
『インラインイメージ』版(点の間隔2px)
↓インラインイメージで引いた線だよ
『インラインイメージ』版(点の間隔4px)
↓インラインイメージで引いたちょっと間隔の広い線だよ
『インラインイメージ』版(点の間隔8px)
↓インラインイメージで引いたかなり間隔の広い線だよ
『インラインイメージ』版(虹色で高さ2pxの線)
↓インラインイメージならこんなカラフルな線も引けちゃうよ

と、まぁこんな感じで インラインイメージを使えば かなり好き勝手スタイリングできてしまうわけですね。

検索狙いのスケベ心で 記事タイトルに「border:dotted;の点の間隔やサイズを自由自在に変える」 と銘打っておきながら、いきなりborderの使用を 放棄しているいい加減さはどうか大目に見てやってください

続いてHTMLとCSSコードを見てみましょう。

HTML

  <div class="item">
    <div class="item_title">
				『インラインイメージ』版(点の間隔8px)
    </div>
    <div class="item-content">
      <div class="item-content-Square">
      	↓インラインイメージで引いたかなり間隔の広い線だよ
      </div>
    </div>
  </div>

.item-content-Square{
  position: relative;
  width: 100%;
  background-color: #eee;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}
.item-content-Square:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAABCAYAAAAMwoR9AAAAFElEQVQYV2NkYGD4z8DAwMiABwAAIUYBAlvg6/4AAAAASUVORK5CYII=
   ) repeat;
}

デモのコードから 必要な部分だけを抜き出してみました。

この例では線を引きたい要素(.item-content-Square)に 疑似要素:afterを指定して そのafter要素の背景画像として インラインイメージを描画させ、 さらに:afterをposition:absolute;で 線を引きたい要素の下辺にくっつけることで 疑似的にborderの点線を再現させています。

しかし肝心のインラインイメージの 記述部分(data:image/png;base64~)を見ると 『iVBOR…』と謎の文字の羅列が続いていて、 一見しただけではこれがどう実際の 点線の表示に繋がるのかさっぱり分かりませんよね。

それでは引き続き、 自分でインラインイメージを作る際の 手順を見ていきましょう。

『Patternify』でインラインイメージを作る

Patternify

カスタムボーダー作成用の インラインイメージジェネレーターとして 私がおすすめするのがこの『Patternify』です。

使い方はとても簡単で 左上の描画エリアにドット絵の要領で 色のついたピクセルを配置し(パレットは下)、 続いて描画エリアの上と左にある 行と列の指定タブの数字をクリックして 繰り返しパターンの範囲を選択。

出来上がったパターンは 右のPreviewエリアに表示されるので、 そこを確認して大丈夫であれば あとはPreview下のBase64 Codeの中身をコピーして インラインイメージを表示させたい要素 (今回なら「.item-content-Square:after」) にCSS指定してあげればそれでおしまいです。

ちなみにインラインイメージは 名前にこそイメージとつきますが 「img src=””」で読み込む通常の画像データと違い 表示にHTTPリクエストが発生しないという特徴があります。

そのためページ読み込み速度の 低下のリスクもなく 余計な画像をアップして サーバー容量を圧迫する心配もありません。

おわりに

知っておくと何かと便利な このインラインイメージ いかがでしたでしょうか。

私は仕事関係で人からこの テクニックを教えてもらいましたが 初めて知ったときはこんなこともできるのかと まさに目からうろこの気持ちでしたね。

それでは、またのご機会に。