CSS で項目間の点線を表現する #CSS

この記事で作るもの

こんなやつ。

HTML をどう書くか

HTML は、文法エラーを出さない。そのためか、適切な HTML 要素の検討、選択は、軽んじられているところがある。
しかしアクセシビリティや、開発の容易さを考えると、適切な HTML を書くことは非常に重要だと思う。
そんなわけで、今回作るものにはどの HTML 要素が適切かを検討していきたい。

今回作るものは、上の画像からもわかるように、複数の項目が列挙されている。つまり、リスト形式になるということだ。
HTML でリストを表現にする際には、リスト要素(ul, ol, dl要素)を使用する。
次に、この記事で作るものでは「各項目と、それに対する値段」を書く必要がある。
これを表現することに適しているリスト要素は、一連の用語と説明をリスト化できるdl要素だ。

dl要素で骨組みを作ってみる。ついでにクラスも割り当てる。また、dt, dd要素がすべて隣接していると、項目ごとの装飾が難しくなる。そのため、項目ごとにdiv要素で囲んだ。

<dl class="products">
  <div class="product">
    <dt class="productName">項目1</dt>
    <dd class="productPrice">500円</dd>
  </div>
  <div class="product">
    <dt class="productName">項目2</dt>
    <dd class="productPrice">1,000円</dd>
  </div>
</dl>

CSS をどう書くか

上に書いたような HTML 構造になれば、あとは CSS でいかようにもできる。
div.productのbefore, after擬似要素で点線を表現し、それをdt, dd要素の間に持ってくれば完成だ。

まず、before, after擬似要素をdt, dd要素の間に持ってくるには、 flexbox のorderプロパティを使うやり方がスマートだろう。
dt, dd要素のどちらかのorderプロパティに、マイナス、もしくは 1 以上の数値を設定すれば良い。このとき、dd要素には margin がかかっていることに注意しよう。

次に、点線の表現方法だが、これは人によって色々なやり方をするだろうと思う。今回はborder-radiusプロパティ、backgroundプロパティを使う方法の2つを紹介する。

点線の表現に`border-radius`プロパティを使う

dd {
  margin: 0;
}

.product {
  display: flex;
  align-items: center;
}

.product::after {
  content: '';
  border-top: 5px dotted;
  flex: auto;
}

.productPrice {
  order: 1;
}

点線の表現に`background`プロパティを使う

radial-gradient関数を使っているところがポイントだ。

dd {
  margin: 0;
}

.product {
  display: flex;
  align-items: center;
}

.product::after {
  height: 1em;
  content: '';
  background: radial-gradient(#000 20%, transparent 30%) center/ 1em;
  flex: auto;
}

.productPrice {
  order: 1;
}

点線の表現はどっちでやったほうがいいのか？

border-radiusプロパティを使った場合、点の大きさは、「点の半径が border-widthプロパティの計算値の半分」であることから調整できる。
しかし、各点間の空白は、各ブラウザの実装に依存している。それに、この点はブラウザが用意した点だ。そのため、点線に対するちょっとした装飾すらも困難だ。

それでは、backgroundプロパティを使うとどうだろう。この場合、点自体をradial-gradient関数を使い、自分で用意しているため、点の大きさ、間隔など、ちょっとした装飾が比較的容易に行えるはずだ。

というわけで、点線のスタイルにこだわりを持っているなら、backgroundプロパティを使い、点線なら何でもいいのならborder-radiusプロパティを使うと良いだろうと思う。

CSS で項目間の点線を表現する