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

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

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

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

CSS

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

Q&A

解決済

1回答

402閲覧

レシポンシブ|要素がはみでる

hayatefujimon

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/19 16:08

ヘッダー部分を見てもらうと分かると思いますが、要素がはみでています。そこをどうにか対処したいので皆さんのお力を貸してください。スマホ対応で最小幅は479pxです。

イメージ説明

試みた解決策

・メディアクエリ内のコード確認
・「レシポンシブ 横スクロール」「レシポンシブ はみでる」
・ここで「レシポンシブ」と検索
・htmlの画像幅を変更

上記で検索するとbox-sixxingプロパティを書くと解決する、もしくは横幅が100%以上になっている物があると書いてありました。ですが、自分のコードにはbox-sizzingは既に追加しており、横幅が100%以上になっている要素は見つからなかったです。

コード

【コード】

css

1body { 2 font-size: 14px; 3 line-height: 30px; 4 font-family: "Hiragino kaku Gothic ProN","sans-self","Osaka"; 5 text-align: center; 6} 7img { 8 max-width: 100%; 9 height: auto; 10} 11* { 12 margin: 0; 13 padding: 0; 14 box-sizing: border-box; 15 letter-spacing: 2px; 16 } 17ul { 18 margin: 0; 19 padding: 0; 20} 21header { 22 position: relative; 23 z-index: 30; 24} 25 26/* スマホ表示 */ 27@media only screen and (max-width: 479px) { 28 .header { 29 height: 90px; 30 display: flex; 31 justify-content: space-between; 32 } 33 .header > img { 34 width: 100px; 35 max-width: 100%; 36 height: 40px; 37 margin-top: 20px; 38 /* padding-left: 10px; */ 39 } 40 41 .header > p { 42 position: absolute; 43 font-weight: bold; 44 font-size: 10px; 45 /* padding-left: 10px; */ 46 } 47 .header .question-btn .btn { 48 display: none; 49 } 50 .header .question-btn2 { 51 background: #DA6A64; 52 border-style: none; 53 color: #fff; 54 -webkit-font-smoothing: antialiased; 55 padding: 10px 3px 20px 3px; 56 width: 80px; 57 max-width: 100%; 58 height: 60px; 59 z-index: 10; 60 line-height: 1; 61 font-size: 12px; 62 } 63 64 section .about .whatskill-lisuto { 65 width: 500px; 66 max-width: 100%; 67 height: 500px; 68 display: inline-block; 69 } 70 71} 72

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>isara[イサラ] バンコクのノマドエンジニア育成講座</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="icon" href=""> 9 </head> 10 <body> 11 <header> 12 <div class="header"> 13 <img src="img/header/isaralogo.png" width="128px" alt="イサラロゴ画像"> 14 <p>バンコクのノマドエンジニア育成講座</p> 15 <div class="question-btn"> 16 <div class="btn">お問い合わせ / 資料請求はこちら</div> 17 </div> 18 <div class="question-btn2"> 19 <img src="img/form.png" width="20px" alt=""> 20 <div class="btn">資料請求</div> 21 </div> 22 </div> 23 </header> 24 <div class="container"> 25 <div class="container1"> 26 <h1>プログラミングで</h1> 27 <h1>人生の安定を手に入れよう</h1> 28 <img src="img/isaralogolarge.png" alt="トップ画像"> 29 <p class="c2">バンコクのノマドエンジニア育成講座<br>isara[イサラ]</p> 30 </div> 31 </div> 32 <section> 33 <div class="start-end"> 34 <div class="start"> 35 <p>まずは20日間で、<br>月10万円稼げるスキルを手に入れよう</p> 36 <p>※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p> 37 </div> 38 <div class="btn 1">お問い合わせ&資料請求はこちら</div> 39 <div class="end"> 40 <p>第6期生:2019年11月25日 ~ 2019年12月14日*締め切りました</p> 41 <p>第7期生:2020年2月17日 ~ 2019年3月7日*締め切りました</p> 42 <p>第8期生:2020年4月〜5月ごろを予定*資料請求受付中です</p> 43 </div> 44 </div> 45 </section> 46 <section> 47 <div class="freedom"> 48 <div class="textbox"> 49 <h1>エンジニアとして本当の自由を手に入れるためには?</h1> 50 </div> 51 <div class="free"> 52 <p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br>しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p> 53 <p>これで本当にいいのですか?<br>日本人エンジニアはアメリカと較べて給料が格段に低い。<br>その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p> 54 <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br>そこで必要なのが <span class="underline">「稼ぐ力」</span>です。</p> 55 </div> 56 <div class="about-btn"><p>ABOUT</p></div> 57 </div> 58 </section> 59 <section> 60 <div class="about"> 61 <div class="textbox"> 62 <h1>ノマドエンジニア育成講座<br></h1> 63 <h1>iSara[イサラ]とは</h1> 64 </div> 65 <h2>「 稼ぐこと 」にフォーカスしたWebエンジニア育成講座です。</h2> 66

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

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

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

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

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

guest

回答1

0

ベストアンサー

こちらで試してみました。

画像がないので断言できないのですが、ヘッダー付近には問題がない可能性があります。
問題が生じているのが、ページの下部かもしれません。

ページの、以下の記述あたりより下の要素やフッターなどを一時的にコメントアウトしてみて、
それではみ出なくなったのなら、そこに崩れの原因があります。

HTML

1<section> 2 <div class="about">

ソースコードの上半分をコメントアウト (崩れる)

ソースコードの下半分をコメントアウト (崩れなくなった→下半分に原因がある)

ソースコードの下半分を更に上下に分割してコメントアウト

...

というようにコメントアウトする範囲を狭めていって、原因となっている箇所を特定してみてください。

投稿2020/06/19 21:49

new1ro

総合スコア4528

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

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

Lhankor_Mhy

2020/06/20 01:06 編集

以前に同じような質問がありましたが、下の方にある要素がはみ出ていた影響でした。 なので、new1roさんのご回答のとおりである可能性が高いです。 ちなみにその時は、「iSara[イサラ]で学べること」あたりがはみ出していました。
hayatefujimon

2020/06/20 11:01

【new1roさん】 なるほど。そういう特定の仕方があるんですか! このテクニック絶対覚えておきます。ありがとうございます! 【Lhankor_Mhyさん】 1つの要素でもはみ出ると、サイトの横幅が大きくなるんですね。 わざわざコメントありがとうございます。参考にさせて頂きます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問