heightを指定しなかったらレイアウトが崩れた

### 前提・実現したいこと
Progateの道場コース初級編をやっていたのですが、お問い合わせフォームを作る際、lessonsのheightをきちんと500pxと指定しないと、画像のように「お問い合わせ」の文字が中央に寄ってしまいます　その後、heightを指定してレイアウトを整えることができました
一体、どういう理由で上記のようなことが起こったのか気になります
教えていただきたいです

HTMLのコード

<!DOCTYPE html>

ヘディングのテキスト<div class="lessons">
### <h3>学べるレッスン</h3>

** <div class="lesson">**
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" >
<p>HTML & CSS</p>
** </div>**

<div class="lesson">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" >
<p>PHP</p>
</div>
<div class="lesson">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" >
<p>Ruby</p>
</div>
** <div class="lesson">**
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" > **
<p>Swift</p>
</div>
ヘディングの閉じタグ</div>

</div> <div class="message"> ### <h3>お問い合わせ</h3> <p>メールアドレス(必須)</p> <input> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <input class="submit" type="submit" value="送信"> </div> </body> </html>

CSSのコード

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}

body {
font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
list-style: none;
}

.lessons{}
.lessons h3{font-size:28px; padding-bottom:15px; border-bottom:2px #dee7ec solid; }
.lesson p{padding-top:30px; font-size:24px; } .lesson{float:left; padding-top:50px; padding-right:40px; padding-bottom:100px;}
.message {padding-left:80px; padding-right:80px; padding-bottom:100px;}
.message h3{font-size:28px; padding-bottom:15px; border-bottom:2px #dee7ec solid; margin-bottom:50px;}
input,textarea{width:400px; margin-top:10px; margin-bottom:30px; padding:20px; border:1px #dee7ec solid;}
.submit{font-size:18px; background-color:#dee7ec; color:#889eab;}

kai0310

2020/08/22 10:24

コードを提示する際はMarkDown記法を使用しましょう。 https://teratail.com/help/question-tips#questionTips3-7

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

回答1件

ベストアンサー

こんにちは。

コードがマークダウンで書かれておらず、かなりグチャグチャなので推測で回答します。

.lesson が float で配置されており、かつ、親要素の .lessons にブロック整形コンテキストがないため、.lessons の高さが潰れています。
（.lessons の高さをデベロッパーツールなどで調べてみると確認できます）
そのため、「お問い合わせ」というテキストが回り込まれています。

さて、.lesson の内部にある svg について、HTML&CSS と PHP のサイズが、その他のサイズより 1px 大きいため、小さな段差ができています。
なので、回り込まれた「お問い合わせ」テキストは、その段差に引っかかって、中央付近に配置されています。
（PHPの .lesson の右端と「お問い合わせ」の左端の位置を比べてみると確認できます）

ここで、「lessonsのheightをきちんと500pxと指定」すると、潰れた .lessons の高さが指定されますから、テキストが回り込まれなくなり、段差に引っかからなくなり、指定通りに左寄せとして表示される、ということになります。

ただ、その解決方法はアドホックなものであり、あまりお勧めできません。
clearfixを使うか、display:flow-rootとするのがいいでしょう。

ご不明の点がございましたら、コメントでご質問ください。

投稿2020/08/25 07:48