olタグとulタグ

HTMLのリスト挿入タグは２種類あります。

１つは、順番や手順を説明するための番号付きリスト。
orderd listの略で<ol>タグを使います。
リストのイメージは以下のような感じです。

1. 卵を割ってボールに入れる
2. よくかき混ぜる
3. 砂糖を大さじ１杯加える

よくかき混ぜる前に砂糖を入れた方が…というツッコミはさておき、上のサンプルのように、順序立てて説明する場合に使用するリストです。
また、olタグを使うとブラウザがデフォルトでリスト項目の前に番号をつけてくれます。（CSSでlist-style-typeと呼ばれるプロパティに該当します）
※ただし、この仕様が邪魔になることが多いので、リセットCSSを読み込ませて番号表示を消すこともよくあります。

用語解説：リセットCSS（Reset CSS）

そしてもう１つが、順番が関係ない、情報を列挙するためのリスト。
こちらはunorderd listの略で<ul>タグを使います。具体例を示しておくと、以下のような感じです。

• 卵
• ボール
• 砂糖大さじ１杯

このように、準備するもをリスト形式で一覧表示したり、順序が重要ではないリストとして使いたい場合に使用します。

ulタグを使ったリスト挿入では、ブラウザがデフォルトで番号のない○印などのマークを（勝手に）つけてくれます。
ただし、WordPressなどのCMSで何かしらのテーマをお使いの方は、テーマの方でリセットCSSを読み込んでいる可能性があるため、ol/ulタグを使ってもリストマークがつかない可能性があります。

POINT!
1. ・HTMLのリスト挿入タグには２種類ある！
2. ・順序の説明など、順番が重要なリストの場合はolタグを使う！
3. ・逆に順番が重要ではない、情報の列挙などのリストの場合はulタグを使う！

ol・ulタグの基本的な使い方

リストの種類と違いを把握したところで、今度は実際にHTMLでタグを挿入していきましょう。
olタグもulタグも、種類が違うというだけで使い方は同じです。

基本的な使い方としては、ul/ulタグの中にli（リスト）タグを入れるだけなのでとても簡単です。
例えば、前章でサンプルとして紹介したリストですが、HTMLは以下のようなシンプルな構造になっています。

  <ol>
    <li>卵を割ってボールに入れる</li>
    <li>よくかき混ぜる</li>
    <li>砂糖を大さじ１杯加える</li>
  </ol>

注意点ですが、ol/ulタグは開始はもちろん終了タグの省略はできないので、忘れずに終了タグで閉めるようにしましょう。
liタグは条件次第で省略可能ですが、省略すると逆にコードが見づらくなる場合もあるので、省略できる場合でも基本的には終了タグをつけた方が良いと思います。

また後の章（リストの入れ子）で詳しく説明しますが、基本的にul/olタグの中にはliタグしか入れられないという点は押さえておきましょう。
制限が厳しいol/ulタグとは対照的に、liタグの中には様々なタグを含めることができます。

ちなみにですが、リセットCSSを読み込ませていない環境で以下のようにHTMLコードを書き込んでしまうと…

  <ol>
    <li>1.卵を割ってボールに入れる</li>
    <li>2.よくかき混ぜる</li>
    <li>3.砂糖を大さじ１杯加える</li>
  </ol>

下のようになってしまうので、気をつけましょう。

1. 1.卵を割ってボールに入れる
2. 2.よくかき混ぜる
3. 3.砂糖を大さじ１杯加える

ブラウザがデフォルトで表示してくれるリストマークを利用する場合は、リストマークとなる数字や記号（・など）を入力しないでおくことがポイントになります。

POINT!
1. ・基本的な使い方は、ol/ulタグの中にリスト項目としてliタグを挿入する！
2. ・ol/ulタグは終了タグが省略できない（liタグは条件次第で省略可能）！
3. ・リセットCSSを利用しない場合、項目の前に番号や記号はつけないでおく！

リストの入れ子

ol/ulタグの中には基本的にliタグしか入れられません（scriptタグなどは例外）。
つまり、次のようにリストを入れ子にしたコードはHTML上、誤ったコードということになります。

    <!-- 間違ったリストの入れ子 -->
    <ul>
      <li>リスト１</li>
      <li>リスト２</li>
      <ul>
        <li>サブリスト１</li>
        <li>サブリスト２</li>
      </ul>
    </ul>

実は、上の間違った構造のリストの入れ子でも、表示エラーなどが起こるわけではありません。
ただ、やはりできるだけ正しいコードで記述するのが望ましいと言えます。

リストを入れ子にする…例えばulタグの中にulタグを入れたい場合、以下のようにコードを記述します。

    <!-- 正しいリストの入れ子 -->
    <ul>
      <li>リスト１</li>
      <li>リスト２</li>
      <li><!-- 終了タグで閉じない -->
        <ul>
          <li>サブリスト１</li>
          <li>サブリスト２</li>
        </ul>
      </li><!-- ここで終了タグ -->
    </ul>

liタグの中には色々なタグを入れることができるので、liタグの中にulタグを入れ込むことで、リストを入れ子にすることができます。
ちなみに、ブラウザによって挙動は異なりますが、入れ子にしたリストは以下のような表示になります。

メインメニュー＞サブメニューなど、リストを入れ子にしたい場合は少なくないので、リストタグの入れ子ルールはしっかり押さえておきましょう！

POINT!
1. ・ol/ulタグの中に直接ol/ulタグは入れられない！
2. ・liタグの中にol/ulタグを入れ込むことで、リストを入れ子にできる！

CSSでデフォルトのリストマークを消す

この記事カテゴリはHTMLなのでCSSにはあまり触れないでおきますが、デフォルトで表示されるリストマークを消すためのCSSだけ、ここでご紹介しておきます。

というのも、HTML/CSSを学び始めたばかりという方にとって、リストの挿入で最も困るのは、リストマークがデフォルトで勝手についてしまうという点だと思うからです。

リストマークを非表示にするには、list-style: none;という設定を加えたらOKです。

    <ul style="list-style: none;">
      <li>卵</li>
      <li>ボール</li>
      <li>砂糖大さじ一杯</li>
    </ul>

• 卵
• ボール
• 砂糖大さじ一杯

デフォルトでついてしまうリストマークさえ消してしまえば、自前で『・』や『◆』、『（１）』などを自由に付け足すことができるようになります。
CSSではリストマークを消すだけでなく他のリストマークに表示変更することもできるのですが、用意されているリストマークはそんなに種類が多くありません。
なので、リストマークを消して自前でテキストとしてマークや記号を入力した方が自由度が高く、便利だと個人的には思います。
（下のサンプル参照）

    <ul style="list-style: none;">
      <li>＊卵</li>
      <li>＊ボール</li>
      <li>＊砂糖大さじ一杯</li>
    </ul>

• ＊卵
• ＊ボール
• ＊砂糖大さじ一杯

POINT!
1. ・デフォルトでつくリストマークはCSSで消すことが可能！
2. ・ol/ulタグまたは個々のliタグにlist-style: none;という設定を加えればOK！
3. ・デフォルトのリストマークを消したら、自前でテキストとしてマークや記号をつけることもできる！