会社概要テーブルセクション
左に画像、右に会社情報のテーブルを並べた会社概要セクションです。 grid-template-columns:1fr 1.5fr で画像列を狭く、情報列を広く取り、右側は dl （定義リスト）の各行を grid-template-columns:120px 1fr で「項目名120px＋内容可変」の2カラムに揃えて…
このパーツの使いどころと実装ポイント
左に画像、右に会社情報のテーブルを並べた会社概要セクションです。grid-template-columns:1fr 1.5fr で画像列を狭く、情報列を広く取り、右側は dl（定義リスト）の各行を grid-template-columns:120px 1fr で「項目名120px＋内容可変」の2カラムに揃えています。各行は下線で区切られ、社名・設立・代表・所在地・事業内容・URLといった定型情報を、罫線表のように読みやすく並べられるのが特徴です。
向いている場面
コーポレートサイトの会社概要ページ、Aboutセクション、サービスサイトの運営者情報など、定型の事実情報を整然と見せたい場面に向きます。設立年や代表者名、事業内容を一覧で示すことは、取引前の信頼確認や、特定商取引法に基づく表記の入口としても役立ちます。
カスタマイズと注意
- 行は
div.about__row単位で増減できます。資本金・従業員数・取引銀行などの行を足しても、項目名列の幅が揃っているので崩れません。 - 680px以下で1カラムになり、画像が上、テーブルが下に並びます。
- 会社情報は
dl/dt/ddでマークアップされており、「項目と値」の対応が構造として表現されています。見た目だけの表組みより意味が伝わりやすい作りです。 - 項目名が長い場合（例：「特定商取引法に基づく表記」）は120pxに収まらず折り返すため、その列幅の調整を検討してください。
よくある質問
項目を追加したい場合はどうしますか。
右側のテーブルは「項目名と内容」のペアを縦に並べた定義リストなので、同じ構造の1行を複製して項目名と内容を書き換えれば、資本金・従業員数・取引銀行などを自由に追加できます。下線区切りなので行が増えても自動で整い、項目名の列幅が揃うため見た目も乱れません。
なぜ普通の表ではなく定義リストで作っているのですか。
会社概要は「社名はこれ、設立はこれ」という項目と値の対応関係なので、その関係を意味として表せる定義リストが構造的に適しています。見た目は表組みのように整いつつ、スクリーンリーダーなどには項目と値の対応が正しく伝わります。CSSグリッドで列を揃えているため、表タグを使わなくても整然と並びます。