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

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

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

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

CSS

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

Q&A

解決済

1回答

1290閲覧

ProgateのHTML&CSS道場コース初級で文字が右寄りに表示されてしまうのを解決したい。

VX2

総合スコア15

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/04/14 13:40

下の画像の"お問い合わせ"の部分を左に寄せたいのですが画像の上部分のように中央右寄りになってしまいます。
text-alignやmargin-right:autoも試したのですがダメでした。
イメージ説明
以下にコードを載せます。

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

CSS

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

どうか回答よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

floatが解除されていなくて、画面狭めたときに.contact-formの位置などグチャグチャになります。
回り込み解除を適宜入れてあげましょう。(「回り込み解除」キーワードにやってみてください)

ただ、過去にも同じ質問見た気がします。
Progateのコースに関する質問は過去に多く投稿されているので、
質問前に調べてみると、見つかるかもしれません。

投稿2020/04/14 14:06

編集2020/04/14 14:07
m.ts10806

総合スコア80850

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

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

VX2

2020/04/14 14:19

回答ありがとうございます! 回り込み解除を入れることで無事に修正できました。
m.ts10806

2020/04/14 14:20

解決されたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問