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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

815閲覧

高さ調整の仕方がわからない

sirokuro

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/03/03 06:39

編集2020/03/03 07:01

前提・実現したいこと

Progateという学習サイトのHTML&CSSの道場コース初級編という実践問題をやっており、下記画像の仕様書のようにお問い合わせフォームを作成したいのですが、仕様書と高さ?が合わないとエラー(補足欄掲載の画像の赤枠で囲まれている部分)が出るので解消したい。
仕様書

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <header> 11 <div class="headers"> 12 <div class="header-logo">Progate</div> 13 <div class="header-list"> 14 <ul> 15 <li>プログラミングとは</li> 16 <li>学べるレッスン</li> 17 <li>お問い合わせ</li> 18 </ul> 19 </div> 20 </div> 21 </header> 22 <main> 23 <h1>HELLO WORLD<span class="red">.</span></h1> 24 <h2>プログラミングの世界へようこそ</h2> 25 26 <div class="contents"> 27 <h3>学べるレッスン</h3> 28 <div class="content"> 29 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 30 <P> HTML&CSS </P> 31 </div> 32 <div class="content"> 33 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 34 <p>PHP</p> 35 </div> 36 <div class="content"> 37 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 38 <p>Ruby</p> 39 </div> 40 <div class="content"> 41 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 42 <p>Swift</p> 43 </div> 44 45 </div> 46 </main> 47 <footer> 48 <div class="otoi"> 49 <h3 class="oto-title">お問い合わせ</h3> 50 <p>メールアドレス(必須)</p> 51 <input> 52 <p>お問い合わせ内容(必須)</p> 53 <textarea></textarea> 54 <p>※募集項目は必ずご入力ください</p> 55 <input class="sousin" type="submit" value="送信"> 56 </div> 57 </footer> 58 </body> 59</html>

CSS

1CSS 2/* CSSのリセット(消さないでください) */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, 6form, input, div { 7 margin: 0; 8 padding: 0; 9} 10 11body { 12 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 13} 14 15li { 16 list-style: none; 17} 18 19/* ここからCSSを記述してください */ 20 ul li{ 21 float:left; 22 padding: 33px 20px; 23} 24 25.header-logo{ 26 float: left; 27 padding: 20px 40px; 28 font-size: 36px; 29 height: 90px; 30} 31 32.headers{ 33 height: 90px; 34 background-color: #26d0c9; 35 color:#fff; 36 margin-top: 0px; 37 clear:both 38 ; 39 40} 41 42h1{ 43 font-size:140px; 44 margin-top: 100px; 45 margin-right: 80px; 46 margin-left: 80px; 47} 48 49h2{ 50 font-size:60px; 51 margin-right: 80px; 52 margin-left: 80px; 53} 54 55.red{ 56 color: #ff4a4a; 57} 58 59h3{ 60 border-bottom: solid 2px #dee7ec; 61 font-size: 28px; 62 padding-bottom: 15px; 63 margin-top:100px; 64} 65 66.contents{ 67 height: 500px; 68 margin: 100px 80px; 69} 70 71 72.content{ 73 float: left; 74 padding-top: 50px; 75 padding-right: 40px; 76 padding-left: 0px; 77 } 78 79.content p{ 80 margin-top: 30px; 81 font-size: 24px; 82} 83 84.otoi{ 85 margin: 100px 80px; 86} 87 88.oto-title{ 89 font-size: 28px; 90 padding-bottom: 15px; 91 margin-bottom: 50px; 92 border-bottom: 2px solid #dee7ec; 93} 94 95input,textarea{ 96 width: 400px; 97 border: 1px #dee7ec solid; 98 padding: 20px; 99 margin-top: 10px; 100 margin-bottom: 30px; 101 font-size: 18px; 102} 103 104.sousin{ 105 background-color: #889eab; 106} 107 108

補足情報(FW/ツールのバージョンなど)

判定
マス目

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

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

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

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

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

m.ts10806

2020/03/03 06:43

CSSもマークダウンのcode機能適用してください。また「合わないとエラー」というのはHTMLにもCSSにもない仕様です。 なにかしら学習教材を使われているのでしたら明示してください。
dit.

2020/03/03 06:52

少し前に同じ質問を見た気がするのですが削除→再投稿でしょうか? Progateであればコース名や単元名等 他の人が見ても何をやっているのか特定できるようにしないと何が正解なのかわかりません。 更に有料コースだったりした場合、有料会員でないと中身が見れません。
sirokuro

2020/03/03 06:57

自分では削除してはいなかったのですが、なぜか質問が消えておりまして再投稿させてもらった形です。 いろいろ不備があり申し訳ないです。
guest

回答1

0

ベストアンサー

有料会員ではないので道場コースのお問い合わせの単元は受講できないのですが、完成物を確認することは無料会員でもできました。
ボタン(見本では.contact-submit、質問者さんのコードでは.sousin)に対するスタイルが違うかと思います。
背景を#dde7ec、文字色を#889eabにするような状態が正解かと思いますがいかがでしょうか。
ヒントの所に以下のTipsが記載されています。
仕様書に書かれたことだけでは判断できないようですのでご注意ください。

ページ制作に必要な情報が、仕様書に全て書かれているとは限りません。必要な情報が見当たらないときは、「要素の検証」を用いて見本のページの情報を参考にしましょう。要素の検証の使い方は、こちらから確認できます。

投稿2020/03/03 07:21

dit.

総合スコア3235

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

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

sirokuro

2020/03/03 07:27

ありがとうございます!! 判明したらとても単純なミスだったようで・・・高さじゃなく色でした・・・。 要素の検証・・使えるようにならないとですね…。勉強頑張ります。
dit.

2020/03/03 07:43

あ、前回の質問でも検証について指摘されていたんですね。 実際のサイトがどのように作られているのかの確認もできますが、自分が作ったものがどんな状態になっているのかの確認でもよく使います。 指定したはずのスタイルが効いていない…なんて時に、じゃぁ今どうなってるの?を調べることができるので今のうちに使えるようになるといいかなと思います。 Progateはたまに指定通りにしても間違いだといわれることがあるようで、その際は無視して進むことも視野に入れなければいけませんが、今回は提示の比較画像ですでに色が違っていたので高さではなく色が怪しいと思って確認をしていました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問