ulタグの使い方を覚える!【1分でわかるHTML編】

ulタグの解説HTML

こんにちはみっくです。

今回はHTMLのulタグについてのお話です。

みっく
みっく

このulタグは順序がないリストを作るタグです♪

ulタグ(ユーエルタグ)とは

みっく
みっく

「ul」はアンオーダード リストunordered list)で順序がないリストを表します。

みっく
みっく

アンオーダード順番を定められていないという意味ですね!

<ul> ~ </ul>で囲まれた範囲内にリストを定義できます。

<ul> ~ </ul> の中には、必ず <li> ~ </li> 入れてリストの項目を指定します。

liタグについては、以下の記事を参考にお願いします。

liタグの解説HTML liタグの使い方を覚える!【1分でわかるHTML編】
メモ

ulタグはブロックレベルです。

ulタグの表示例

HTML

<p>今日の買い物のリスト</p>

<ul>
<li>じゃがいも</li>
<li>にんじん</li>
<li>たまねぎ</li>
</ul>

ブラウザでの表示

今日の買い物のリスト

  • じゃがいも
  • にんじん
  • たまねぎ
メモ

上の例のように、特に順番の定めがないリストを定義する際に使用します。

みっく
みっく

一般的には、WEBサイトのナビゲーションもこのulタグで作る事が多いですね♪

ナビゲーション
みっく
みっく

上の図のように全ページに共通したナビゲーションはグローバルナビゲーションとも呼ばれます ♪

ulタグの難易度

みっくのレビュー
難易度
 (2)

シンプルなタグではありますが、ulタグの中にはliタグしか書けないなど制約がありますので、難易度は★2つレベルです。

みっぴー
みっぴー

私も覚えられました♪

ulタグの使用頻度

みっくのレビュー
使用頻度
 (4)

リストを定義する際以外にも、WEBサイトのナビゲーションでulタグはとてもよく使われますので、使用頻度は 4つレベルです。

さっぴー
さっぴー

ナビゲーションも含めると、多くのWEBサイトで使用されそうですね!

ulタグの重要度

みっくのレビュー
重要度
 (4)

使用頻度も高く、理解できるとHTMLの構造自体もわかりやすくなります。重要度は 4つレベルです。

みっく
みっく

ぜひ覚えてみましょう♪

まとめ

「ul」はアンオーダード リストunordered list)で順序がないリストを表します。

<ul> ~ </ul> の中には、必ず <li> ~ </li> 入れてリストの項目を指定します。

一般的には、WEBサイトのナビゲーションもこのulタグで作る事が多いです。

ulタグの中にはliタグしか書けないなど制約がありますので、難易度は★2つレベルです。

リストを定義する際以外にも、WEBサイトのナビゲーションでも使われますので、使用頻度は 4つレベルです。

使用頻度も高く、理解できるとHTMLの構造自体もわかりやすくなります。重要度は 4つレベルです。

みっく
みっく

これも知っている便利ですね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です