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でデザインも自由自在
