ホームページにランキングを載せたいとか数字の見出しつきで手順を載せたい、項目をリスト表示でずらっと並べたいという場合に使うのがこのリストタグ。
縦に何かをずらっと並べたい時に使います。
リストとは
リストは何かをずらっと並べて表示する時に使うもののこと。
リストは大きき分けて以下の3種類あります。
- ul・や■等のマークが左端につくリスト
- olアラビア数字(1,2,3等)やローマ数字(I,II,III等)等の数字が左端につくリスト
- dl見出しとその説明を記述する場所が1セットになったリスト
勘の良い人なら気付いたかもしれませんが、上に3つ挙げた時に使われているのがリストです。
上のではolを使っています。左端に数字が表示されていますよね？
こんな風にリストでは、ただ文章を羅列するよりもすっきりと伝えたいことが表示できます。
効果的に使って、ページ内にメリハリをつけましょう！
マーク付きリスト[<ul><li></li></ul>]
ホームページにマーク付きリストを表示する時はulタグ、liタグを使用します。
以下灰色背景がサンプルソース薄緑背景が実際の見た目
<li>セブンイレブン</li>
<li>ローソン</li>
<li>ファミリーマート</li>
</ul>
- セブンイレブン
- ローソン
- ファミリーマート
3行のリストが表示されました。コンビニの名前が左側に・マーク付きで並んでいるはずです。
では、ここで使われている各タグについて説明していきます。
- ulタグ
- <ul>と</ul>のセットのこと。マーク付きリストを使いたい時には必ず書かなきゃいけないものと覚えておいてください。
- liタグ
- <li>と</li>のセットのこと。liタグは1項目をあらわしています。つまり、ulタグ内に<li>と</li>のセットが1つあれば1項目のマーク付きリスト、<li>と</li>のセットが2つあれば2項目のマーク付きリストということになります。
項目数に制限はありませんが、あまりに多すぎる見づらいので適度に分類しましょう。
実際にリストとして表示したい文字・画像などはこのliタグ内に書きます。
なお、liタグは<ul>と</ul>の間、又は以下で説明する<ol>と</ol>の間にしか書けません。
また、左のマークは「黒丸(・)」の他にも「白丸(○)」「四角(■)」等色々指定できます。
詳しくは、左メニューCSSリファレンスにあるリスト装飾をご覧ください。
数字付きリスト[<ol><li></li></ol>]
ホームページに数字付きリストを表示する時はolタグ、liタグを使用します。
以下灰色背景がサンプルソース薄緑背景が実際の見た目
<li>セブンイレブン</li>
<li>ローソン</li>
<li>ファミリーマート</li>
</ol>
- セブンイレブン
- ローソン
- ファミリーマート
3行のリストが表示されました。コンビニの名前が左側に数字付きで並んでいるはずです。
では、ここで使われている各タグについて説明していきます。
…と言いたい所ですが、実はulタグをolタグに書き換えればマークが数字になるだけです。
ですので、タグの説明はulタグの説明中のul部分をolに読み替えて見てください。
また、左の数字は「アラビア数字」の他にも「ローマ数字(I,II,III,…)」「漢数字(一,二,三,…)」「アルファベット(A,B,C,…)」「ひらがな(あ,い,う,…)」等色々指定できます。
詳しくは、左メニューCSSリファレンスにあるリスト装飾をご覧ください。
定義リスト[<dl><dt></dt><dd></dd></dl>]
ホームページにあるものの名前とその説明といった風なセットで表示したい時はdlタグ、dtタグ、ddタグを使用します。
以下灰色背景がサンプルソース薄緑背景が実際の見た目
<dt>セブンイレブン</dt>
<dd>日本のコンビニの草分け的存在かつ最大手のコンビニエンスストアチェーン。7と11を組み合わせた看板が目印。</dd>
<dt>ローソン</dt>
<dd>日本国内店舗数第2位のコンビニエンスストアチェーン。青い看板が目印。生鮮コンビニ「STORE100」や健康志向コンビニ「ナチュラルローソン」なども展開中。</dd>
<dt>ファミリーマート</dt>
<dd>日本国内店舗数第3位のコンビニエンスストアチェーン。一般的な店舗は緑の看板が目印。一部お洒落なデザインの店舗も。</dd>
</dl>
- セブンイレブン
- 日本のコンビニの草分け的存在かつ最大手のコンビニエンスストアチェーン。7と11を組み合わせた看板が目印。
- ローソン
- 日本国内店舗数第2位のコンビニエンスストアチェーン。青い看板が目印。生鮮コンビニ「STORE100」や健康志向コンビニ「ナチュラルローソン」なども展開中。
- ファミリーマート
- 日本国内店舗数第3位のコンビニエンスストアチェーン。一般的な店舗は緑の看板が目印。一部お洒落なデザインの店舗も。
3つのコンビニに関して、店舗名とその説明が表示されているかと思います。こんな感じで、用語説明とかリンク集等にも使えるタグです。写真やイラストのギャラリーで、dt部分に画像・dd部分に紹介文を書いても面白いかもしれません。
では、ここで使われている各タグについて説明していきます。
- dlタグ
- <dl>と</dl>のセットのこと。定義リストを使いたい時には必ず書かなきゃいけないものと覚えておいてください。
- dtタグ
- <dt>と</dt>のセットのこと。dtタグには説明対象になる文字・画像を書けば良いと思えば簡単かもしれません。ここで注意したいのは、dtタグとddタグは必ずセットで書きましょうということ。用語集で、「用語が書いてあるのに説明文が無い」とか「説明文があるのに用語が見当たらない」なんて変ですしね。
なお、dtタグは<dl>と</dl>の間にしか書けません。
- ddタグ
- <dd>と</dd>のセットのこと。ddタグには説明文・紹介文等のdt要素に対する補助的な役割のものだと思えば簡単かもしれません。同じく注意事項としては、dtタグとddタグは必ずセットで書きましょうということです。
なお、ddタグは<dl>と</dl>の間にしか書けません。(間違ってdtタグの中にddタグを書かないようにご注意を。)