リストに関する要素

ニコニコ大百科:HTMLタグ一覧 HTMLタグの一覧 リストに関する要素

リストに関する要素一覧

• 順不同型のリストを作る<ul> <li>
• 順序付きのリストを作る<ol> <li>
• 複数階層のリストを作る<ul><ol> <li>
• 定義型のリストを作る<dl> <dt><dd>

クリックするとジャンプします

順不同型のリストを作る

↑

---

ulタグ（<ul>～</ul>）の中にliタグ（<li>～</li>）を用いて項目を作ることで、順不同型のリストを作成する事が出来ます。

ソースコード	表示結果
<p>天気の種類</p> <ul> <li>快晴</li> <li>晴れ</li> <li>曇り</li> <li>雨</li> <li>雪</li> </ul>	天気の種類 快晴 晴れ 曇り 雨 雪

CSSのlist-styleプロパティを用いることによって、リストマーカーの画像を変更する事が出来ます。

大百科自体のCSSによって、ul要素には line-height:1.55、padding:0.7em 0 0.5em 32px、list-style:url('/img/li1.gif') outside が指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

順序付きのリストを作る

↑

---

olタグ（<ol>～</ol>）の中にliタグを用いて項目を作ることで、順序のあるリストを作成する事が出来ます。

ソースコード	表示結果
<p>面積の広い国</p> <ol> <li>ロシア</li> <li>カナダ</li> <li>アメリカ</li> <li>中華人民共和国</li> <li>ブラジル</li> </ol>	面積の広い国 ロシア カナダ アメリカ 中華人民共和国 ブラジル

またolタグにstart属性（start="【リストの開始番号】"）を指定する事で、リストの開始番号を変更する事が出来ます。

start属性は非推奨属性なので出来るだけ使わないようにしたいところですが、今のところCSSでの代替記述手段はありません。

ソースコード
<p>ビーフストロガノフの作り方</p> <ol> <li>「牛」、牛を使う。</li> <li>牛のお肉を、なんかね、味が付いてるの。味付けるの。</li> <li>なんかね、あんね、外できっと食べたら、食べた事があるはず。</li> </ol> <p>中略</p> <ol start="8"> <li>あのさ、よくさ、映画とかの釜とかにも入ってるかもしんないなって感じ。</li> <li>わかんない、あっ、でもあれかも、シチューっぽいかも。</li> </ol>
表示結果
ビーフストロガノフの作り方 「牛」、牛を使う。 牛のお肉を、なんかね、味が付いてるの。味付けるの。 なんかね、あんね、外できっと食べたら、食べた事があるはず。 中略 あのさ、よくさ、映画とかの釜とかにも入ってるかもしんないなって感じ。 わかんない、あっ、でもあれかも、シチューっぽいかも。

またliタグにvalue属性（value="【指定した番号】"）を指定しても、リストの番号を変更する事が出来ます。それ以降の項目は、指定した番号からの連番となります。

value属性も非推奨属性なので出来るだけ使わないようにしたいところですが、こちらもCSSでの代替記述手段はありません。

ソースコード	表示結果
<p>FIFA世界ランキング（2013年3月）</p> <ol> <li>スペイン</li> <li>ドイツ</li> <li>アルゼンチン</li> <li>イングランド</li> <li>イタリア</li> <li value="26">日本</li> </ol>	FIFA世界ランキング（2013年3月） スペイン ドイツ アルゼンチン イングランド イタリア 日本

デフォルトのスタイルシートによって、ol要素には line-height:1.55、padding:0.7em 0 0.5em 32px、list-style:decimal outside が指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

複数階層のリストを作る

↑

---

liタグの中に更にulタグもしくはolタグでリストを作る事で、複数階層を持つリストを作る事が出来ます。

ただし作るとしても1,2階層でしょう。それ以上作るとややこしいし、ソース的に見栄えが悪いです。

ソースコード	表示結果
<ul> <li>北アメリカ 　<ul> 　<li>カナダ</li> 　<li>アメリカ 　　<ul> 　　<li>テキサス州</li> 　　<li>カリフォルニア州 　　　<ol> 　　　<li>ロサンゼルス</li> 　　　<li>サンフランシスコ</li> 　　　</ol> 　　</li> 　　</ul> 　</li> 　<li>メキシコ</li> 　</ul> </li> <li>中央アメリカ</li> <li>南アメリカ</li> </ul>	北アメリカ カナダ アメリカ テキサス州 カリフォルニア州 ロサンゼルス サンフランシスコ メキシコ 中央アメリカ 南アメリカ

デフォルトのスタイルシートによって、
１段目のul要素には line-height:1.55、padding:0.7em 0 0.5em 32px、list-style:url('/img/li1.gif') outside
２段目のul要素には line-height:1.55、padding:0.2em 0 0.1em 12px、list-style:url('/img/li2.gif') outside
３段目のul要素には line-height:1.55、padding:0.2em 0 0.1em 12px、list-style:url('/img/li3.gif') outside
１段目のol要素には line-height:1.55、padding:0.7em 0 0.5em 32px、list-style:decimal outside
２段目のol要素には line-height:1.55、padding:0.2em 0 0.1em 12px、list-style:upper-roman outside
３段目のol要素には line-height:1.55、padding:0.2em 0 0.1em 12px、list-style:lower-alpha outside
が、それぞれ指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

定義型のリストを作る

↑

---

dlタグ（<dl>～</dl>）の中に定義する言葉を示すdtタグ（<dt>～</dt>）、及び定義する言葉を説明するddタグ（<dd>～</dd>）を入れる事で定義型のリストを作る事ができます。

通常、dtタグで囲まれた文字は太字になり、ddタグで囲まれた説明部分の左側はインデントが下げられます。一つのdt要素に対して二つ以上のdd要素があってもかまいません。

ソースコード
<dl> <dt>ニコ厨</dt> <dd>ニコニコ動画以外にもニコニコネタを持ち出す人のこと。</dd> <dt>馴れ合い厨</dt> <dd>コメントで会話や雑談を始める人のこと。</dd> <dt>大百科厨</dt> <dd>今ここを見ているお前らのこと。</dd> <dt>認定厨</dt> <dd>明確な根拠も無いのに特定の人に対して厨のレッテルを貼るもののこと。</dd> <dd>すなわちこの項のこと。（再帰的定義）</dd> </dl>
表示結果
ニコ厨 ニコニコ動画以外にもニコニコネタを持ち出す人のこと。 馴れ合い厨 コメントで会話や雑談を始める人のこと。 大百科厨 今ここを見ているお前らのこと。 認定厨 明確な根拠も無いのに特定の人に対して厨のレッテルを貼るもののこと。 すなわちこの項のこと。（再帰的定義）

デフォルトのスタイルシートによって、dl要素には line-height:1.55、padding:0.7em 0 0.5em 32px が、dt要素にはfont-weight:bold、margin:0.2em が、dd要素にはmargin:0.2em、padding-left:1em が、それぞれ指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。