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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

535閲覧

Progateの道場コース、中級編3・レッスン一覧部分を作ろうがどうしてもクリアできません。。

chair

総合スコア25

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/28 05:35

編集2019/09/29 02:29

前提・実現したいこと

以下のコードなのですが、見本との見た目の違いがわからず、判定するとダメが出ます。
どうかご教示ください!

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

エラーメッセージ ```なし ### 該当のソースコード ```HTML ソースコード ``` <div class="lessons"> <h2>Learn Where to Get Started!</h2> <div class="lesson-icon" > <img src="https://prog-8.com/images/html/advanced/html.png"> <p class="lesson-name">HTML & CSS</p> <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p class="lesson-name">jQuery</p> <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p class="lesson-name">Ruby</p> <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p class="lesson-name">PHP</p> <p class="lesson-text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> ```CSS ソースコード ``` .top-wrapper{ background-image: url(https://prog-8.com/images/html/advanced/top.png); background-size: cover; color: white; text-align: center; } .container{ margin: 0 auto; width: 1210px; height: 630px; } .container h1{ font-size: 40px; letter-spacing: 10px; opacity: 0.7; padding: 16% 0%; } .container p{ position: relative; top: -185px; opacity: 0.7;} .signup{ position: relative; top:-140px; left: 160px; background-color: #239b76; } .facebook{ position: relative; top:-50px; left:-90px; background-color: #3b5998;} .twitter{ position: relative; top:-50px; right:90px; background-color: #55acee;} .btn{ color: white; padding: 10px; border-radius: 4px; opacity: 0.8; } .btn:hover{opacity:1.0; cursor: pointer; } .or{ position: relative; top:-100px; left: 70px; opacity: 0.7;} header{ background-color: rgba(34, 49, 52, 0.9); position: fixed; color: white; width: 100%; z-index:10; } .header-logo{ width: 124px; padding: 20px; } .login{ background-color: rgba(255, 255, 255, 0.3); position: relative; top: -25px; left: 930px; padding:25px; color: white; transition: all 0.5s; } .login:hover{ cursor: pointer; background-color: rgba(255, 255, 255, 0.5) } .lessons{ height: 580px; width: 1170px; } .lessons h2{ text-align: center; padding: 80px 0px 50px 0px; color: #5f5b60; font-size: 25px; font-weight: normal; } .lesson-icon{ position: relative; left:100px; float: left; width: 25%; } .lesson-text{ color: #b3aeb5; font-size: 13px; width: 80%; margin-top: -10px; } .lesson-name{ color: white; position: relative; top: -110px; left: -50px; text-align: center; } ### 試したこと 各要素のwidth、height、z-index等を変えたりしました。 ### 補足情報(FW/ツールのバージョンなど) https://1drv.ms/u/s!AvJuJnPewtW_gjy03xy_JOOQkQKj 判定結果の画像です。 多少の相違は許されるはずなのですが、なぜクリアできないのかさっぱりわかりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mari.rinn

2019/09/28 21:21

progateは不正解の場合、どこがダメなのかを赤枠で示してくれてると思うのですが、ついてませんか? ついてるなら、あなたの方の画像と見本の画像をアップされると答えを見つけやすいかと思います。 現在のあなたのコードだけでは正解との違いを比べようがなく答えを見つけにくいと思います。
guest

回答1

0

自己解決

よく見たら背景色が違っていました。
白に近い色の指定だったので気づきませんでした。
単純な見落としですいません。回答して頂きありがとうございました!

投稿2019/09/29 02:26

chair

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問