html CSS

《html+CSS》dl dt ddの説明リスト(旧定義リスト)で作る2列のレスポンシブテーブルのコピペ

dl dt ddとは

まずはdl dt ddとは何かということについて簡単におさらい。

dl dt ddとは、1つ以上のdt要素とそれを説明するdd要素のグループです。

定義リスト(dl dt dd)

HTML5以前は、dl(=definition listの略)は定義リストを表す要素でした。

要素名
意味
dl
定義リスト(description list)
dt
定義する用語(description term)
dd
定義の説明(discription difinition)
カエルくん
定義リストって何?
辞書をイメージするとわかりやすいかな。
Reino

用語説明型リスト(dl dt dd)

dl dt ddは、HTML5から説明リストという意味に変わり、より柔軟な用途でコーディングできるようになりました(´ω`)✧

要素名
意味
dl
説明リスト(description list)
dt
用語(description term)
dd
説明や定義(discription difinition)
カエルくん
定義リストとしても使えるの?
もちろん!用途が広がったと理解すればOK♡
Reino

主な使い道

用語とその用語に対しての説明をセットで繰り返す箇所に使います。

  • 用語集
  • よくある質問
  • 会社概要
  • お問い合わせフォーム

dl dt ddテーブル完成イメージ

dl dt ddの説明リスト(旧定義リスト)がテーブルみたいに表示できたらいいのにと思ったことはありませんか?
ここではdl dt ddの説明リスト(旧定義リスト)で作る2列のレスポンシブテーブルのコピペを紹介します。

にゃぶり
スマホだと上下表示になるよ。
定義する用語(definition term)
用語の説明(description definition)
定義する用語(definition term)
用語の説明(description definition)
定義する用語(definition term)
用語の説明(description definition)

html

Word PressではCSSが干渉しやすいので、クラスをつけた方が扱いやすいよー。
Reino

CSS

余談dl dt ddの説明リスト(旧定義リスト)の思い出

その昔、納品後に

「htmlにミスがありましたよ。こちらで修正しました。」

どこですか?(ちゃんと表示されているのに??)
Reino

「直したので大丈夫です!」

(どこって聞いてるのに....。)
Reino

そのあと、再び連絡がきました。

「サイトが壊れてます。」

見てみますね。
Reino

見てみると、dl dt ddの説明リスト(旧定義リスト)が崩壊していました。

ソースを見ると、

が消えていたという...。

そのことを知らせたら、「その部分はいらないって書いてあったんですよ!」

という謎回答。

どこに書いてあったのさ 笑
Reino

自分でもhtmlは書けるんですよ!とよく言っていた方だったので認めたくなかったんだろうなぁ(´°ω°) 笑

  • この記事を書いた人
  • 最新記事
Reino

Reino

佐賀県唐津市生まれ。東京育ちのフリーランス。
2013年小学館CanCam新世代モデルセミファイナリスト。
現役のときは青山学院大学、現在は慶應義塾大学で人生2回目の大学生、哲学を学んでいます。
SEOコンサル、Webマーケター、Webデザイナー、広告運用代理などのマルチスキルを生かしたWeb集客のお仕事が得意😄
個人でリカレント教育のメディアも運営しています。

プライベートブログ→美容やサガン鳥栖やファッション

私の別の顔😎→ UK Rockをこよなく愛するバンドThe Charlene.(シャーレイン)のボーカルMiuとして、作詞&作曲の大部分を手がけています。CDはタワレコなどにて全国発売中。詳しくはこちら

-html, CSS

© 2020 mieux