dlタグを使った表組みレイアウト

dlタグ(記述リスト)を使ってテーブル(table)のような表組みレイアウトを行う方法を解説します。

– HTML –

– CSS –

① floatプロパティで項目と説明を横並びにする。
② margin-left で説明の左側に余白を空ける。
③ 項目と説明の高さを大きくする(デフォルトのheightを上書きする)
④ 項目を太字にしている。

完成レイアウト

Follow me!