HTML5における<li>タグの使い方

<li>要素は、リストの項目を記述する際に使用するための要素になります。「li」とは「list item」の略です。今回はHTML5における<li>タグの使い方についてご紹介します。

HTML5における<li>タグの使い方

<li>要素は、リストの項目を記述するための要素なので、<ul>や<ol>のリスト構造タグの、項目の設定のために使用します。番号なしのリストの記述<ul>で<li>を利用した場合、以下のようになります。

<ul>
<li>赤</li>
<li>青</li>
<li>黄色</li>
</ul>

以下は上記のタグの表示サンプルです。このように箇条書きの表現は、webサイトのコンテンツでもよく利用すると思いますが、・と<br>を使用してしまうと文章構造上ふさわしくありませんし、装飾にも不便です。必ずリストタグを利用するようにしましょう。

スクリーンショット 2016-06-21 14.20.06

親要素が、<ul>ではなく、<ol>の場合、value要素を利用してリストの項目の順序を設定することができます。<ol>要素は、番号付きリストを生成するものです。特に指定しないと、記述の順番通りに数字が反映されることになります。例えば、先ほどのリストを番号付きのリストに変更してみます。<ul>を<ol>に変えるだけです。

<ol>
  <li>赤</li>
  <li>青</li>
  <li>黄色</li>
</ol>

表示はこのようになります。

スクリーンショット 2016-06-21 14.26.38

先ほどのタグを、value属性を利用して、好きな整数を指定してみます。

<ol>
  <li value="5">赤</li>
  <li value="4">青</li>
  <li value="3">黄色</li>
</ol>

表示サンプルです。このように、指定した通りに表示することができます。

スクリーンショット 2016-06-21 14.28.23

基本的な<li>要素の使用方法は以上になります。<ul>タグや<ol>タグの使い方と合わせて覚えておくと便利でしょう。


購読

平日・毎朝更新中