1. HOME
  2. テックブログ
  3. 定義リスト(説明リスト)タグを用いた複数列の表の作成法

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

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

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

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

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

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

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

参考資料

Flexboxを使って孫要素まで高さを揃える方法 – Qiita
https://qiita.com/kfunnytokyo/items/17ef45e2f11f9264ebf1

boxのwidthをパーセント指定して扱うとぶち当たったよくある落とし穴 – 徒然畑
http://turedurebatake.hatenablog.com/entry/2016/11/05/204211

上記では、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段目からは線が重複して表示されない様にしています。

参考資料

何番目系の便利なCSSまとめ – Qiita
https://qiita.com/ituki_b/items/62a752389385de7ba4a2

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

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

参考資料

【CSS】calcの使い方!計算式で幅などの値が指定できて便利! | Handy Web Design
https://handywebdesign.net/2017/09/css3-calc/

CSSで計算式を可能にするcalc()ファンクション
https://w3g.jp/blog/css3_calc_function

まとめ

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

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

ファブリカコミュニケーションズで働いてみませんか?

あったらいいな、をカタチに。人々を幸せにする革新的なサービスを、私たちと一緒に創っていくメンバーを募集しています。

ファブリカコミュニケーションズの社員は「全員がクリエイター」。アイデアの発信に社歴や部署の垣根はありません。

“自分から発信できる人に、どんどんチャンスが与えられる“そんな環境で活躍してみませんか?ご興味のある方は、以下の採用ページをご覧ください。

◎ 新卒採用の方はこちら
◎ キャリア採用の方はこちら

この記事を書いた人

林田 有司
インターネットサービス事業本部 プロダクト開発本部 第2開発グループ
林田 有司

おすすめの記事