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リクエストが発生しないという特徴があります。

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