はじめに
こんにちは。
最近、初めて使った<dl>: 説明リスト要素タグが個人的に万能すぎる！と思ったので、この記事ではそのタグの使い方を紹介したいと思います。
タグの説明は省かせていただきます。
代わりに参考となるリンクを以下に貼りましたので、興味のある方はご覧になってください。
<dl>は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt>要素を使用して指定）と説明（<dd>要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。
引用：MDN
<dl>タグを使う場面
<dl>タグは説明リスト要素であるため、用語の説明や情報を伝える場面で使うのがベストだと思います。
例えばWebサイトだと以下のようなシーンが考えられます。
- 料金表
- プロフィール
- 製品、サービスの仕様
- 用語集
<dl>タグ活用法
それでは実際に<dl>タグを使って料金表を作ってみます。
<dl>タグは、CSSでカスタマイズもできるので、簡単に表を作ることができます。
以下の例は縦軸の料金表になります。
とてもシンプルで見やすく表現できていると思います。
ちなみに<dl> <dt> <dd>タグはブロック要素であるため、縦に並んでいきます。
See the Pen <dl>タグ：料金表1 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.
※ "Result"ボタンを押すとプレビューが表示されます。次の例では、料金表をdisplay:flexで横軸に表現してみました。
さらに疑似要素を加えたことで、推奨したいプランを強調しています。
See the Pen <dl>タグ：料金表2 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.
※ "Result"ボタンを押すとプレビューが表示されます。※プレビュー画面を0.5xにすると適正に表示されます。
まとめ
<dl>タグを使った表はシンプルかつ柔軟性があります。CSSでカスタマイズすれば、強調したい要素を目立たせたり、アイコンを埋め込むこともできたりと非常に見やすくなります。
また、複雑な表を作りたい時はtableタグ、シンプルな表はdlタグと、必要に応じて使うのも良いアイディアかもしれません。皆さんも参考にしてみてください。
長々とありがとうございました。