今回のポイント
今回はある語句とそれに対する説明文を組み合わせてリスト化する要素について解説していきます。
少し難しいと思うので、例を挙げてみます。
以下のような記事の場合、定義リストを用いて表現します。
ぱくぱく
記事を量産するブロガー
ぱくぱくブログ
ぱくぱくが量産した記事で作成されたブログ
上記の記事を解説すると、「ぱくぱく」という語句は、「記事を量産するブロガー」であると定義しています。
また次の行からは、「ぱくぱくブログ」という語句は、「ぱくぱくが量産した記事で作成されたブログ」であると定義しています。
このように「○○」という語句は、「▲▲▲▲である」と定義したい記事を表現する場合に使用します。
定義リストを表す要素（dl要素）
ここからは定義リストである、ということを表す要素です。
先程の記事は単語を定義したい訳ですから、まずはdl要素で区切ります。
表現すると、以下のようになります。
<dl>
ぱくぱく
記事を量産するブロガー
ぱくぱくブログ
ぱくぱくが量産した記事で作成されたブログ
</dl>
定義リストの語句を表す要素（dt要素）
そして定義リストの語句を表す要素として、それぞれの語句をdt要素で区切ります。
<dl>
<dt>ぱくぱく</dt>
記事を量産するブロガー
<dt>ぱくぱくブログ</dt>
ぱくぱくが量産した記事で作成されたブログ
</dl>
これで語句は定義することが出来ました。
定義リストの説明文を表す要素（dd要素）
それでは次に定義リストの説明文を表す要素として、それぞれの説明文をdd要素で区切ります。
<dl>
<dt>ぱくぱく</dt>
<dd>記事を量産するブロガー</dd>
<dt>ぱくぱくブログ</dt>
<dd>ぱくぱくが量産した記事で作成されたブログ</dd>
</dl>
これで今回の記事に対して、語句と説明文を定義することが出来ました。
ブラウザでどのように表示されるか確認
では今回作成した記事が、どのようにブラウザ上で表示されるか確認してみましょう。
いかがでしょうか。
定義など使い慣れない方にとっては、とっつきにくい要素かも知れません。
しかし記事を作成していくうちに、様々な場面で使用することになります。
どんどん使用して慣れていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
