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

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

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

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

CSS

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

Q&A

解決済

3回答

1592閲覧

文字が中央によってしまいます

kondoh

総合スコア10

HTML

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

CSS

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

0グッド

2クリップ

投稿2019/06/12 09:34

編集2019/06/12 10:00

![イメージ説明]### 前提・実現したいこと

html及びcssを練習しています。
そこで<h>を使用した際中の文字が中央によってしまいます。

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

<h4>の文字が中央によってしまう →左寄せにしたい

該当のソースコード

<html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <div class="header"> <h1 class="header-title">Progate</h1> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> <div class="main"> <h1>HELLOWORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> <div class="contents"> <h3 class="contents-title">学べるレッスン</h3> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" /> <p class="contents-mokuji">HTML</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" /> <p class="contents-mokuji">PHP</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" /> <p class="contents-mokuji">Ruby</p> </div> <div class="contents-pic"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" /> <p class="contents-mokuji">Swift</p> </div> </div> <div class="form"> <h4 class="form-title">お問い合わせ</h4> <p class="contents-list">メールアドレス(必須)</p> <input> <p class="contents-list">お問い合わせ内容(必須)</p> <textarea></textarea> <p class="contents-list">※必須項目は必ずご入力ください</p> <input class="button" type="submit" value="送信"> </div> </div> </body> </html> <css> /* CSSのリセット(消さないでください) */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } li { list-style: none; } body{ font-family:"Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif; } /* ここからCSSを記述してください */ .header{ background-color:#26d0c9; height:90px; color:white; } .header-title{ font-size:36px; padding:20px 40px; float:left; } .header li{ float:left; font-size:20px; padding:33px 20px; } .main{ float:left; padding-left:80px; } .main h1{ font-size:140px; padding-top:100px; } .main span{ color:red; } .main h2{ font-size:60px; } .contents{ height:500px; } .contents-title{ font-size:28px; padding-top:100px; padding-bottom:15px; border-bottom:solid 2px #dee7ec; margin-bottom:50px; } .contents-pic{ float:left; padding-right:40px; } .contents-mokuji{ padding-top:30px; font-size:24px; padding-bottom:100px; } .form{ margin-bottom:100px; } .form-title{ font-size:28px; padding-top:100px; padding-bottom:15px; border-bottom:solid 2px #dee7ec; margin-bottom:50px; } input,textarea{ padding:20px; margin-bottom:30px; width:400px; border:1px #dee7ec solid; } .contents-list{ margin-bottom:10px; } .button{ color:#889ead; font-size:18px; background-color:#dee7ec; }

試したこと

・cssでpadding-left:0;
・align="left"

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

イメージ説明

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

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

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

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

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

m.ts10806

2019/06/12 09:38

CSSもご提示ください。 あと、現象が確認できる画面キャプチャもご提示ください。
kondoh

2019/06/12 10:08

cssとキャプチャを追加しました。 ご教示いただけますと幸いです。
guest

回答3

0

ベストアンサー

<h4>の「お問い合わせ」は、中央に寄っているわけではありません。 「float」の「クリア(解除)」不足により、「float」の影響で、意図せぬ配置になっています。

以下のCSSを追加してみてください。

CSS

1.contents{ 2 height:auto; /* ← または、任意の数値 */ 3 overflow: hidden; 4} 5

※「float」は「クリア(解除)」が必須です。

投稿2019/06/13 01:14

yoshinavi

総合スコア3521

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

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

0

h4を左寄せにしたい、ということであれば、
h4に設定しているクラス「.form-title」において、

text-align: left;

あたりを追加してみてはいかがでしょうか。

投稿2019/06/12 10:49

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kondoh

2019/06/12 10:55

ご回答いただき本当にありがとうございます!! 無事左寄せすることができました。
guest

0

CSSのどこかでtext-align:center;が指定されているのでは?

投稿2019/06/12 09:47

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問