HTML

本日はHTMLのいくつかあるリストについて説明したいと思います。


まずそれぞれのタグの説明

<ul></ul> : (unorder list) 項目の順序があまり大きな意味を持たない、箇条書きのリストを表す。

<ol></ol> : 順序の決まったリスト、数字連番がついたリストを表す。

<li></li> : (list item) リスト項目を表す。ulやolのブロック要素の中に入れることでリストを作成していく。





ざっくりした使い方と表示

ul : 箇条書きリスト
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ruby</li>
    <li>PHP</li>
</ul>

表示結果
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Ruby
  • PHP

ol : 連番付きリスト


<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ruby</li>
    <li>PHP</li>
</ol>

表示結果

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery
  5. Ruby
  6. PHP






基本的なリストはこんな感じです。
他には

<dl></dl> :(description list) 名前と値のグループからなるリスト。
<dt></dt> : (description term) 名前。用語や文章を表す。dlの中に複数入れられる。
<dd></dd> : (description, definition) 用語や文章の説明をする。dlの中に複数入れられる。

<dl>
    <dt>5月12日(金)</dt>
    <dd>test更新 1回目</dd>
    <dt>5月12日(金)</dt>
    <dd>test更新 2回目</dd>
</dl>

表示結果
5月12日(金)
test更新 1回目
5月12日(金)
test更新 2回目


<dfn></dfn> : 定義語を示す
<dl>
    <dt><dfn>ゴールデンウィーク</dfn></dt>
    <dd>4月末から5月初めにかけての大型連休</dd>
    <dt><dfn>シルバーウィーク</dfn></dt>
    <dd>秋の大型連休</dd>
</dl>

表示結果


ゴールデンウィーク
4月末から5月初めにかけての大型連休
シルバーウィーク
秋の大型連休





などなど、基本的には<ul>を使うことが多いですが、覚えておいても損はないかと思います。


本日はここまでとなります。最後まで閲覧していただき、ありがとうございます。