【html】ulやliの中にdivやpやaをいれてもいいか解説
「ulの中にliをいれるのは知ってるけど、divをいれたらどうなるの？」
「liの中には何を入れていいの？」
ulやliの中にdivやpやaをいれてもいいか解説します。
目次
【結論】ul→liだけ li→なんでもOK
結論からいうと、ulとolの子要素はliしかおいてはいけません。liの子要素にはなんでもおけます。
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を置くことができます。
- リスト1
リスト2
- リスト3
<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タグを入れてみた例です。
- リスト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だけにしましょう。
ulにdivを入れたいときはどうする？
「このデザインを実現するにはliだけじゃできない！」
というときは下記の手段を検討しましょう。
ulの外側にdivを置く
ulの子要素にdivを置くのはいけませんが、兄弟要素に置くのはOKです。
- リスト1
- リスト2
- リスト3
<div>divタグ</div>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<div>divタグ</div>olを続きの番号にする
olにstart属性を指定することで任意の数字から始めることができます。
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
- リスト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やliの中にdivやpやaをいれてもいいのか？
- ulの子要素はliのみ
- liの子要素は何を入れてもOK
ulにdivを入れる代替案
- ulの外側にdivを置く
- olを続きの番号にする
- n番目のliを利用する
- ulのbefore,afterを使う
- div divにする
以上、ulやliの中にdivやpやaをいれてもいいか解説しました。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
