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

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

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

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

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

CSS

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

Q&A

解決済

1回答

906閲覧

初心者のHTML&CSSにて、2つのh3要素に同じCSSを適用したいのですが

fukutarou

総合スコア8

CSS3

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

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

CSS

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

0グッド

2クリップ

投稿2018/06/07 00:37

編集2018/06/07 01:06

前提・実現したいこと

プロゲートのHTML&CSSの道場コースで詰まっております...
お問い合わせ部分のh3の”お問い合わせ”の文字を、メイン部分の”学べるレッスン”と同じく左寄せにしたいです。
どちらにも"section-title"のクラスをつけています。
お問い合わせ部分のみに集中して、
.contactform h3 {text-align: left;}でやってみたのですが、”お問い合わせ”の文字が中央に寄ったままで、改善されませんでした。

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

HTMLはこちらです↓

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 <div class="header"> 11 <div class="header-logo">Progate</div> 12 <div class="head-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20 21 <div class="main"> 22 <h1>HELLO WORLD<span>.</span> </h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 <h3 class="section-title">学べるレッスン</h3> 25 <div class="contents"> 26 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 27 <p>HTML&amp;CSS</p> 28 </div> 29 <div class="contents"> 30 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 31 <p>PHP</p> 32 </div> 33 <div class="contents"> 34 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 35 <p>Ruby</p> 36 </div> 37 <div class="contents"> 38 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 39 <p>Swift</p> 40 </div> 41 42 43 <!--お問い合わせ--> 44 <div class="contact-form"> 45 <h3 class="section-title">お問い合わせ</h3> 46 <p class="contact">メールアドレス(必須)</p> 47 <input type="text" class="email"> 48 49 <p class="contact">お問い合わせ内容(必須)</p> 50 <textarea class="contact"></textarea> 51 <!--<input type="textarea" class="contact">--> 52 53 <p class="contact">※必須項目は必ずご入力ください</p> 54 <input type="submit" class="submit"> 55 </div> 56 </div> 57
</body> </html>

CSSがこちらです↓

CSS

1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10li { 11 list-style: none; 12} 13 14/* ここからCSSを記述してください */ 15body { 16 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 17} 18/*ヘッダー部分*/ 19.header { 20 background-color: #26d0c9; 21 height: 90px; 22 color: #fff; 23} 24.header-logo{ 25 float: left; 26 font-size: 36px; 27 padding: 20px 40px; 28} 29.head-list li { 30 float: left; 31 padding: 33px 20px; 32} 33 34/*メイン部分*/ 35.main { 36 margin: 100px 80px; 37} 38h1 { 39 font-size: 140px; 40} 41h2 { 42 font-size: 60px; 43 padding-bottom: 100px; 44} 45.section-title { 46 border-bottom: 2px solid #dee7ec; 47 font-size: 28px; 48 padding-bottom: 15px; 49} 50span { 51 color: #ff4a4a; 52} 53 54/*レッスン部分*/ 55.contents { 56 float: left; 57 padding-top: 50px; 58 padding-right: 40px; 59 margin-bottom: 100px; 60} 61.contents p{ 62 font-size: 24px; 63 padding-top: 30px; 64} 65/*お問い合わせ*/ 66input { 67 padding: 20px; 68 border: 1px solid #dee7ec; 69 margin-bottom: 30px; 70 margin-top: 10px; 71 width: 400px; 72} 73textarea { 74 padding: 20px; 75 border: 1px solid #dee7ec; 76 margin-bottom: 30px; 77 margin-top: 10px; 78 width: 400px; 79} 80.contact-form h3 { 81 margin-bottom: 50px; 82 text-align: left; 83} 84.submit{ 85 font-size: 18px; 86 color: #889eab; 87 background-color: #dee7ec; 88} 89

試したこと

色々試して見たのですが、根本的な理解が足りないため、どうにもなりません。
どこがどう間違っているか、教えていただけるとありがたいです。

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

こちらはプロゲート上でのプレビュー画面になります。
お問い合わせ以降が中央に寄ってしまっています。
イメージ説明

目標物はこちらです。↓
イメージ説明

こちらをローカル環境にて表示してみると全然違う表示です。これはどこか間違っているのでしょうか?↓
イメージ説明]

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

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

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

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

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

m.ts10806

2018/06/07 00:38

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象(エラーメッセージなども含む)」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1
m.ts10806

2018/06/07 00:39

「どうしたいか」は質問者さんしか知りません。その「どうしたいか」がない状態では回答は得られません。
m.ts10806

2018/06/07 00:43

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。また、タイトルには要件を書いて下さい。 https://teratail.com/help/question-tips#questionTips3-1 タイトルから質問内容が想像できないもの、タイトルと質問内容が食い違っているものはスムーズな回答を得られなくなります。 現在のタイトルだと「作業依頼」に近いものとして受け取られる可能性もあり、非推奨の質問内容となっています。質問は編集できるので、ゆっくり、着実に質問内容を修正していってください。
bariko

2018/06/07 00:52 編集

ローカルで質問者さんが提示されたコードを試してみましたが、何も問題はないように見えます。レスポンシブになっていなくて細長〜く表示される点が問題なのでしょうか?お問い合わせの部分も、問題なく表示できましたよ。
m.ts10806

2018/06/07 00:53

初心者アイコンがついているのでタイトルに「初心者の~」という文言はなくて良いですよ。あくまで要件”のみ”を記載すれば良いです。
m.ts10806

2018/06/07 00:54

</body> </html> がコードブロックからはみ出ているので同じコードブロック内におさめておいてください。編集画面ではリアルタイムプレビューが出ていると思いますので、そちらを見ながら調整してください。
m.ts10806

2018/06/07 00:55

CSSファイルは正しく読み込まれているのでしょうか?ブラウザ開発ツールのコンソールにエラーは出ていませんか?
bariko

2018/06/07 01:01

”お問い合わせ”の文字を、メイン部分の”学べるレッスン”と同じく左寄せにしたいとのことですが、こちらの環境ではちゃんと左寄せになってます。progate上で入力してやっているということでしたら、その画面をスクショしてこちらにのっけると回答者へ問題点が伝わりやすいかもしれませんよ。
yoshinavi

2018/06/07 01:04

私の環境ではレイアウトが破たんしています。floatの解除と、「.contact-form」のCSSを追加してみてください。
fukutarou

2018/06/07 01:07

みなさん本当にありがとうございます。修正が追いついてなくて、すみません。画像の方を補足に追加させていただきました。
guest

回答1

0

ベストアンサー

こうなっているってことですよね。一応、当方のChrome環境で確認できました。
イメージ説明

そもそもfloatが色々とおかしくなっているように思いますが・・・。

とりあえず下記のようにしました。

css

1.contact-form h3 { 2 margin-bottom: 50px; 3 text-align: left; 4}

css

1.contact-form { 2 margin-bottom: 50px; 3 clear:both; 4}

結果、下記のようになりましたが、いかがでしょうか。
イメージ説明

投稿2018/06/07 01:06

編集2018/06/07 01:08
m.ts10806

総合スコア80765

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

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

fukutarou

2018/06/07 01:14

clear: both;で解決しました。本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問