ホームへ

【html】ulの中にdivやpやaをいれてもいいのか?

2022年08月31日

「ulの中にliをいれるのは知ってるけど、他のタグをいれたらどうなるの?」

ulの中にdivやpやaをいれてもいいのか?解説します。

【結論】崩れはしないが、よっぽどのことがない限り入れない

結論からいうと、ulの中(子要素)にli以外のhtmlタグがあっても崩れるわけではありません。

が、「ulの子要素はliだけ」というルールです。

よっぽどの理由がない限りはulの子要素はliだけにしましょう

※olもulと同様です。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

【基本】ulの子要素はliのみ

ul liは箇条書き(リスト)に使われるhtmlタグです。

ulはリストを囲う外側の要素であり、liは箇条書き「・」一つ当たりの要素です。

  • リスト1
  • リスト2
  • リスト3

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

ulの中(子要素)にはliしかいれてはいけないというルールになっています。

目の見えない方が使う読み上げソフトではulを見つけるとliを数え「○個の箇条書きです」と読み上げるものもあります。

これはulの中にはliしかないという前提があるからです。これが崩れてはうまく動かなくなってしまいます。

また、実際に「・」のある箇条書きだけではなく、同じ要素の繰り返しなどでもul liを使うことがあります。

「・」を消して、メニューやお知らせリストなどでよく使われます。

【基本】liの中は何を入れてもOK

一方でliの中には何のタグを入れても大丈夫です。divのように使えます。

ulの子要素にdivは置けませんが、孫要素(liの子要素)にはdivを置くことができます。

<ul>
    <li><div>リスト1</div></li>
    <li><p>リスト2</p></li>
    <li><a href="">リスト3</a></li>
</ul>

divとの違いと言えば、divは「display:block」であるのに対し、liは「display:list-item」であることです。

list-itemだと「・」が付きます。

とはいえ、「・」を消してしまえば「display:block」と変わりありません。

ulの子要素にdivを入れるとどうなる?

「ulの中(子要素)にはliしかいれてはいけない」というルールですが、このルールをやぶりulの子要素にdivをいれたらどうなるでしょう?

答えは「別に崩れない」です。

tableやtrの子要素にdivを入れると明らかに崩れ、表の形をなさなくなりますが、ulの場合は崩れません。

下記はulの子要素にいろいろなhtmlタグを入れてみた例です。

    divタグ
  • リスト1
  • リスト2
  • aタグ
  • リスト3
  • pタグ

<ul>
    <div>divタグ</div>
    <li>リスト1</li>
    <li>リスト2</li>
    <a href="">aタグ</a>
    <li>リスト3</li>
    <p>pタグ</p>
</ul>

ulの子要素にli以外のhtmlタグを入れたところで、崩れないし、犯罪じゃないし、ユーザーから怒られるわけではありません。(先輩や上司からは怒られるかもですが)

ただ、先述した通り「ulの中(子要素)にはliしかいれてはいけない」というルールがあります。ルールを無視するのであればhtmlを学ぶ意味がありません。

どうしてもというときでなければulの子要素はliだけにしましょう。

divを入れたいときはどうする?

「このデザインを実現するにはliだけじゃできない!」

というときは下記の手段を検討しましょう。

ulの外側にdivを置く

ulの子要素にdivを置くのはいけませんが、兄弟要素に置くのはOKです。

divタグ
  • リスト1
  • リスト2
  • リスト3
divタグ
<div>divタグ</div>
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
<div>divタグ</div>

olを続きの番号にする

olにstart属性を指定することで任意の数字から始めることができます。

divタグ
  1. リスト1
  2. リスト2
  3. リスト3
divタグ
  1. リスト1
  2. リスト2
  3. リスト3
<div>divタグ</div>
<ol>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ol>
<div>divタグ</div>
<ol start="4">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ol>

リストの数がいくつになるかわからないから任意指定できないようなときはあきらめて1からにしましょう

n番目のliを利用する

divもliも似たような性質の要素です。divはダメだけどliはいいのだから、そのliを使いましょう。

  • リスト1
  • リスト2
  • リスト3
  • タイトル
  • リスト1
  • リスト2
  • リスト3
<style>
.example>li:nth-of-type(4){
    list-style: none;
    margin: 1em 0 0 -1.5em;
}
</style>
<ul class="example">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>タイトル</li>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

n番目のliを指定するには「:nth-of-type(n)」を使います。

ただし、liは同じ形で繰り返されることに意味があるため、これも邪道かもしれません。

ulのbefore,afterを使う

before,afterは疑似要素であり、要素にCSSだけで子要素を追加できます。

一部のhtmlタグはbefore,afterを使えないのですが、ulは使えます。

使えるということは使っていいってことです。

  • リスト1
  • リスト2
  • リスト3
<style>
.example2::before{
    content: "タイトル";
    margin: 1em 0 0 -1.5em;
}.example2::after{
    content: "終わり";
    margin: 1em 0 0 -1.5em;
}
</style>
<ul class="example2">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

結局ulの中にli以外の子要素が入っちゃうのでグレーですが、divを入れるよりはマシかもしれません。

div divにする

<div>
    <div>リスト1</div>
    <div>リスト2</div>
    <div>リスト3</div>
</div>

それ、ul liじゃないとダメですか?

div divだといけませんか?

divの中には何入れてもOKです。

ulの中にdivを入れてでも作りたいデザインをdiv divで実現できるならhtmlのルール的には問題ありません。

divだらけのhtmlは素人っぽいですが、悩んで時間を浪費するくらいならdiv divで作ってしまいましょう。

【まとめ】ulの中にdivやpやaをいれてもいいのか?

【結論】崩れはしないが、よっぽどのことがない限り入れない

【基本】ulの子要素はliのみ

【基本】liの中は何を入れてもOK

divを入れる代替案

  • ulの外側にdivを置く
  • olを続きの番号にする
  • n番目のliを利用する
  • ulのbefore,afterを使う
  • div divにする

以上、ulの中にdivやpやaをいれてもいいか解説しました。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ