```Progateの道場編中級をやっております。レッスンラッパーという部分を作成していてエラーが発生しました。 見本コードは見ずに、見た目の近さだけでやっていたので、だいぶソースコードにズレがございますが、 見た目は完コピに近いと思っています。ですがエラーが出てしまい進めません。 どこで引っかかっているかわかる方、教えていただけないでしょうか。よろしくお願いします。 (その他、私の質問の仕方などで至らない点などご指摘いただけますと嬉しいです。) ### 発生している問題・エラーメッセージ どこで引っかかって前に進めないのかわからない。 エラーメッセージ ![イメージ説明](460fded8ca1f30942a9ecd3879e0fe1c.png) ### 該当のソースコード ```<!--大枠lesson-wrapper--> <div class="lesson-wrapper"> <!--中枠コンテナ--> <div class="container"> <!--ヘッディングメッセージ--> <div class="heading"> <h2>Learn Where to Get Started</h2> </div> <!--ここから4つを囲う「レッスンズ」--> <div class="lessons"> <!--各レッスン×4--> <!--HTML & CSS--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png" /> <p class="icon-title">HTML & CSS</p> </div> <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <!--jQuary--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png" class="lesson-icon" /> <p class="icon-title">jQuary</p> </div> <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <!--Ruby--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png" class="lesson-icon" /> <p class="icon-title">Ruby</p> </div> <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <!--PHP--> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png" class="lesson-icon" /> <p class="icon-title">PHP</p> </div> <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> <!--ここまでが各レッスン×4--> </div> <!--ここまでが中枠コンテナ--> </div> <!--ここまでが大枠レッスンラッパー--> ```以下、私のCSSです /*ここからレッスンラッパー*/ .lesson-wrapper { background-color: #f7f7f7; text-align: center; - height: 580px; } - .lesson-wrapper container { - width: 1170px; } .heading h2 { font-weight: normal; - text-align: center; - color: #5f5d60; - padding: 80px 0 50px 0; } - .lesson { width: 25%; - float:left; - margin: 0 auto; } - .text-contents { - width:80%; - font-size: 13px; - color: #b3aeb5; - margin: 15px auto 0 auto; - } - - /*ポジション調整*/ .lesson-icon { position: relative; } - .icon-title { - color: white; position: absolute; top: 44%; width: 100%; ```ここに言語名を入力 HTML & CSS ソースコード 下記のリンクは中級編の最後ですので、完成形が記載されております。 [リンク内容](https://prog-8.com/html/study/2/18#/54) ### 試したこと 見本では下記のようにインラインブロックになっていたので、こちらも試したのですが変化なしでした。その他は全て組み込んでいるので、足りないものは無いはずです。 .text-contents { width: 80%; display: inline-block; margin-top: 15px; font-size: 13px; color: #b3aeb5; } ### 補足情報(FW/ツールのバージョンなど)```ここに言語を入力 コード ```
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/09 10:51