この記事で作るもの
こんなやつ。
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プロパティを使うと良いだろうと思う。