【HTML】ul ol liの使い方を覚えてリストを作れるようにする

【HTML】ul ol liの使い方を覚えてリストを作れるようにする

HTMLでは「ul」「ol」「li」のタグを組み合わせて使うことで、文章を箇条書きにしてリスト化する要素を作ることができます。

そして実際の表示ではul、ol、liのタグで箇条書きリストにすることで、文章の内容を分かりやすく伝えることができるという利点もあります。

またulとolのリストを入れ子にしたときの作り方で迷うことがないようにHTMLタグのul、ol、liの使い方を覚えておこうと思います。

 

 

HTMLタグのul ol liを使うときの知識

 

HTMLのタグ「ul」「ol」「li」の使い方はolとulでリストを表しliでolかulのリストの中のリスト項目を作り出します。

 

 

そしてulとolの直接の子要素は、必ずliタグを使います。liタグ以外のタグやテキストをulやolの子要素にすることはありません。

 

HTMLのタグ「ul」「ol」「li」の使い方の基本としては

 

  • ulタグとliタグをセット
  • olタグとliタグをセット

 

2パターンで使うという基本の使い方です。

 

 

ulタグは番号なしのリスト

 

ulタグは「Unordered List」の略「ul」と言います。

HTMLのulタグで作ったリストは非序列リストを作ります。

実際のリスト表示は以下の画像のように、文書の先頭に「順番のないリスト」を作り出します。

 

 

 

 

非序列リストや順番のないリストというのは、ulタグでリストを作ると、ulリストはリストの先頭に黒い点が自動で付きます。

そして序列がないリストの対照的なリストが番号の付いたリストです。

 

olタグは番号ありのリスト

 

olタグは「Ordered List」を略した名前です。実際のリスト表示は「順序のあるリスト」を作り出します。

先に説明したulの非序列リストに対してolタグは序列リストなのです。

下記の画像はolタグを使ってマークアップしたHTMLの表示です

 

 

 

 

 

 

olで作ったリストの順序は番号が連番になったリスト作成をすることができます。

ただulやolの要素だけではリスト作りは未完成で、ulやolの子要素になるHTMLタグを使う必要があります。

 

liタグはリストを作るulとolの子要素

 

上記で説明してきた「ulタグ」と「olタグ」の子要素に使うのが「liタグ」です。

liはulとol以外にもmenu要素の子要素にすることもできます。

 

ulやolはそれぞれのリストがどんな表現の形式にするかを表すことのできるタグでしたが、liタグは子要素としてリスト内の文章を箇条書きで表示するためのHTMLタグです。

そのためHTMLタグのliの開始タグと終了タグで囲われた文章がリスト形式になってブラウザに表示されます。

 

Advertisement

 

 

HTMLのul ol liタグでリストを作る

 

リストタグ「ul」「ol」「li」はブロックレベル要素です。ul、olタグの子要素にできるのはliのみです。

ulとolタグの下にliタグしか入れることができないことについて、少し間違えやすかったことが私にはありました。

ulとol要素の直下にはliしか入れられませんが、ulやolの下に書いたli要素には他の要素も入れられるということです。

li要素は内部にブロック要素、インライン要素のどちらも含むことができます。ほとんどのHTML要素を含むことができるため、自由度が高いです。

 

実際にどんな感じでulやolでリストを作ってli要素を入れていくかやってみました。

 

番号なしリスト

 

まずは番号なしリストの作り方の基本形です。

 

<ul>
 <li>はにゃらら</li>
 <li>ひにゃらら</li>
 <li>ふにゃらら</li>
 <li>へにゃらら</li>
 <li>ほにゃらら</li>
</ul>

 

ulタグを書いて番号なしリストを表します。そしてul要素の中にliタグを書きます。

 

 

そうするとブラウザの実際の表示ではliで箇条書きされた文章の先頭に黒い点が表示されて非序列リストを作ることができてます。

このリストの作り方がもっとも基本的な作り方です。

 

番号付きのリスト

 

そして番号付きのリストの基本形の作り方です。

 

<ol>
 <li>はにゃらら</li>
 <li>ひにゃらら</li>
 <li>ふにゃらら</li>
 <li>へにゃらら</li>
 <li>ほにゃらら</li>
</ol>

 

olタグを書いて、olの子要素にするliタグを書きます。単純に考えるとulとolはアルファベットの「uかo」を書き換えるだけですね。

そしてブラウザで表示を確認するとliで箇条書きにしたリストの文章に先頭には番号が連番になったリストを作ることができます。

 

 

 

olを使ったので順番のあるリストになります。

 

 

Advertisement

 

 

作り方の考え方

どんなリストにしたいのか?

 

  • リスト内容が繋がりのある内容ならolで番号をつけて順序をつける
  • 単一してる内容ならulで非序列のリストにする

 

といった考え方で使うことが多いです。リストの使い分けすることでHTMLドキュメントをブラウザが理解しやすくもなります。

 

リストを入れ子にする

 

次は少しリストの基本形の作り方を応用して、作ったリストを入れ子にしていく作り方です。

 

例えば、番号付きリストにする場合

 

<ul>
 <li>親リスト
 <ol>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
 </ol>
 </li>
</ul>

 

入れ子の基本としては、入れ子の一番上にするliタグを先に作ります。

そして親要素のliと子要素にするliの間にolで子要素が番号付きリストになるようにします。

そうしたらolの中にliタグでリストを作っていきます。

このとき一番上のliタグの閉じタグは子要素のolの閉じタグの後に書きます。

 

 

 

さらに進化させて親と子と孫まで作るときもやってみました。

 

<ul>        
<li>親御さん
 <ul>
  <li>お子さん</li>
  <li>お子さん</li>
  <li>お子さん
   <ul>
    <li>お孫さん</li>
    <li>お孫さん</li>
    <li>お孫さん</li>
   </ul>
  </li>
 </ul>
</li>
</ul>

 

HTMLをパッと見ただけでは難しそうです。

作り方のコツとしては、親のulで全部のリストを囲む。

そしてリストの階層を下げた最後のliタグの閉じタグをすぐに閉じないで、その下に階層にするリストを表すulかolを書く。

その中が、その階層の中身なのでliで文章を作る。

階層を下げる手前のliは閉じないことと、次の階層を始めるときはulかolで、その階層を番号付きにするか非序列にするかを書いてあげるということです。

 

 

 

Advertisement

 

ですが、その後調べていて違うパターンもあったので紹介です。

 

<ol>
 <li>父親</li>
 <ol>
  <li>長男</li>
  <li>次男</li>
 </ol>
 <li>母親</li>
 <ol>
  <li>長女</li>
  <li>次女</li>
 </ol>
</ol>

 

親リストの番号をつけて、それぞれの親のリスト項目を作るときの方法です。

この作り方の場合は親リストの閉じタグは、すぐに閉じてしまうパターンで作っていて、それぞれの親リストの番号と子になったliにも番号がいてます。

 

 

いろいろ応用ができるのだと実感しました。

 

リストをリンクする

 

作ったリストの項目をリンクする場合です。

作ったリストをグローバルメニューにするときにリンクさせるかと思います。

子要素のliにHTMLのaタグでhref属性にしてあげます。

 

<ul>
 <li><a href="#">あっちに遷移</a></li>
 <li><a href="#">こっちに遷移</a></li>
 <li><a href="#">あっちまで遷移</a></li>
 <li><a href="#">どこまで遷移</a></li>
</ul>

 

子要素のliのリスト項目ごとにリンクリストにしていくことができます。

 

CSSで点を消して画像にする

 

ulで作ったリストの先頭には自動で黒い点がつきますが、この点を消して代わりに画像にします。

このときはHTMLではなくCSSを使います。

 

リストの点を消す場合

 

ul {
 list-style: none;
}

 

list-style: none;にして黒ポチを消します。

ulやolをプロパティにしてあげるとリストの黒ポチが消えますが、liに対しても有効です。

 

リストの黒い点を画像にする場合

 

 

.icon {
 list-style: url(image.png);
}

 

list-style: url()

ul、olやliに属性つけたりして指定します。

 

HTMLカテゴリの最新記事