今回は、リストを作成の際に使用するul
・ol
・li
タグ使い方を解説したいと思います。
リストのマークのデザインを変更する方法など、ul
・ol
・li
タグを使うときに悩みやすいことも合わせて解説していきます!
ul・ol・liの使い方
ul
・ol
・li
を使用すると、HTMLでリストや箇条書きを作成することができます。
<ul>
<li>リスト1つめ</li>
<li>リスト2つめ</li>
<li>リスト3つめ</li>
</ul>
ul
(またはol
)を書く- その中に
li
を書く li
の中に各項目を書く
手順はこれだけです!
ul
(ol
)だけ、li
だけという使い方はしません。必ず両方必要だと覚えておきましょう!
ul…番号なしリスト
<ul>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ul>
- アンパンマン
- カレーパンマン
- しょくぱんまん
ul
でli
全体を囲った場合はこのようになります。デフォルトでは各項目の左に黒丸がつき、リストが縦に並びます。
ol…番号ありリスト
<ol>
<li>アンパンマン</li>
<li>カレーパンマン</li>
<li>しょくぱんまん</li>
</ol>
- アンパンマン
- カレーパンマン
- しょくぱんまん
ol
でli
全体を囲った場合はこのようになります。各項目の左に数字がつき、1から順に増えて行きます。li
が増えればその分、左側の番号も増えていきます。
ulとolの違いは?
- ul … 黒丸の箇条書き
- ol … 番号付きの箇条書き
違いはこの2点のみで、CSSでの指定方法など、取り扱い方法はほとんど変わりません。
ul
とol
2つをセットに考え、使い方を学ぶことをおすすめします!
実例:ulタグ
例えば、本来の箇条書きとして
- アンパンマン
- カレーパンマン
- しょくぱんまん
こういう風に単純な箇条書きとして使うこともできまずが、webページではみなさんが想像されている以上にいろいろなところに使われています!
今回は当ブログの中で、どこにul
・li
タグが使用されているか軽くご紹介しますね。
ナビゲーションメニュー
当ブログの右上、ヘッダー部分にあるナビゲーションメニューはul
・li
タグで作成されています。
メニュー全体がul
、各メニューがli
で囲まれています。
ヘッダーにあるナビゲーションメニューはul
が使用されていることが多いですよ!
カテゴリ・アーカイブ
サイドバー部分にあるカテゴリ・アーカイブもul
・li
タグで作成されています。
同様に、記事ページにアクセスすると表示される人気記事ランキングもul
・li
タグですよ!
メニュー全体がul
、各メニューがli
で囲まれています。
SNSシェアボタン
ブログの上下部に(PCだと画面左側にも)表示されるSNSシェアボタンもul
・li
タグで作成されています。
ボタン全体がul
、各ボタンがli
で囲まれています。
WordPressではul
・li
タグがたくさん使用されています。お気に入りのブログやサイトがあれば、ぜひデベロッパーツールを使用して確認してみてください!
実例:olタグ
ol
タグは、ul
タグと比較すると使う頻度が少ないタグです。何かの手順を紹介する時など、流れに沿って説明が必要な際にol
タグが使用されることが多いです。
当ブログでol
タグがどういった場面で使用されているかご紹介します。
手順の説明
ul
(またはol
)を書く- その中に
li
を書く li
の中に各項目を書く
この記事の上の方でも使用していますが、では主に手順を説明する際に使用しています。
「1.… 2.…」というデフォルトの状態でないのは、CSSで調整しているからですね。
リストの中にリストを作成する
HTMLではul
・ol
の中にul
・ol
を入れ、入れ子構造にすることができます。
入れ子リストの書き方
ul
・ol
タグの中にリストをつくる時は、li
の中にul
・ol
を入れて書く必要があります。
<ul>
<li>親:01</li>
<li>
親:02
<ul>
<li>子:01</li>
<li>子:02</li>
</ul>
</li>
<li>親:03</li>
</ul>
- 親:01
- 親:02
- 子:01
- 子:02
- 親:01
今回の例ではli
の中にul
を入れていますが、ol
で入れ子構造にしたい場合は同じようにli
の中にul
・ol
を入れます。
入れ子実例:目次
記事ページ内の目次ではul
タグの中にさらにul
タグが入っています。
入れ子実例:ナビゲーションバー
ナビゲーションメニューにあるサブメニューでは、ul
タグの中にul
タグが入っています。
ul・ol・liタグまとめ
ul
・ol
の中にli
を書くli
の数に制限はなしul
とli
で黒丸の箇条書きにol
とli
で番号付きの箇条書きに- HTMLでの書き方、CSSでの指定方法は基本的にどちらも同じ
- 入れ子構造にする場合は
li
の中にul
・ol
を入れて書く