定義リスト(説明リスト)タグを用いた複数列の表の作成法

インターネットサービス事業本部プロダクト開発本部第2開発グループに所属している林田です。

今回は、「定義リストタグ」を用いた複数列の表の作成法を紹介したいと思います。
「定義リストタグ」というのは「説明リストタグ」とも言い、定義する用語とその用語の説明を対にしたリストを作成するためのタグになります。
それぞれのタグの意味は以下のようになっております。

• <dl>：定義リストであることを表す
• <dt>：定義する用語を表す
• <dd>：定義した用語の説明を記述する

このタグを用いて、<table>タグを用いた形のような表を作成してみたいと思います。

dtとdd項目を横並びにするためには、dt,dd項目に均等な%値を設定して並べます。
この場合、以下のようになります。

全体で100％となるように、各幅のサイズを50％ずつ並べる形式にしました。
これは、30％と70％等の設定でも良いので適宜調節してみてください。
また、テーブル全体に「display: flex; flex-wrap: wrap;」を入れることで、複数行の表示にも対応できるようにしています。

上記では、1行に1カラムを入れた形式ですが、横幅に余白があるPCでの表示の場合は、1行に2カラム入れた表示の方が見やすい場合があります。
では、1行に2カラム入れるにはどうしたら良いでしょうか？
思いつく仕様としては1行に2つの枠が2つずつ入るため、1カラム分余った場合は左寄せにし、右側は空白とするというようなものが考えられます。
あとはよっぽど無いとは思いますが、リスト全体で入力すべき項目が1つだけの表示も崩れない様に考えないといけません。
以下のようになります。

上部の線が途中で切れたり余分に出ないように、「nth-of-type」指定を使い適切な場所で表示するように設定しています。

.dl_2column_table dt:nth-of-type(-n+2),
.dl_2column_table dd:nth-of-type(-n+2) {
  border-top: 1px solid #E4E4E4;
}

ここではdtとddそれぞれ1つ目と2つ目の上部にのみ「border(表の線)」を入れる設定をすることで、2段目からは線が重複して表示されない様にしています。

では、最後に3カラムになる場合はどうすれば良いでしょう。
仕様としては、1行に2つの枠が3つずつ入るため、同じように1カラムもしくは2カラム分余った場合は左寄せにし、右側は空白とするようにしてみます。
以下のような形になります！

「calc」を使うことで、dt,dd項目が計算しにくい値であっても算出して幅を求めることができます。
「nth-of-type」指定と、dt,ddの「width」設定以外は変えておりません。

まとめ

• 定義リストタグ(dl,dt,dd)を用いた表の作成では、dt,dd項目に%値を設定して並べるのが望ましい。
• 「nth-of-type」指定を使うことで、特定の要素に対してCSS調整ができる。
• 「calc」を使うことで、計算式で値を設定することができる。

今回は定義リストタグを用いた表の作成を実際に作成しましたが、これはほんの一例に過ぎません。
実際は他に多くの要素が絡み合いながらページを作成することになると思います。
実現したいデザインを上手く再現できるように、ぜひ役立ててください！