SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】ul、ol、liタグの使い方について!初心者の向け講座

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は、「【HTML】ul、ol、li要素の使い方について!」の講座になります。

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • ul、ol要素の違いについて知りたい方へ
  • liタグについて知りたい方へ

今回は「ul、ol、liタグ」についての解説になります。
htmlで箇条書きリストを使用する際に、ulolliの3つを使います。

HTMLタグul、ol、liの使い方について

リスト要素について

基本的な構造はリスト全体を、「ulまたはol」で囲みます。
各リストを囲む際には「li」タグを使用します。

実際に「ulol」の違いにつていご説明いたします。

ul要素について

ul順序のないリストを表示するときに使います。
リストのマーカーの初期値は黒丸になります。

HTMLファイル

See the Pen
GRJXxKG
by shu (@shu0325)
on CodePen.

ol要素について

ol順序のあるリストを表示するときに使います。
リストのマーカーの初期値は番号付になります。

HTMLファイル

See the Pen
dyoqmoZ
by shu (@shu0325)
on CodePen.

ulとolの違いについて

  • ul (Unordered List) 順序のないリスト、表示する際には黒丸で表示します。
  • ol (Oredered List) 順序のあるリスト、表示する際には番号付きで表示します。

ul、ol、liタグのルールについて

ulやolはブロックレベル要素です。
ul、ol要素の中に入れることができるのは「li」タグのみです。

ルールについて

正しい記述はルールに従ったul、ol要素の中に「li」タグが入っております。
誤った記述はul、ol要素の中に「p」タグが入っているためルールに背いています。

見出しや画像を入れたい場合があります。その際にはli要素の中に入れましょう。
liタグの中にはどんな要素も入れることができます。

div / h1~h6 / p / ul / dl / ol / li / span / img / strong / em など

HTMLファイル

See the Pen
yLNxEgG
by shu (@shu0325)
on CodePen.

ul、ol、liタグのルールについて

  • ul、ol要素の中は「li」タグのみになります。
  • 「li」タグにははどんな要素も入れることができます。

複数のul、ol要素を入れ子にする方法

画像のようにulの中にol要素入れることも可能です。
その際には、li/liタグの中にol要素を箇条書きにし入れることで入れ子にすることができます。

HTMLファイル

See the Pen
zYGJaJG
by shu (@shu0325)
on CodePen.

入れ子の使用例について

ulの使用例について
ホームページでみるナビゲーションのドロップダウンメニューに使用されることが多いです。
ナビゲーションをulで囲い、liタグの中を入れ子にし、ulの中に項目(CATEGORY)の内容を追加しております。

ナビゲーションのドロップダウンメニュー

olの使用例について
ホームページでみる目次に使用されることが多いです。
目次全体をulで囲い、liタグの中を入れ子にし、olの中に項目の内容を追加しております。

目次

liタグの中で改行する方法について

liタグの中で改行する方法

改行する際には2パターンあります。
liタグにbrタグを使用する。
liタグをブロック要素にしdisplay:blockを使用する。

liタグにbrタグを使用し改行する方法

brタグとは、改行をする際に使用するタグになります。

  • brタグを使用し
    改行しましょう。
  • 改行について
<ul>
	<li>brタグを使用し<br>改行しましょう。</li>
	<li>改行について</li>
</ul>

liタグにdisplay:blockを使用し改行する方法

spanタグで一部の文章を囲み、cssでdisplay:blockを指定し、
ブロックレベル要素に変換しています。

  • display:blockを使用し改行しましょう。
  • 改行について
<ul>
	<li>display:blockを使用し<span class="block_line">改行しましょう。</span></li>
	<li>改行について</li>
</ul>
span.block_line {display: block;}

関連記事

【CSS】list-styleプロパティについて!初心者の向け講座

初心者の向けに分かりやすく、type(表示方法)、position(位置の指定)、image(画像の指定)方法についてご説明しております。コンテンツ毎に分かりやすいポイントも書いております。

まとめ

今回はこれで以上です。
HTMLのみの記事になります、次回はCSSを適応させます。

POINT
  • ul要素は順序のないリスト、表示する際には黒丸で表示します。
  • ol要素は順序のあるリスト、表示する際には番号付きで表示します。
  • ul、ol要素の中に入れることができるのは「li」タグのみです。
  • 箇条書きは入れ子にもできます。
  • ulはナビゲーションなど、ol
    目次などで使用されることが多いです。
  • 改行する際には、brまたは
    display: blockを使用しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top