HTMLのフロートについて

皆さまお早うございます。

本日はhtmlについてお聞きしたいことがあります。
有識者方々のお知恵をおかしください。

下記のようなHTMLがあり、

<header>
  <p class="header-name">Progate</p>
  <div class="header-list">
    <ul>
      <li>プログラミングとは</li>
      <li>学べるレッスン</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</header>

この時、liの要素を横並びにしたい場合に、.header-listにfloat leftをかけても
横並びにならず、.header-list liにかけた場合意図した横並びになりました。

.header-name {
  float: left;
  font-size: 36px;
  margin: 20px 40px;
}
.header-list{
  margin: 33px 20px;
  float: left;
}
これだとliは
li
li
li
になる。

.header-name {
  float: left;
  font-size: 36px;
  margin: 20px 40px;
}
.header-list li{
  margin: 33px 20px;
  float: left;
}
これだとliは
li li li 
になる。

といった表示になってしまいました。

結果的に.header-list ilとしてfloat leftをかけたら上手く行ったのですが、
この原理仕組みが良くわからず、理解しないままなのも釈然としないので
思い切って質問させて頂きました。
結構悩んでしまったのでfloatの動き？的な物を解説に交えて頂けると助かりますm(__)m
横並びにする、とリファレンスにはあっても今一頭がパットしません･･････。
要素にliを指定すると、display属性がlist-itemになりますが、
このlist-itemというものが関係しているのでしょうか？
list-itemはブロック要素ですよね？高さを持つブロック要素が、floatを
与える事でインライン的な扱いになっているという事なんでしょうか？

以上、稚拙な質問で申し訳ございませんが、ご指導ご鞭撻のほど宜しくお願い致します。

Daregada

2020/06/21 19:37

ul要素の内容に直接div要素は書けません。

nedekee

2020/06/21 19:44

Daregada様ご回答有り難う御座います。ご指摘の通り、記載が間違っていたので早速修正させて頂きました。 >>ul要素の内容に直接div要素は書けません。ただ、こちらのルールは存じ上げなかったので、重ねて有り難う御座います。

m.ts10806

2020/06/21 20:22

実際のCSSを提示してください

nedekee

2020/06/22 07:23

m.ts様実際のコードに修正いたしました。なおDaregada様に既にご回答を頂いた内容で解決致しましたので、ご確認などは不要で御座います。ご指摘有り難う御座います。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、float: left;やfloat: right;は、単純に「指定された要素を横並びにする」命令ではありません。

セレクターで指定された要素が浮動化(float)した結果、通常の配置フローから外れ、後続の要素に含まれるテキストの行ボックスが浮動化した要素と重ならないように配置される結果、「横にまわりこんでテキストが表示される」ような効果が得られます。

行ボックスって何? みたいなことは、以下のリンクを参照。
視覚整形モデル - CSS: カスケーディングスタイルシート | MDN

今回、対象のul要素に含まれるli要素を横並びにしたいのであれば、それらすべての(厳密に言えば、最後のひとつ以外の)li要素を浮動化しないといけないので、

CSS
1.header-list li {
2  float: left;
3}

とする必要があります。

いまどきのWebページでは、素直にflexboxを使ってください。範囲がわかりやすいように付けたborderは、本来は不要です。

CSS
1.header-list ul {
2  display: flex;
3  border: green dotted 1px;
4}
5
6.header-list li {
7  /*float: left;*/
8  list-style-type: none;
9  border: red solid 1px;
10}

あと、提示されたHTMLがめちゃくちゃです。質問するときには気をつけましょう。
(その後修正されたので、実際の内容は削除)

投稿2020/06/22 00:25

編集2020/06/22 07:25

Daregada

総合スコア11990

nedekee

2020/06/22 07:36

Daregada様ご回答有り難う御座います。分かり易いご説明有難う御座います。ご指定のCSSの適用でも期待する横並びの結果となりました。 floatの場合、(最後以外の)横並びさせたい全ての要素に適用が必要なのですね。そうなってくるとoverflow: hiddenやclearfixといった回り込み解除の部分で少しこんがらがりますが色々調べてまた別途質問させて頂きます。 flexboxやglidレイアウトについては使うべきと聞いたことはありますが、基礎的な部分から学んでいきたいので、まずはボックスモデルとfloat自体を自分なりに理解出来たら改めて使っていきたいと思います。この質問に関してはBAとさせて頂きます。有り難う御座いました！

行動規範の内容に同意します