dl・dt・ddで作るTableタグ風の会社概要定義リストの作り方

この記事では、シンプルで見やすいtableタグ風の「会社概要」セクションの作成方法を紹介します。定義リスト（dl, dt, dd）を使って構造化し、CSSで美しく整列させる方法を実装します。

1 実装のポイント

• dlタグで情報を整理して見やすく構造化
• flexレイアウトで項目名と内容を横並びに
• テーマに依存しないシンプルなデザイン

2 HTML構造

<div class="company-profile-table">
  <dl>
    <div>
      <dt>事務所名</dt>
      <dd>○○株式会社</dd>
    </div>

    <div>
      <dt>所在地</dt>
      <dd>〒160-0000 <br class="hidden spBlock">東京都新宿区0-0-0</dd>
    </div>

    <div>
      <dt>責任者</dt>
      <dd>代表取締役　東西一郎</dd>
    </div>

    <div>
      <dt>電話</dt>
      <dd>0120（000）1111</dd>
    </div>

    <div>
      <dt>業務内容</dt>
      <dd>海産物の通信販売</dd>
    </div>

    <div>
      <dt>所属団体</dt>
      <dd>○○商工会議所</dd>
    </div>
  </dl>
</div>
    

3 汎用CSS

/* ------------------------- 
 * 会社概要スタイル
 * ------------------------- */

/* dl全体の余白とパディングをリセット */
.company-profile-table dl { 
  margin:0 !important;    /* 上下左右の余白を0にする */
  padding:0 !important;   /* 内側の余白を0にする */
  border:1px solid #ccc !important; /* 全体の枠線を追加 */
  border-radius:6px !important; /* 角を少し丸くする（任意） */
  overflow:hidden !important; /* 枠からはみ出る線を隠す（Safari対策） */
}

/* 各行をflexで横並びにする */
.company-profile-table dl div { 
  display:flex !important;                 /* dtとddを横並びにする */
  border-bottom:1px solid #ccc !important; /* 各行に下線を引く */
  background:#fff !important;              /* 背景色を白に設定 */
}

/* 最後の行は下線を非表示にする */
.company-profile-table dl div:last-child { 
  border-bottom:none !important; /* 最後の行に線を引かない */
}

/* dt（項目名）の設定 */
.company-profile-table dl dt { 
  flex: 0 0 13em !important; /* 横幅を13emに固定 */
  font-weight:normal !important; /* 太字にせず標準にする */
  background:#f9f9f9 !important; /* 左カラムを薄いグレーにする */
  border-right:1px solid #ccc !important; /* 区切り線を右側に追加 */
}

/* dd（内容）の設定 */
.company-profile-table dl dd { 
  flex:1 !important; /* dt以外の残り幅を使用 */
  background:#fff !important; /* 内容カラムは白背景 */
}

/* dtとdd共通の設定 */
.company-profile-table dl dt,
.company-profile-table dl dd { 
  padding:12px 20px !important;   /* 内側の余白を設定 */
  line-height:1.6 !important;     /* 行間を少し広めに設定 */
  margin:0 !important;            /* 外側余白をリセット */
  color:#111 !important;          /* 文字色を濃いグレーに設定 */
}
  

4 完成イメージ

5 まとめ

• 定義リスト（dl, dt, dd）で見やすい会社概要を実装
• flexレイアウトで整然とした行表示
• CSSをテーマに依存しない形で簡単に調整可能

6 関連記事リンク

▶ 会社概要ページでよく使われる定義リストの作り方