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

liタグの解説HTML

こんにちはみっくです。

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

みっく
みっく

このliタグはリストの項目を作るタグです♪

liタグ(リストタグ)とは

みっく
みっく

「li」はリストlist)でlist itemの略です。リストの項目を表します。

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

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

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

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

liタグの表示例

HTML

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

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

<p>今日の献立の手順</p>

<ol>
<li>タマネギをカットする</li>
<li>カットしたタマネギを炒める</li>
<li>炒めたタマネギに調味料をかける</li>
</ol>

ブラウザでの表示

今日の買い物のリスト

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

今日の献立の手順

  1. タマネギをカットする
  2. カットしたタマネギを炒める
  3. 炒めたタマネギに調味料をかける
メモ

上の例のように、ulタグもしくはolタグと合わせて使用します。

liタグの難易度

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

ulタグもしくはolタグの中に記述するシンプルなタグですので、難易度は★1つレベルです。

みっぴー
みっぴー

これはわかりやすいタグですね♪

liタグの使用頻度

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

ulタグもしくはolタグと合わせて必ず使用されますので 、使用頻度は 4つレベルです。

さっぴー
さっぴー

必ずセットなんですね!

liタグの重要度

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

ulタグもしくはolタグの中(直下)に記述できるタグは、このliタグのみですので、重要度は 4つレベルです。

みっく
みっく

ulタグとolタグの直下にはliタグしか記述できないのがポイントですね!

まとめ

「li」はリストlist)でlist itemの略です。リストの項目を表します。

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

ulタグもしくはolタグの中に記述するシンプルなタグですので、難易度は★1つレベルです。

ulタグもしくはolタグと合わせて必ず使用されますので 、使用頻度は 4つレベルです。

ulタグもしくはolタグの中に記述できるタグは、このliタグのみですので、重要度は 4つレベルです。

みっく
みっく

ulタグとolタグとセットで覚えてしまいましょう♪

コメントを残す

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