dlタグを使った表組みレイアウト
dlタグ(記述リスト)を使ってテーブル(table)のような表組みレイアウトを行う方法を解説します。
– HTML –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="companyProf"> <dl> <dt>名称</dt> <dd>東京地下●株式会社</dd> <dt>設立年月日</dt> <dd>平成16年4月1日</dd> <dt>本社所在地</dt> <dd>東京都台東区東上野●丁目●番●号 <dt>代表者</dt> <dd>●村 ●義</dd> <dt>従業員数</dt> <dd>9,573人（平成30年3月31日現在）</dd> <dt>資本金</dt> <dd>581億円</dd> <dt>株主</dt> <dd>政府（53.4％<br> 東京都（46.6％）</dd> <dt>売上</dt> <dd>3,916億円（2017年度）</dd> <dt>事業内容</dt> <dd> <ol> <li>旅客鉄道事業の運営</li> <li>関連事業の運営 <ul> <li>流通事業（駅構内店舗、商業施設の運営等）</li> <li>不動産事業（オフィスビルの賃貸等）</li> <li>情報通信事業（光ファイバーケーブルの賃貸等）</li> </ul> </li> </ol> </dd> </dl> </div> |
– CSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.companyProf dl dt { /* ①*/ float: left; clear:both; /* ③*/ height: 70px; /* ④*/ font-weight: bold; } .companyProf dl dd { /* ③*/ height: 70px; /* ②*/ margin-left: 150px; } |
① floatプロパティで項目と説明を横並びにする。
② margin-left で説明の左側に余白を空ける。
③ 項目と説明の高さを大きくする（デフォルトのheightを上書きする）
④ 項目を太字にしている。
完成レイアウト
Follow me!
