HTML・CSS:リストの作成・項目の作成をする、ulタグ・olタグ・liタグ

スポンサーリンク

ulタグ・olタグ・liタグとは

ホームページを作成していると、ナビゲーション(メニュー)の作成やリストの形式で何かを表示させたいことも多々あると思います。そんなときに使用するのがこのulタグ・olタグ・liタグになってきます。

ulタグとは

<ul>タグとは番号の付かないリストを作成します。

  • こんな感じで
  • リストを作成しまーす

こちらのコードの中身はこんな感じです。↓

<ul>
 <li>こんな感じで</li>
 <li>リストを作成しまーす</li>
</ul>

<ul>タグとはこのような箇条書きリストなのですが、このような番号なしリストのことを非序列リストと呼びます(なお全然覚える必要はなし)
ちなみに、<ul>タグだけではリストを作成することができず、必ずセットで<li>タグを使用します。

olタグとは

<ol>タグは番号付きのリストを作成することができます。

  1. このように
  2. 番号が付いたリストを
  3. 作成できます

上の例のコードはこんな感じになっています。↓

<ol>
 <li>このように</li>
 <li>番号が付いたリストを</li>
 <li>作成できます</li>
</ol>

<ol>タグの使用頻度はそれほど高くはありませんが、例えば操作の手順道順の説明などに使用します。<ol>タグに関しても必ずセットで<li>タグを使用します。

liタグとは

<li>タグ単独で使用することはないタグで必ず親要素が存在します。これまでの例で行くと<ul>タグ(箇条書きリスト)だったり<ol>タグ(番号付きリスト)だったりです。
<li>タグの働きと言うとリストの中身を作成するタグで、これに囲まれている部分がリストの中身になります。これが増えるだけリストの項目も増えるということです。

<ul>
 <li>liタグを使えば使うほど</li>
 <li>リストの項目が増殖していくぞ!</li>
 <li>このようにね!!</li>
</ul>
     
  • liタグを使えば使うほど
  •  
  • リストの項目が増殖していくぞ!
  •  
  • このようにね!!

HPのメニューの作成

HPによくあるメニューの作成にこのリストのタグを使用することもあります。それについて詳しく知りたいぞという方はこちらの記事を参照ください。↓

準備中…

タイトルとURLをコピーしました