Q&A
分からないですね・・・もし、chromeでしたら該当箇所で右クリック→検証で開発者ツールが開くのでそれで比べてみるとどうでしょうか？
前提・実現したいこと
progateでコードについて勉強をはじめた初心者です。
どこに違いがあるのかまったく見当がつかないので、ご教授をお願います。
発生している問題・エラーメッセージ
ProgateでHTML&CSSの中級道場に挑戦しています。
トップ部分を作って完成させたのですが、判定が不一致になります。
コードが多少違くても、見た目が合っていれば正解になりますが
今回は次に進めず困っています。
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> <!-- ここでFont Awesomeを読み込んでください --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <!-- ここにコードを書いていきましょう --> <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE.</h1> <h1>LEARN TO BE CREATIVE.</h1> <p>Progateはオンラインプログラミング学習サービスです。</p> <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p></div> </body> </html><div class= "btn wrapper"> <a href ="#" class="btn signup">新規登録はこちら</a> <p>or</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>
ソースコード
/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* ここからCSSを書いていきましょう */
.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;
}
.container{
width: 1170px;
margin: 0 auto;
}
.top-wrapper h1 {
opacity: 0.7;
font-size: 45px;
letter-spacing: 5px;
font-weight: bold;
}
.top-wrapper p {
opacity: 0.7;
margin-bottom: 2px;
}
.signup{
background-color: #239b76;
margin-top: 18px;
margin-bottom: 15px;
}
.facebook {
background-color: #3b5998;
margin-right: 10px;
margin-top:15px;
}
.twitter {
background-color: #55acee;
}
.btn:hover {
opacity: 1;
}
.btn-wrapper p {
opacity: 0.7;
}
.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 4px;
}
.fa {
margin-right: 5px;
}
試したこと
Progateの解答コードを写ししましたが、判定不一致。
自分の画像と見本にずれが合ったので細かいずれは見た目で修正しましがやはり不一致。
Teratailで似たような質問がないか探しましたが見つけられませんでした。
他の方の質問の解答にCSSのbody｛｝と.container{}にheightを100％にしてみればと書いてあったので
それも試してみました。
ボタンのbackground-colorが薄いような気がしたので、opasityを0.8→0.9などの
調整もしましたが不一致です。
補足情報（FW/ツールのバージョンなど）
パソコン・プログラミング共に初心者ですので、説明不足などありましたら教えてくださると助かります。
よろしくおねがいします。
ここにより詳細な情報を記載してください。
Windows10 2019年製 バージョン1909
chromeを利用してます。検証デベロッパーツールでみてみたのですが、勉強してないコードがずらりと並んでいたのでしっかり確認はしていませんでした。これから見てみます。ありがとうございます。
コードはマークダウンのcode機能を利用してご提示ください。
Progateに関しては、こういう理不尽（）な問題も多いです。
若干ボタンの色が薄いきがする・・・程度なので、提示されたコードでは回答はできません。
ディベロッパーツールを使って違いを見比べるしかないです
マークダウンのｃｏｄｅ機能ですね。その機能について知りませんでした。
以後気を付けます。教えてくださりありがとうございます。
質問は編集できますので、適宜ご対応ください。
なるほど、理不尽な問題が多いのですね。
私もボタンの色が薄いのが問題かと思いopacity0.8から0.9にしてみましたが、不一致でした。
やはりデベロッパーツールで違いを見比べるしかないのですね。
ありがとうございます。
回答1件
0
ベストアンサー
見本のコードを写したと書かれていますが、中級編見てみたところ、
結構見本とCSS、HTMLが異なります。
下記違うところ。
CSS
1.top-wrapper h1 { 2 opacity: 0.7; 3 font-size: 45px; 4 letter-spacing: 5px; 5} 6.signup { 7 background-color: #239b76; 8 margin-top: 15px; 9 margin-bottom: 15px; 10} 11 12.top-wrapper p { 13 opacity:0.7; 14 margin-bottom:15px; 15} 16 17.facebook { 18 background-color: #3b5998; 19 margin-right: 10px; 20}
HTML
1<!-- 質問者さんのこーど--> 2<div class="top-wrapper"> 3 <div class="container"> 4 <h1>LEARN TO CODE.</h1> 5 <h1>LEARN TO BE CREATIVE.</h1> 6 <p>Progateはオンラインプログラミング学習サービスです。</p> 7 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。 8 </p> 9 10 <div class= "btn wrapper"> 11 <a href ="#" class="btn signup">新規登録はこちら</a> 12 <p>or</p> 13 <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 14 <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 15 </div> 16 </div> 17</div> 18 19↓ 20 21<!--見本のコード--> 22<div class="top-wrapper"> 23 <div class="container"> 24 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 25 <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 26 <a href="#" class="btn signup">新規登録はこちら</a> 27 <p>or</p> 28 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 29 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 30 </div> 31 </div>
投稿2020/02/13 02:42
編集2020/02/13 02:58総合スコア2341
はい、見本とまったく同じに写したのですが、判定不一致になりました。
そして一目で見てわかるほど、見本の図と自分の図がずれていたので、少しずつ値を直していったら上記に上げているコードの数値になりました。
Progateって何を目的として学ぶかってまた難しいんですけど、
見本と同じにできたならとりあえず満足していいと個人的には思ってます。
いや同じやないかーいって思うけれど判定バグで正解にならないことも多いですし。
同じコードを書くことがProgateの目的ではなくて、
『こういう書き方がある』『こういうCSS、タグがある』っていうのを学ぶことが目的だと思います。
ちゃんと学べたと思ったなら次に進んでもいいのでは？
申し訳ありません。HTMLは丸写しはしてませんでした。
<br>の機能についてまだ学習していなかったのでそのままスルーしてしまったようです。
それとProgateで習って来た通りにクラス付け、学習スライドをみましたが道場とはコードの書き方が違うようです。
今度こそ、丸写しし数値もあわせてみます。
まだ教わってないからと、スルーせずこの機能は何なのか、これからはしっかり調べてます。
これに気付かせてくれた
azuapricotさんをベストアンサーに選ばせていただきます。
ほかの皆様もご回答ありがとうございました。
<br>はただの改行タグですよ
疑問に思ったことは飛ばさないでその場で調べる癖をつけると納得できて身に付きやすくなるかとおもいます
あなたの回答
tips
プレビュー
