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

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

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

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

CSS

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

Q&A

解決済

1回答

608閲覧

progate HTML中級編で見本とプレビューが違うが正解と判断

nomeMetro

総合スコア8

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/03 13:55

前提・実現したいこと

Progateの見本の様な結果を求めています。

progateの中級編の13レイアウトを整えように挑戦しています。
左のヒントを見てコードを書いてみましたが、見本と見比べると違い
画像と文字が重なったままの状態です
判定をすると正解と判断されます
イメージ説明説明](2f7a69d1bb6e24df216aa07308f4358f.png)

問題部分(予測)

下記にコードは載せましたが
cssの
.txt-contents {
width: 80%;
display: inline-block;
** margin-top: 20px;**←ここのmarginの値が違うのではと思います
font-size: 12px;
color: #b3aeb5;
}

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Progate</title> 7 <link rel="stylesheet" href="stylesheet試し.css"> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10 11<body> 12 <header> 13 <div class="container"> 14 <div class="header-left"> 15 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 16 </div> 17 <div class="header-right"> 18 <a href="#" class="login">ログイン</a> 19 </div> 20 </div> 21 </header> 22 <div class="top-wrapper"> 23 <div class="container"> 24 <h1>LEARN TO CODE.</h1> 25 <h1>LEARN TO BE CREATIVE.</h1> 26 <p>Progateはオンラインプログラミング学習サービスです。</p> 27 <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p> 28 <div class="btn-wrapper"> 29 <a href="#" class="btn signup">新規登録はこちら</a> 30 <p>or sign up with</p> 31 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 32 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 33 </div> 34 </div> 35 </div> 36 <div class="lesson-wrapper"> 37 <div class="container"> 38 <div class="heading"> 39 <h2>Learn Where to Get Started!</h2> 40 </div> 41 <div class="lessons"> 42 <div class="lesson"> 43 <div class="lesson-icon"> 44 <img src="https://prog-8.com/images/html/advanced/html.png"> 45 <p>HTML & CSS</p> 46 </div> 47 <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 48 </div> 49 <div class="lesson"> 50 <div class="lesson-icon"> 51 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 52 <p>jQuery</p> 53 </div> 54 <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 55 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 56 </div> 57 <div class="lesson"> 58 <div class="lesson-icon"> 59 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 60 <p>Ruby</p> 61 </div> 62 <p class="txt-contents">オープンソースの動的なプログラミング言語で、 63 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 64 </div> 65 <div class="lesson"> 66 <div class="lesson-icon"> 67 <img src="https://prog-8.com/images/html/advanced/php.png"> 68 <p>PHP</p> 69 </div> 70 <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 71 </div> 72 </div> 73 </div> 74 </div> 75 <div class="message-wrapper"> 76 </div> 77 <footer> 78 </footer> 79</body> 80 81</html>

css

1body { 2 margin: 0; 3 font-family: "Hiragino Kaku Gothic ProN"; 4} 5 6a { 7 text-decoration: none; 8} 9 10.container { 11 width: 1170px; 12 padding: 0 15px; 13 margin: 0 auto; 14} 15 16.top-wrapper { 17 padding: 180px 0 100px 0; 18 background-image: url(https://prog-8.com/images/html/advanced/top.png); 19 background-size: cover; 20 color: white; 21 text-align: center; 22} 23 24.top-wrapper h1 { 25 opacity: 0.7; 26 font-size: 45px; 27 letter-spacing: 5px; 28} 29 30.top-wrapper p { 31 opacity: 0.7; 32} 33 34.btn-wrapper { 35 margin: 20px 0; 36} 37 38.btn-wrapper p { 39 margin: 10px 0; 40} 41 42.signup { 43 background-color: #239b76; 44} 45 46.facebook { 47 background-color: #3b5998; 48 margin-right: 10px; 49} 50 51.twitter { 52 background-color: #55acee; 53} 54 55.btn { 56 padding: 8px 24px; 57 color: white; 58 display: inline-block; 59 opacity: 0.8; 60 border-radius: 4px; 61} 62 63.btn:hover { 64 opacity: 1; 65} 66 67.fa { 68 margin-right: 5px; 69} 70 71header { 72 height: 65px; 73 width: 100%; 74 background-color: rgba(34, 49, 52, 0.9); 75} 76 77.logo { 78 width: 124px; 79 margin-top: 20px; 80} 81 82.header-left { 83 float: left; 84} 85 86.header-right { 87 float: right; 88 background-color: rgba(255, 255, 255, 0.3); 89 transition: all 0.5s; 90} 91 92.header-right:hover { 93 background-color: rgba(255, 255, 255, 0.5); 94} 95 96.header-right a { 97 line-height: 65px; 98 padding: 0 25px; 99 color: white; 100 display: block; 101} 102 103.lesson-wrapper { 104 height: 500px; 105 padding-bottom: 80px; 106 background-color: #f7f7f7; 107 /* text-alignをcenterに指定してください */ 108 text-align: center; 109} 110 111.heading { 112 padding-top: 60px; 113 padding-bottom: 30px; 114 color: #5f5d60; 115} 116 117.heading h2 { 118 font-weight: normal; 119} 120 121.lesson { 122 float: left; 123 width: 25%; 124} 125 126/* lesson-iconクラスのCSSを指定してください */ 127 128.lesson-icon { 129 position: relative; 130 height: 80px; 131} 132 133/* lesson-iconの中の<p>のCSSを指定してください */ 134 135.lesson-icon p { 136 position: absolute; 137 top: 90px; 138 width: 100%; 139 color: white; 140} 141 142/* txt-contentsクラスのCSSを指定してください */ 143 144.txt-contents { 145 width: 80%; 146 display: inline-block; 147 margin-top: 20px; 148 font-size: 12px; 149 color: #b3aeb5; 150}

試したこと

.txt-contentsの
margin-topの値を大きくしてみた
結果見本と同じようにはなるのだが、判定ではエラーがでます

備考欄

大変長々と読みにくい文になって申し訳ありません。
お力添えをお願いしたします

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/03/03 14:01

出題元に聞いてください。 判定基準は誰も知りません
guest

回答1

0

ベストアンサー

progateが何を持って正解と判定しているのかはわかりませんが、

.lesson-icon { position: relative; height: 80px; }

この不要なheight指定を削除するのがスマートな解決方法のように思いました。

投稿2020/03/03 14:01

hwatarig

総合スコア461

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

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

nomeMetro

2020/03/03 14:30

ありがとうございます。 すいません。色々試しててその部分を追加してしまいました 無事に解決しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問