会社概要テーブル（dl 型）
商号・設立・代表者・所在地といった定型情報を、定義リスト dl で整然と見せる会社概要セクションです。 dt （項目名）と dd （内容）を display:grid の 2 カラムに流し込み、項目名の列幅を固定することで、行ごとの内容が左端で揃って読みやすくなっています。
このパーツの使いどころと実装ポイント
商号・設立・代表者・所在地といった定型情報を、定義リスト dl で整然と見せる会社概要セクションです。dt（項目名）と dd（内容）を display:grid の 2 カラムに流し込み、項目名の列幅を固定することで、行ごとの内容が左端で揃って読みやすくなっています。各行に下罫線を引くことで、表組みに近い見た目を CSS だけで実現しているのが特徴です。
向いている場面
業種を問わずコーポレートサイトの会社概要ページの標準として使えます。法人だけでなく、店舗の運営者情報、フリーランスのプロフィール、団体の組織概要など、定型項目を一覧で示したい場面に広く向きます。資本金や取引銀行まで載せると、取引先からの信頼確認にも応えられます。
カスタマイズの勘所
- 項目の順番は「商号→設立→代表者→所在地→事業内容」のように、読み手が探しやすい定番順に並べます。
- 住所のように長い
ddはbrで改行を整え、折り返しを制御します。 - 項目名の列幅（
grid-template-columnsの左値）は、最も長いdtに合わせて決めます。
スマートフォンでは 2 カラムが窮屈になりがちなので、項目名と内容を縦積みに切り替えると読みやすくなります。dl 構造は Organization 構造化データとも相性がよく、社名や所在地を検索エンジンに伝える土台になります。
よくある質問
会社概要は table タグで作るべきですか、dl で作るべきですか。
項目名と内容が1対1で対応する会社概要は、定義リストのdlが適しています。tableは縦横の見出しを持つ表データ向けで、概要のような項目羅列にはdlのほうが構造の意味が正確に伝わります。
スマートフォンで2カラムが窮屈に見えます。
画面幅が狭いときはgrid-template-columnsを1カラムに切り替え、項目名と内容を縦に積むと読みやすくなります。項目名を少し小さく、内容を下に置くレイアウトにすると、長い住所などもきれいに収まります。