tn-soccerball
@tn-soccerball

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

HTML liタグについて

Q&A

<li class="current"><a href="kitchen.html">HOME</a></li>ここで改行
<li><a href="course.html">講座案内</a></li>ここで改行
<li><a href="lesson.html">レッスン</a></li>ここで改行
<li><a href="gallery.html">ギャラリー</a></li>ここで改行
<li><a href="access.html">アクセス</a></li>ここで改行
<li><a href="contact.html">お問い合わせ</a></li>ここで改行

上記の「ここで改行」の説明として以下のような説明があったのですが、いまいちよく「li 要素のデフォルトが display: block; だからです。」の部分が理解できないのですが分かりやすく教えていただける方がいましたらうれしいです。

「li は改行によって縦に並んでいるのではなく、 li 要素のデフォルトが display: block; だからです。」

自分の解釈としましては、以下です。
block要素は親要素の100%になるのでblock要素を並べていくと縦に記述されるから、改行が入る。

0

1Answer

display:block;が指定されている要素は「直前の要素が何であっても自身は新しい行で始まり、直後の要素が何であっても新しい行で始まるよう強制する(※「前後に改行が入る」と表現されます。)」として表示されます。
この仕様上、特別なことをしなければ要素の左右には他の要素が存在しないことになるためか、余白を埋めるように親要素の幅いっぱいに(≒ width:100%)表示されるのがデフォルトの挙動となっています。

block要素は親要素の100%になるのでblock要素を並べていくと縦に記述されるから、改行が入る。

つまり @tn-soccerball さんの解釈はむしろ逆で、正しくは「block 要素は勝手に改行されて縦に並ぶし勝手に幅が100%になる」といった説明になるでしょう。
試しに<li>width:50px;を指定してみてください。幅に関係なく(=右側の余白が残ってても)改行されることが分かります。

さて、ブラウザは用途に合わせて各タグに「横に続けて書かれる(inline)」か「縦に改行される(block)」かをデフォルトで設定しています。
<li> タグは一覧や箇条書きで使用されるタグですが、文書でそうした”リスト”を書くときは通常 横方向に続けて書かずに読みやすいよう1つ1つ縦に書くと思います。

[x]
・レッスン・ギャラリー・アクセス

[o]
・レッスン
・ギャラリー
・アクセス

つまり <li> は「前後に改行が入る」状態で使われるのが一般的なので display:block; をデフォルトとしています。
言い換えれば、いちいち指定しなくても <li> を使ったら勝手に改行表示してくれる方が便利だからそのように設定されている、ということですね。

「li は改行によって縦に並んでいるのではなく、 li 要素のデフォルトが display: block; だからです。」

よってご質問にある1文を書き直すとすれば、


<li> は html ファイル内にて複数行で記述する(改行する)ことで縦に並んだ表示を実現しているのではなく、ブラウザのデフォルトで<li>の stlye 指定が display:block;になっているので、仕様上ブラウザの画面では”ここで改行”の位置で勝手に改行されて表示されます。


といった具合になるでしょうか。

以下のように1行で全部書いても(改行しなくても)、ブラウザの表示では改行されることも併せてご確認ください。

<li class="current"><a href="kitchen.html">HOME</a></li><li><a href="course.html">講座案内</a></li><li><a href="lesson.html">レッスン</a></li><li><a href="gallery.html">ギャラリー</a></li><li><a href="access.html">アクセス</a></li><li><a href="contact.html">お問い合わせ</a></li>
4Like

Your answer might help someone💌