(HTML,CSS)名称と説明をセットにした「定義型リスト」を活用する名称(用語)と説明文(定義)をセットにしてリスト表示する「定義型リスト」を活用してみましょう。HTMLのdl要素・dt要素・dd要素を使って作り、スタイルシートで装飾することで簡単に使えます。用語説明にも便利ですが、「友達のウェブサイトを紹介するリンクリスト」などにも活用できます。文宏ホームページ作成ガイドHTMLには、「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するための「定義型リスト」というリストを作る要素が用意されています。単純に複数の項目を列挙する「箇条書き」(ul要素)や「連番リスト」(ol要素)とは異なり、各項目(用語)に対する説明文(定義)を一緒に表示できる点が特徴です。代表的なブラウザでは、スタイルシートでデザインしなくても、上図のように「定義」(名称に対する説明文)がインデントされて表示されます。用語説明を記述する際に便利ですが、それ以外にも例えば「友達のウェブサイトを紹介するリンクリスト」などにも活用できるでしょう。上記のサンプルは、HTMLで作った「定義型リスト」をスタイルシートで装飾して使っています。このような「定義型リスト」は、HTMLのdl要素・dt要素・dd要素の3要素を使って簡単に記述できます。p要素ではなくdl・dt・dd要素を使うdl・dt・dd要素を使う方が、文章構造が表現できる上、ソースも読みやすくなる。この「定義型リスト」と(見栄え上)同様のことは、たとえばp要素で記述した段落をスタイルシートで装飾することでも作れます。「『名称』と『その説明文』」という構造が複数個連続する内容なら、「定義型リスト」を使った方が良いでしょう。その方が、HTMLソースを見ただけで記述内容の意味が把握しやすくなるメリットもあります。装飾のソースも見やすくなるdl・dt・dd要素に対して装飾する方が、スタイルシートソースも分かりやすい。dl要素・dt要素・dd要素の3要素を使って記述しておけば、スタイルシートも記述しやすくなります。p要素などを駆使して同様のデザインを作るには、クラス名を付加することで意味を区別できるように記述しておく必要があります。すると、クラス名の内容から装飾対象を判断しないといけなくなるため、ソースが読みにくくなります。dd要素にそれぞれ記述すればよいので、スタイルシートソースが分かりやすくなります。今回は、この定義型リストを作る方法と装飾例をご紹介いたします。次のページから、dl要素・dt要素・dd要素を使って「定義型リスト」を記述してみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。