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

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

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

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

CSS

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

Q&A

解決済

3回答

682閲覧

html,cssで表示崩れが起きてしまう

tsr

総合スコア9

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/28 14:39

編集2019/09/01 01:11

今Progateで勉強しているのですが、よくわからない点があったので質問させてください。

以下のHTMLコードにおいて、helloが3つ並んでいるところなのですが、
1つ目だけなぜかページの真ん中に表示されて、
2つ目以降は左寄せで表示されます。

私の想定では、全部左寄せで表示されるイメージだったのですが...

ちなみにCSSでコメントアウトしている .mainのpaddingを行うと、全てちゃんと左寄せで表示されます。

基本的な質問で申し訳ありませんが、よろしくお願い致します。

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'> 12 Progate 13 </div> 14 <div class='header-list'> 15 <ul> 16 <li>プログラミングとは</li> 17 <li>学べるレッスン</li> 18 <li>お問い合わせ</li> 19 </ul> 20 </div> 21 </div> 22 <div class='main'> 23 <p>hello</p> 24 <p>hello</p> 25 <p>hello</p> 26 </div> 27 </body> 28</html>

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 10body { 11 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 12} 13 14/* ここからCSSを記述してください */ 15.header { 16 /*background-color: green;*/ 17 background-color: #26d0c9; 18 height: 90px; 19} 20 21.header-logo { 22 font-size: 36px; 23 padding: 20px 40px; 24 color: #fff; 25 float: left; 26} 27 28.header-list { 29 color: #fff; 30} 31 32.header-list li { 33 float: left; 34 list-style: none; 35 padding: 33px 20px; 36} 37 38.main { 39 /*padding: 80px 100px;*/ 40} 41.copy-container h1 { 42 font-size: 140px; 43} 44 45.copy-container h2 { 46 font-size: 60px; 47} 48 49.copy-container span { 50 color:red; 51}

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

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

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

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

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

m.ts10806

2019/08/28 21:24

タイトルは要件を記載してください。汎用的すぎるタイトルだと何が問題なのか分からないのかが伝わりません。あとから見直したときに自身も何が問題だったか分からなくなります。 もう少し質問内容に寄せてください。
tsr

2019/09/01 01:12

申し訳ありませんでした。 今後気をつけるようにします。 参考のリンクまで貼っていただき恐縮です。
guest

回答3

0

.header-logo がfloatされている上にはみ出ていて、そこに引っかかっています。
floatは適切にclearする必要があります。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

投稿2019/08/28 14:49

kei344

総合スコア69364

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

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

tsr

2019/09/01 01:15

回答していただきありがとうございます! デベロッパーツールも存在しかしらなかったので、とても勉強になりました。
guest

0

そちらのスクリーンショットを載せていただけませんか?
こちら(Firefox Quantum Developer Edition 70)では,状況が再現しませんでした
イメージ説明

もしかすると,キャッシュのせいかもしれません
たしかWindowsであれば,Ctrl+F5でキャッシュをクリア(スーパーリロード)できます
お試しください

cf.

追記(20190829004407)

cf.
kei344さんのデモ
https://jsfiddle.net/zLp0v8fq/show/

  • Firefox Dev Edition:

イメージ説明

  • Firefox:

イメージ説明

いずれもこちらでは見ためには問題ないですね...

と思ったのですが,画面横幅のリサイズや,要素全体の拡大縮小を行ったところ,状況が再現できました.画面の解像度の違いによって誤差が生まれているのかもしれません
(各要素の状態が分かりやすいように,テキストを選択状態にしています)
イメージ説明

まあ,floatは後処理を忘れがちですし,display: inline-block;やflexboxを使うほうが直観的だと思うので,個人的にそちらをお勧めします
(ちなみに私は,CSSリセットでdisplay: inline-block;box-sizing: border-box;は(疑似要素も含めて)必ず入れていました)

ヘッダーがはみ出す系は,とりあえず親要素にoverflow:hidden;するのでも良いですが,余力があればレスポンシヴ・デザインも目指しましょう(Progateのカリキュラムに組み込まれている場合は一旦スルーしてもらって構わないです)

追記(20190901142716)

レイアウト確認用のCSS(例)

check_layout.css

1*, ::before, ::after{ 2 box-shadow: 3 inset 0 2px red, 4 inset 0 -2px blue, 5 inset 2px 0 yellow, 6 inset -2px 0 green; 7}

check_layout.css

1*, ::before, ::after{ 2 color: yellow; 3 background: linear-gradient(45deg, rgba(0,0,0) 0%, rgba(255,255,255,.5) 100%); 4}

投稿2019/08/28 14:56

編集2019/09/01 11:54
liveasnotes

総合スコア1284

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

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

liveasnotes

2019/08/28 15:48

ご指摘ありがとうございます 久しぶりに戻ってきたので,px単位で計算がずれることがあるのを失念していました Web媒体は様々なサイズで表示されるので,検証作業も注意が必要ですね
yoshinavi

2019/08/29 10:25

「liveasnotes」さんへ 「header-logo」のテキスト(line-height等)がどこかでリセットされているのかもしれません。 私の環境では、提示のコード(提示のリセット含む)だと、「kei344」さんと同じように、float未処理のうえに「header-logo」のテキストが「header」よりはみ出していて、引っ掛かっている状態になります。
liveasnotes

2019/08/30 11:24

情報提供ありがとうございます.Chromeを入れて試したところ,引っかかっているのが確認できたので,Firefoxのレンダリングエンジンの仕様である可能性が高そうです.
tsr

2019/09/01 01:19

検証していただきありがとうございました。 お手数おかけして申し訳ありません。 floatは後処理が大事なんですね。 教えていただいたこと、実践させていただきます。
guest

0

ベストアンサー

Chromeで再現します。

問題解決のために

css

1{ 2 border: 1px solid red; 3}

を付けてブロックの境界を表示する手法をオススメします。

css

1.header { 2 height: 80px; 3}

にすると境界が
height: 80px
となり、1つ目のhelloがブロックに引っかかっています。

css

1.header { 2 height: 100px; 3}

にすると境界が
height: 100px
となります。

heightを大きくすれば解決すると思います。

投稿2019/08/30 15:57

querykuma

総合スコア777

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

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

tsr

2019/09/01 01:14

すごくよくわかりました! こういう手法を使えば視覚的に理解できるんですね。 ありがとうございました。
yoshinavi

2019/09/01 02:19

>heightを大きくすれば解決すると思います。 解決法のひとつではありますが、レイアウトにも影響しますので、floatのクリアが先に必須かと思います。
liveasnotes

2019/09/01 05:26

borderをつけると,その幅の分サイズが変化してしまうので, 個人的にはbox-shadowがおすすめです CSSの最下行に以下のコードを挿入してみてください *, ::before, ::after{ box-shadow: inset 0 1px red, inset 0 -1px blue, inset 1px 0 yellow, inset -1px 0 green; } insetを使って左右上下に,異なる色の影を,要素の内側に落としています あるいは, *, ::before, ::after{ color: yellow; background: linear-gradient(45deg, rgba(0,0,0) 0%, rgba(255,255,255,.5) 100%); } のような方法もアリですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問