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

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

– HTML –

– CSS –

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

完成レイアウト

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください