ヘッダー部分を見てもらうと分かると思いますが、要素がはみでています。そこをどうにか対処したいので皆さんのお力を貸してください。スマホ対応で最小幅は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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/20 01:06 編集
2020/06/20 11:01