リストの表現。「ul要素」、「ol要素」、「dl要素」について

Webページでは、箇条書きのリスト表現がよく使われます。箇条書きにすることで、重要なポイントを一目で把握することができます。そのため、HTMLにおいても、リストを表現する要素がいくつも用意されているわけです。

箇条書きといっても種類があり、同列に並べたものや番号を割り振ったもの、グループになっているものなどに分かれますね。ケースバイケースで、適切なものを使い分けるようにしましょう。

ここでは、リスト表現について解説をします。

 

序列の無い箇条書きを示す「ul要素」

いくつかの項目を同列に並べるには、ul要素を使用します。ul要素は単体で使用することは無く、li要素とセットで使うことになっています。<ul>が大きな箱になっていて、<li>~</li>でマークアップした箇所が一つ一つの項目です。

<ul>
<li>トマト</li>
<li>ニンジン</li>
<li>レタス</li>
</ul>

ul要素でマークアップすると、以下のように行頭が黒丸で表示されます。

ul

また、多くのサイトで目にするナビゲーションメニューも、ul要素で作られていますね。当サイトでも、ヘッダー画像の下に横並びのメニューがあります。これは、CSSで指定して、横並びの表示に変えているものです。

 

番号を割り振ってリスト化する「ol要素」

箇条書きにするときに、番号を付けたい場合がありますよね。たとえば、料理のレシピなどで、手順を紹介するときなどです。順番通りに進めていかないと上手くいかないですから、番号を割り振るのは大切です。

そういった場合は、ol要素を利用しましょう。ul要素と同じように、li要素とセットで使います。

<ol>
<li>トマト</li>
<li>ニンジン</li>
<li>レタス</li>
</ol>

ol要素でマークアップすると、以下のように行頭に数字が付きます。

ol

また、ol要素には、3つの属性を付けることが可能です。

 

type属性

行頭の数字を別のものに変えられる。<ol type=”a”>とすれば、a,b,c,dとなります。また、アルファベット大文字(A,B,C)、ローマ数字小文字(ⅰ,ⅱ,ⅲ)、 ローマ数字大文字(Ⅰ,Ⅱ,Ⅲ)の指定も可能。(ただし、HTML5では廃止されています。)

 

start属性

開始番号を指定することが出来る。<ol start=”5″>にすると、5,6,7と数字が割り振られます。

 

reversed属性

数字を降順で表示できる。リストが5つあれば、5,4,3,2,1と表示されます。

 
さらに、li要素には、「value属性」を付けることが可能です。これは、同じ数字を複数付けたいときに使います。たとえば、3の数字を2つ付けたいなら、<li value=”3″>とマークアップした箇所が3となります。そして、次からは4,5,6と順番通りに進んでいくわけです。

 

グループ化したリストを示す「dl要素」

タイトルと説明文のように、項目を1対のグループとしてリスト化したい場合もあります。たとえば、日付と更新情報であったり、Q&Aなどですね。そういった時には、dl要素を使用します。dl要素を使う時には、dt要素とdd要素をセットで使用しなければいけません。

つまり、<dl>が大きな箱で、<dt>が用語、<dd>が解説となります。

<dl>
<dt>2014年10月21日</dt>
<dd>プレス情報を更新しました。</dd>
</dl>
<dl>
<dt>2014年10月15日</dt>
<dd>人事異動についての報告</dd>
</dl>

dl要素でマークアップすると、用語の下にインデントされて解説が表示されます。

dl

サイトの更新情報などに使えるので、覚えておくと良いですね。他にも、利用できる場面は、多いと思います。

 

以上、色々なリスト表現を紹介しました。これらを上手く使いこなすことで、情報をキレイにまとめることが出来ます。読みやすいサイト構成になりますから、しっかりと使いこなせるようにしてください。

サブコンテンツ

このページの先頭へ