「liの中には何を入れていいの?」ulやliの中にdivやpやaをいれてもいいか解説します。li→なんでもOK結論からいうと、ulとolの子要素はliしかおいてはいけません。liの子要素にはなんでもおけます。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。liは箇条書き(リスト)に使われるhtmlタグです。ulはリストを囲う外側の要素であり、liは箇条書き「・」一つ当たりの要素です。<li>リスト3</li></ul>ulの中(子要素)にはliしかいれてはいけないというルールになっています。目の見えない方が使う読み上げソフトではulを見つけるとliを数え「○個の箇条書きです」と読み上げるものもあります。これはulの中にはliしかないという前提があるからです。これが崩れてはうまく動かなくなってしまいます。liは「・」のある箇条書きだけではなく、同じ要素の繰り返しなどでも使うことがあります。「・」を消して、メニューやお知らせリストなどでよく使われます。【基本】liの中は何を入れてもOK一方でliの中には何のタグを入れても大丈夫です。divのように使えます。ulの子要素にdivは置けませんが、孫要素(liの子要素)にはdivを置くことができます。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タグを入れてみた例です。<p>pタグ</p></ul>ulの子要素にli以外のhtmlタグを入れたところで、崩れないし、犯罪じゃないし、ユーザーから怒られるわけではありません。(先輩や上司からは怒られるかもですが)ただ、先述した通り「ulの中(子要素)にはliしかいれてはいけない」というルールがあります。ルールを無視するのであればhtmlを学ぶ意味がありません。してもというときでなければulの子要素はliだけにしましょう。ulにdivを入れたいときはどうする?「このデザインを実現するにはliだけじゃできない!」というときは下記の手段を検討しましょう。ulの外側にdivを置くulの子要素にdivを置くのはいけませんが、兄弟要素に置くのはOKです。<li>リスト3</li></ul><div>divタグ</div>olを続きの番号にするolにstart属性を指定することで任意の数字から始めることができます。<li>リスト3</li></ol>リストの数がいくつになるかわからないから任意指定できないようなときはあきらめて1からにしましょうn番目のliを利用するdivもliも似たような性質の要素です。divはダメだけどliはいいのだから、そのliを使いましょう。<li>リスト3</li></ul>n番目のliを指定するには「:nth-of-type(n)」を使います。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。この記事を読むただし、liは同じ形で繰り返されることに意味があるため、これも邪道かもしれません。ulのbefore,afterを使うbefore,afterは疑似要素であり、要素にCSSだけで子要素を追加できます。一部のhtmlタグはbefore,afterを使えないのですが、ulは使えます。使えるということは使っていいってことです。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。この記事を読む結局ulの中にli以外の子要素が入っちゃうのでグレーですが、divを入れるよりはマシかもしれません。divだといけませんか?divの中には何を入れてもOKです。divで実現できるならhtmlのルール的には問題ありません。divで作ってしまいましょう。divにする以上、ulやliの中にdivやpやaをいれてもいいか解説しました。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。