dl dt ddを上手く使いこなすための小技まとめ
htmlを初めて一番最初につまづくタグはtableタグやdlタグの表を使ったり、リストなどを定義するタグ関連ではないでしょうか。私も勉強し始めの頃はtable関連のタグが理解できず苦しんだ記憶があります。
dlタグを使えば苦手なtebleを使ったようなデザインにできたり、新着情報やフォームなどの実装などいろんな箇所で便利で役立つこと間違いなしです!また、ホームページビルダーでは、説明付きリストと呼ばれています。
では、どんなものか、見ていきましょう。
定義リストは、dl dt dd はこんなもの
日本の祝日
- 2017年1月09日(月)
- 成人の日
- 2017年2月11日(土)
- 建国記念の日
- 2017年3月20日(月)
- 春分の日
- 2017年4月29日(土)
- 昭和の日
- 2017年5月03日(水)
- 憲法記念日
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.infomartion{ overflow:hidden; margin:0 0 20px; } .infomartion dt{ float:left; clear:both; box-shadow:none; margin-top : 0px; margin-bottom : 0px; padding:5px 0; font-size:13px; font-weight:bold; color:#007f34; .infomartion dd{ margin-top : 0px; margin-bottom : 0px; overflow:visible; padding:5px 0 5px 120px; border-bottom:1px solid #ccc; } |
1 |
- 2017年1月09日(月)
- 成人の日
2017年2月11日(土) 建国記念の日
2017年3月20日(月) 春分の日
2017年4月29日(土) 昭和の日
2017年5月03日(水) 憲法記念日
定義する用語を【dt】に。その用語の意味を明確に表す文章を【dd】に記載する。
これが、HTMLでの基本。※HTML5では、ここまで明確ではないそうです。
デフォルトの状態では、【dt】に対して【dd】が少し右にインデントされて表示される。
これが、HTMLでの基本。※HTML5では、ここまで明確ではないそうです。
デフォルトの状態では、【dt】に対して【dd】が少し右にインデントされて表示される。