HTMLコーダー必見のdl dt ddタグの基礎から応用まで!
HTMLのマークアップの際に言葉や文章などを分類し、情報としてまとめていく場面に多々出くわします。
dlタグは、dl、ddをともなって語句を定義する「定義リスト」でしたが、HTML5では「記述リスト」と定義が変わっています。
今回は、その違いや使い方などをご紹介します。
▼プログラミング不要でサイト更新できるCMS
圧倒的に使いやすい国産CMS|ferret One
ノーコードでWebサイトやLPの作成・更新ができます
dl,dt,dd要素の基本をおさらい
dl要素はdt要素(用語),dd要素(その用語に対する説明)をともなう記述型リストです。
<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>
dt要素とdd要素の間には、改行が入ります。HTML4ではcompactという属性で改行させなくすることができましたが、HTML5ではcompact属性は廃止となり、CSSで見た目を調整する作業が発生します。
HTML4では、「definition list(dl)= 定義リスト」「definition term(dt)= 定義する言葉」「definition description(dd)= 定義の説明」という形でdt要素をdd要素として定義する、というルールでした。HTML5においては「description list(dl)= 説明リスト」「description term(dt)= 説明する言葉」「definition / description(dd)= 定義分もしくは説明文」という形でdt要素をdd要素で説明する「記述リスト」に変更されました。
HTML5は人間にとっても、コンピュータにとってもわかりやすいことを指針としているので、コードを見ただけでもその定義が見えるように格式ばったものを取り払ったと思われます。現在のdl・dt・ddタグは「説明リスト」の書き方ができるようになりましたが、一方で従来通り「定義リスト」である辞書的な書き方でも問題ありませんので、単純に使い方が増えたという認識をすることも可能ですね。
SEO的には、olタグ、ulタグ(順序リスト・順不同リスト)に比べ、セマンティック(意味的)である配慮が必要となります。
dl,dt,ddタグの正しいマークアップ方法
dl要素の内容にはdt要素が1つ以上先に、dd要素が1つ以上続いてその後に記述されなければなりません。
<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>
また、必ずしもdt要素とdd要素は1つの対でなくとも構いません。
<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dd>オレンジジュースなど</dd>
</dl>
<dl>
<dt> ソフトドリンク</dt>
<dt>ノンアルコールビール</dt>
<dd>未成年者が飲むこと可</dd>
</dl>
dl要素を入れ子構造にすることもできます。
<dl>
<dt>ソフトドリンク</dt>
<dd>紅茶やコーヒー・果物ジュースなど
<dl>
<dt>アイスコーヒー</dt>
<dd>冷やしたコーヒー飲料</dd>
</dl>
</dd>
</dl>
スタイルシートで横並びにする
dt要素とdd要素には改行が入ります。改行しないようにするcompact属性はHTML5では廃止されています。
デザインをスタイルシートで一元的に管理する流れが波及したのでしょう。
dl要素を横並びにするには以下のようにCSSで調整します。
[HTML]
<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
<dd>20歳未満は飲めない飲料</dd>
<dt>炭酸飲料</dt>
<dd>炭酸ガスの入った飲料</dd>
</dl>
[CSS]
dt {
/左に寄せる/
float: left ;
/後続の左寄せを解除/
clear: left ;
margin-right: 0.5em ;
width: 120px ;
}
dd {
float: left ;
margin-left: 1em ;
}
dd要素にclearを指定すると、dd要素が複数連なるときに左寄せが崩れてしまいます。dt要素にwidthを指定することによって、dd要素の頭を揃えることができます。
dl要素ごと横に並べる画像のアーカイブ
続いてdl要素ワンセットで左寄せにして、横に並べてみます。
[CSS]
img {
width: 250px ;
height: 187px ;
}
dl {
float: left ;
padding-right: 2px ;
text-align: center ;
}
dt {
float: left ;
clear: left ;
width: 250px ;
height: 1.6em ;
background-color: #8F82F8 ;
font-weight: bold ;
}
dd {
margin-left: 0px ;
width: 250px ;
height: 187px ;
}
HTMLタグでは、dd要素に画像を入れています。
[HTML]
<dl>
<dt>ピンク色のバラ</dt>
<dd><img src="image/bara_01.jpg" alt="" /></dd>
</dl>
<dl>
<dt>白いバラ</dt>
<dd><img src="image/bara_02.jpg" alt="" /></dd>
</dl>
<dl>
<dt>赤いバラ</dt>
<dd><img src="image/bara_03.jpg" alt="" /></dd>
</dl>
スタイルシートでdl要素ごと左へフロートしていきます。あとは追加すれば右側に次々とアーカイブされて行きます。liタグで起きがちなテキストの回り込みも、dl要素がdt要素とdd要素でワンセットになっていることを利用し、シンプルなマークアップができます。
▼プログラミング不要でサイト更新できるCMS
圧倒的に使いやすい国産CMS|ferret One
ノーコードでWebサイトやLPの作成・更新ができます
dl dt ddを利用したインラインフレーム状の「お知らせ」風ウインドウの作り方
dt要素とdd要素にデフォルトで改行が入ることを利用して、インラインフレーム状の「お知らせ」風ウインドウを作ってみます。
[CSS]
dl {
width: 450px ;
height: 10em ;
padding: 0px 1em ;
text-align: center ;
overflow: auto ;
}
dt {
width: 450px ;
height: 1.6em ;
padding: 0px 1em ;
background-color: #8F82F8 ;
}
dd {
margin-left: 0px ;
width: 450px ;
padding: 0px 1em ;
font-size: 0.9em ;
text-align: left ;
background-color: #FDF6DF ;
}
dl要素はデフォルトCSSでは display: block; ですので、サイズを指定して内包するdt要素とdd要素の余剰エリアをスクロールさせます(overflow: auto)。
内容は、用語(dt)とその説明(dd)となりますので、HTML5の定義とフィットします。
[HTML]
<dl>
<dt>平家物語</dt>
<dd>祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰(じょうしゃひっすい)の理(ことわり)をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。 <br>
遠く異朝(いちょう)をとぶらふに、秦の趙高(ちょうこう)、漢の王莽(おうもう)、梁(りょう)の朱い(しゅい)、唐の禄山(ろくざん)、これらは皆旧主先皇(きゅうしゅせんこう)の政(まつりごと)にも従はず、楽しみを極め、諌め(いさめ)をも思ひ入れず、天下の乱れん事をも悟らずして、民間の憂ふる所を知らざりしかば、久しからずして亡じにし者どもなり。
祇園精舎の鐘の声、諸行無常の響きあり、沙羅双樹の花の色、盛者必衰(じょうしゃひっすい)の理(ことわり)をあらはす。驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。 </dd>
</dl>
「平家物語」出典:
http://www5f.biglobe.ne.jp/~mind/knowledge/japan3/heike001.html
dl dt ddを定義リストとして利用する
HTML5において、dl要素は用語(dt)を説明(dd)する記述リストとして定義が変更になりました。dl要素を定義リストとして利用する場合は、dt要素にdfn要素を内包させます。
[HTML]
<dl>
<dt><dfn>定義する用語</dfn></dt>
<dd>用語の定義</dd>
</dl>
一般的なブラウザでは定義する用語はイタリックになります。
正しいdl要素でマークアップをしよう
dl要素も含めてul、olなどのリスト系タグは、マーカーを非表示にしたり左寄せにしたりスタイルシートで成形することが可能です。
単純にディスプレイ表示を考えれば、厳格な定義を多少無視しても成り立ってしまうこともあります。
ユーザーインターフェイス(UI)に問題がなくとも、コンピュータによる解析が難しいといった問題が出てきてしまいます。
HTML5策定の目的として、人間にもコンピュータにもやさしい構造を作るということがあります。ここで言うコンピュータとは検索エンジンや検索クローラーなどのサーバサイドの技術です。
実際にGoogleはウェブサイトの「意味」「関連付け」を読解する方向に加速しており、それがそのままSEOに繋がります。
dt要素やdd要素をレイアウト的に使うだけで意味が破綻していれば、Webサイトの信頼性は落ちてしまいます。
一つのdl要素に複数のdt要素を入れることは、文法的には合っています。
しかしきちんとdd要素で説明できていなければ、人間には伝わりにくく、コンピュータにとっても関連付けで戸惑うことになります。
dl要素には、ul、olにはない用語と説明(1対1でなくても良い)の組み合わせ、tableタグに引けをとらないレイアウト性があります。
論理的で美しいマークアップに利用していきましょう。
デザイナー・ディレクターにおすすめ
▼プログラミング不要でサイト更新できるCMS
圧倒的に使いやすい国産CMS|ferret One
ノーコードでWebサイトやLPの作成・更新ができます
▼ディレクターとデザイナーで読みたい資料
マーケ思考のデザイナーは強い! 提案型デザイナーのススメ
リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。
非エンジニアも知っておきたい!HTMLとCSSの基礎知識
WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS(コンテンツ管理システム)に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
コーディング初心者こそ知っておきたい便利な「CSS関数」を紹介します。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用してみましょう。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- 検索エンジン
- 検索エンジンとは、インターネット上に無数に存在するホームページのデータを集め、ユーザーにそれらを探しやすくしてくれるサービスのことです。「検索サイト」とも呼ばれます。代表的な検索エンジンとしては、Yahoo! JAPANやGoogleなどがあります。また、大手検索エンジンは、スマートフォン向けのアプリも提供しており、これらは「検索アプリ」と呼ばれています。
- クローラー
- クローラーとは、検索エンジンへのインデックス作業のために、インターネット上に存在する様々なページの情報を集めデータベースに登録するプログラムのことです。クローラーが動くことをクローリングといいます。クローラーがページを巡回する際、ページに埋め込まれているリンクを辿って、ページ構造やキーワードなどに関する情報を収集します。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- SEO
- SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CMS
- ホームページを作成するための様々な作業を、一元的に管理できるシステムのことをCMS(コンテンツ マネージメント システム)と言います。ホームページを作成するには文章や画像などのコンテンツの作成からHTML、CSSを使った構成・装飾の記述、リンクの設定などが必要ですが、CMSを使用すればこれらの作業を自動的に行なうことができます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング