サーフボード

Top

liはどうつかうの?

はじめに

Webページを作る上で、リスト表示はよく使われます。その中でも重要なのが<li>タグ。<li>タグについて4つのポイントに分けて紹介します。

<li>タグとは?

<li>は「List Item」の略で、リストの中の一つ一つの項目を表すタグです。
必ず親タグ(<ul>や<ol>など)の中に書く必要があり、それぞれの項目を<li>で囲むことでリストになります。

See the Pen Untitled by 通事陽菜 (@ngknqcat-the-builder) on CodePen.

単独では使えない

<li>タグは、単体では使えません。必ず親タグとセットにして使います。親タグがないと、HTMLとしても構造的に正しくなく、表示が崩れることもあります。

入れ子で階層構造も作れる

<li>タグの中に、さらにリスト(<ul>や<ol>)を入れることで、階層のある構造も作れます。カテゴリやメニューを表現したいときに便利です。

See the Pen Untitled by 通事陽菜 (@ngknqcat-the-builder) on CodePen.

このように、<li>は中に別のリストを含めることで、柔軟な構造が作れます。

CSSで見た目の調整ができる

<li>タグは、CSSでマーカー(点や番号)を非表示にしたり、余白や文字スタイルを変えることができます。

See the Pen Untitled by 通事陽菜 (@ngknqcat-the-builder) on CodePen.

これにより、メニューリストなどの見た目をカスタマイズすることができます。

まとめ

<li>タグは、リストを作るときに必ず使う大事な要素です。

  • 項目を表すタグとして使われる
  • 必ず親タグが必要
  • 入れ子で複雑な構造にも対応
  • CSSでデザインも自由自在

コメント

コメント記入欄の上に表示するメッセージ

コメント記入欄の下に表示するメッセージ