ProgateのHTML&CSS道場初級でつまづきました

前提

ProgateのHTML初級道場に挑戦しています。
ここに質問の内容を詳しく書いてくださ

実現したいこと

コードの修正

発生している問題・エラーメッセージ

h3に使うcssのコードは同じなのですがなぜか「学べるレッスン」は左寄せで「お問い合わせ」は中央揃えになってしまいます。

エラーメッセージ

該当のソースコード

HTML

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <div class="header">
11      <div class="header-logo">Progate</div>
12      <div class="header-list">
13        <ul>
14          <li>プログラミングとは</li>
15          <li>学べるレッスン</li>
16          <li>お問い合わせ</li>
17        </ul>
18      </div>
19    </div>
20    <div class="main">
21      <h1>HELLO WORLD<span>.</span></h1>
22      <h2>プログラムの世界へようこそ</h2>
23      <div class="contents">
24        <h3>学べるレッスン</h3>
25        <div class="contents-list">
26          <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg">
27          <p>HTML & CSS</p>
28        </div>
29        <div class="contents-list">
30          <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg">
31          <p>PHP</p>
32        </div>
33        <div class="contents-list">
34          <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg">
35          <p>Ruby</p>
36        </div>
37        <div class="contents-list">
38          <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg">
39          <p>Swift</p>
40        </div>
41      </div>
42      <div class="contact-form">
43        <h3>お問い合わせ</h3>
44        <p>メールアドレス(必須)</p>
45        <input>
46        <p>お問い合わせ内容(必須)</p>
47        <textarea></textarea>
48        <p>※必須項目は必ずお読みください</p>
49        <input class="contact-submit" type="submit" value="送信"/>
50      </div>
51    </div>
52    
53  </body>
54</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p,
5form, input, div {
6  margin: 0;
7  padding: 0;
8}
9
10body {
11  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
12}
13
14li {
15  list-style: none;
16}
17
18/* ここからCSSを記述してください */
19.header{
20  height:90px;
21  background-color:#26d0c9;
22}
23
24.header-logo{
25  color:#fff;
26  font-size:36px;
27  margin:20px 40px 20px 40px;
28  float:left;
29}
30
31.header-list li{
32  float:left;
33  color:#fff;
34  margin:33px 20px 33px 20px;
35}
36
37.main h1{
38  font-size:140px;
39}
40
41span{
42  color:#ff4a4a;
43}
44
45.main h2{
46  font-size:60px;
47}
48
49.main{
50   margin:100px 80px 100px 80px;
51}
52
53.contents{
54  margin-top:100px;
55  height:500px;
56}
57
58h3{
59  border-bottom:2px solid #dee7ec;
60  font-size:28px;
61  padding-bottom:15px;
62  margin-bottom:50px;
63}
64
65.contents-list{
66  float:left;
67  margin-right:40px;
68  margin-bottom:100px;
69}
70
71.contents-list p{
72  font-size:24px;
73  margin-top:30px;
74}
75
76input,textarea{
77  margin:10px 0px 30px 0px;
78  padding:20px;
79  font-size:18px;
80  width:400px;
81  border:1px solid #dee7ec;
82}
83
84.contact-submit{
85  background-color:#dee7ec;
86}

試したこと

text-alignなど試しましたがそれら自体が間違っている可能性があるのでわかりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2022/09/15 10:45

コードを見た感じXHTMLは無関係と思います。 https://teratail.com/tags/XHTML

tomato-c3b091

2022/09/15 10:52

申し訳ございませんでした。あせって調べもせずにHTMLの名前だけでタグ付けしてしまいました。

m.ts10806

2022/09/15 10:59

謝る必要はないと思います。（こちらは怒ってるわけじゃなく、解決後も考慮した正規化を望んでいるだけなので）

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

回答1件

ベストアンサー

'float:left;` で横並びしているため、これらの要素が通常フローから外れるため、後ろのレイアウトに影響を与えているのが原因ですね。

とりあえずの解決法は、下記の１行を追加すればいいでしょう。

css
1.contents{
2  margin-top:100px;
3  height:500px;
4  display: flow-root; /* 追加 */
5}

原因とか解決法の詳しい説明が知りたければ、「CSS クリアフィクス」などをキーワードに調べてみてください。

ただ、 'float`で横並びさせる方法は、10年以上前の古臭い技術です。

今なら、Flexboxレイアウト、Gridレイアウトという、シンプルかつ自由度の高い方法が実装されています。

このような古い技術を今更教えているサイトでの学習は適当に切り上げて、上記の最新の技術を教えているところで学習しなおした方がいいと個人的には思います。

投稿2022/09/15 12:35

hatena19

総合スコア33699

tomato-c3b091

2022/09/15 13:16

修正できました。ありがとうございます。 Progateの内容って古かったんですね、今から学びなおすにはHTMLに限らずおすすめのサイトとかってありませんか？重ね重ねすみません。

hatena19

2022/09/15 14:08

私の場合は、基本、独学ですので、とくにお勧めのサイトとかはないです。まずは、やりたいこと、作りたいもの、があって、それについてWEB検索して、とにかくやってみて、分からないことがでてきたら、また、WEB検索、という繰り返しですね。

tomato-c3b091

2022/09/15 16:07

ありがとうございます。いろいろ模索してみます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！