progate 中級　lessonクラスの指示が反映されません

前提・実現したいこと

progate lesson 中級の、レッスンコンテンツを並べて表示させる過程です。
ここでは「コンテンツアイテムを横並びにさせる」「コンテンツアイテムのそれぞれは親要素に対し25%ずつ配分」といった指示をしようとしています。

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

しかし、どうやらこのlessonクラスの指示が反映されていないようです。

エラーメッセージ
```「lessonsの中に4つのdiv要素がありません」

### 該当のソースコード(HTML)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <!-- ここにコードを書いていきましょう -->
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p></p>
              </div>
              <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p></p>
              </div>
              <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p></p>
              </div>
              <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p></p>
              </div>
            </div>
            <p class="txt-contents"></p>
          </div>
        </div>
 
      </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

### 該当のソースコード(CSS)
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;
}

.header-right:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

/* lessonクラスのCSSを指定してください */
.lesson-icon {
  float:left;
  width:25%;
}




### 試したこと

・このレッスンに入る前の段階でずれがあるかと思い前段階まで戻ってみたが、やはり答えと多少は違う書き方をしているが基本的にエラーは発生していない。
・どこに原因があるか分からないため、このステージのコードを3回リセットして書き直したがやはり反映されない。

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

Widows 

### その他画像
![現状](56a15cd85cc2cfc6ae71d9ab1b9fd587.png)

### 追記

先ほど、問題解決したと登校してしまいましたが一部訂正です。
上記にあげた「25%配分」「横並び」に関しては解決したため、見た目は同じようになりましたが、エラーメッセージは依然として変わらぬようで…どこが違うのか困っています。
つきましては引き続き、ご教授願います。(提示コードも修正済みにしてあります)
早とちりしてすみません????

→追記に関しましても、無事解決いたしました。本当にありがとうございました！！

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

回答3件

こんにちは。

「コンテンツアイテムを横並びにさせる」「コンテンツアイテムのそれぞれは親要素に対し25%ずつ配分」といった指示をしようとしています
このlessonクラスの指示が反映されていない

とのことですが、この「コンテンツアイテム」は.lessonのことかと思います。
ところが、ご提示のHTMLの構造は以下のように、

html
1            <div class="lessons">
2                <!-- ここにコードを書いていきましょう -->
3                <div class="lesson">
4                    <div class="lesson-icon">
5                        <img src="https://prog-8.com/images/html/advanced/html.png">
6                        <p></p>
7                    </div>
8                    <div class="lesson-icon">
9                        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
10                        <p></p>
11                    </div>
12                    <div class="lesson-icon">
13                        <img src="https://prog-8.com/images/html/advanced/ruby.png">
14                        <p></p>
15                    </div>
16                    <div class="lesson-icon">
17                        <img src="https://prog-8.com/images/html/advanced/php.png">
18                        <p></p>
19                    </div>
20                </div>
21                <p class="txt-contents"></p>
22            </div>

.lessonsの下に.lessonがひとつだけという状況ですから、

css
1.lesson {
2float:left;
3width:25%;
4}

というCSSでクラスをつけても、ひとつしかない子要素が25%幅になるだけのことです。

解決方法ですが、問題とHTML構造を見直して、まず問題の意図を理解することをしてみてはいかがでしょうか？

投稿2020/12/14 05:53

Lhankor_Mhy

総合スコア36930

Lhankor_Mhy

2020/12/14 06:07

ご解決済みでしたか……失礼しました。

mitrasi

2020/12/14 06:13

ご回答ありがとうございます。そうですね、ずっとうまくいかず同じ個所ばかりにらめっこしていたので、視野が狭くなって根本的なところに気づけていなかったかもしれません。見直してみます。

mitrasi

2020/12/14 06:14

いえいえ、見た目はできましたが、エラーメッセージは依然変わりませんので引き続き、調査中でございます。

Lhankor_Mhy

2020/12/14 06:24

そうでしたか。ご健闘を祈ります。

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

こういう手の問題は領域に対し着色してみてください。そしてブラウザの開発ツールなどでどこまで範囲が及んでいて、どこまで範囲が及んでいないか確認してみるといいでしょう。

ちなみに自分が普通に貼り付けてテストしたところ、特に問題なさそうなので、それならCSSを読み込むパスが合っているか確認してみてください。

投稿2020/12/14 04:39

FKM

総合スコア3647

mitrasi

2020/12/14 05:25

デベロッパーで見てみましたが、使い方がいまいちわかっていないせいかやはりわかりませんでした???? 確認テストまでしていただき、ありがとうございました。

mitrasi

2020/12/14 05:30

floatがなぜか「右」指定なら反映されますが、「左」指定だと動かないようです。????

FKM

2020/12/14 05:36

該当ソースコードは外部のstyle.cssで間違いないわけですよね？だとするとその直下のBootstrapが干渉していないか調べてみてください（コメントアウトして、CSSが正しく表示されるかどうか）。

mitrasi

2020/12/14 06:11

はい、それは間違いありません。一応用語を調べながらコメントアウトなるものをやってみたつもりですが、私の理解力不足により、おそらく正しく間違い探しができていないように思います。せっかくご教授頂いたのに、申し訳ありません。

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

自己解決

おかげさまで、いろいろいじっていましたら、無事解決いたしました。

どうやら、指示自体が効いていないのではなく、本来「コンテンツ」そのものではなく、「コンテンツアイテム」に指示を出さなければいけないところ、「自分の実現したいこと」と「実際に指示しているコード」の点で相違があったために、思った反映が得られていないようでした。

ご教授、ご協力ありがとうございました。

投稿2020/12/14 05:40

mitrasi

総合スコア49

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

progate 中級　lessonクラスの指示が反映されません

前提・実現したいこと

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

関連した質問