Q&A
ご提示のコードを試してみましたが、問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/6tx7vbg1/
おそらく、ご提示いただいていない部分のコードが原因だと思います。
前提・実現したいこと
isaraというLP模写をして学習をしています。
そのサイトにスマホ用のレイアウトを実装しようと思いましたができません。
responsive.cssにスマホ用のレイアウトを実装したいです。
responsive.cssでhmax-width: 768pxを指定しましたが実際には1000pxとヘッダーのみ物凄く大きくなりました。
どうすればheaderのwidthが768px以内に収まるか知りたいです。
よろしくお願いします。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="isara.css"> 8 <link rel="stylesheet" href="responsive.css"> 9 <script src="jquery-3.5.1.min.js"></script> 10 <script src="isara.js"></script> 11</head> 12<body> 13 <header> 14 <div class="header-in"> 15 <div class="header-left"> 16 <img src="isara_img/isaralogo.png" alt="isara"> 17 <p>バンコクのノマドエンジニア育成講座</p> 18 </div> 19 <div class="header-right"> 20 <p>お問い合わせ / 資料請求はこちら</p> 21 </div> 22 <div class="header-right-mini"> 23 <img src="" alt=""> 24 <p>資料請求</p> 25 </div> 26 </div> 27 </header> 28</body>
isaracss
1* { 2 padding: 0; 3 margin: 0; 4} 5 6body { 7 text-align: center; 8 color: black; 9 background-color: cornsilk; 10} 11 12ul { 13 list-style: none; 14} 15 16.clear { 17 clear: left; 18} 19 20header { 21 position: fixed; 22 top: 0; 23 z-index: 10; 24 height: 100px; 25 width: 100%; 26 background-color: #fff; 27} 28 29.header-in { 30 position: relative; 31 display: flex; 32 justify-content: space-between; /* 水平両端配置 */ 33 align-items: center; 34} 35 36.header-left { 37 display: flex; 38 align-items: flex-end; 39} 40 41.header-logo { 42 width: 150px; 43 height: auto; 44} 45 46.header-right { 47 position: absolute; 48 left: 70%; 49} 50 51.header-right-mini { 52 display: none; 53 position: absolute; 54 top: 0; 55 right: 0; 56 font-size: 12px; 57 background-color: #da6b64; 58} 59 60.header-right p { 61 color: #fff; 62 cursor: pointer; 63 padding: 11px 40px; 64 background-color: #da6b64; 65 border-radius: 25px; 66} 67 68 69//ここまでがヘッダーのcssです 70
responsivecss
1@media (max-width: 768px) { 2 header { 3 4 } 5 .heade-in { 6 7 } 8 .header-left p { 9 font-size: 10px; 10 } 11 .header-left img { 12 width: 90px; 13 height: 32px; 14 } 15 .header-right { 16 display: none; 17 } 18 .header-right-mini { 19 display: block; 20 } 21}
試したこ
ディベロッパーツールでヘッダーのcssを触ったときに画像です。
width: 100%;を消したときは768px以内に収まりますが、100%とすると大きくはみ出し、ヘッダーが1000pxとなります。100%だと768pxになると思ったのですがなりません。
この画像のこの状態になっている意味が分かりません。
ディベロッパーツールで肌色の余分な部分にカーソルを合わせたときに、htmlのwidthが中身(?)よりも小さくなっています。原因も分かりません。助けてほしいです。
ありがとうございます！
CSSのコードを追加します。
質問変更拝読。
やはり問題が再現しません。
https://jsfiddle.net/Lhankor_Mhy/6tx7vbg1/1/
header は実際に何pxまで伸びているのですか？
といいますか、スクリーンサイズ768pxで、header が横に伸びているならば横スクロールが発生していると思いますが、スクリーンショットではそうなっていないようです。スクリーンショットのどの部分が768pxに相当するのかご提示いただけますか？
あー、なるほど、わかったかもしれません。回答します。
ありがとうございます。
ヘッダーは1000pxまで伸びていました。
それより下の要素(画像の肌色の部分より左の要素)は768pxでした。
980px ではなくて 1000px ならば、私の回答は違うかもしれませんね。
すみません
かわりません
ビューポート設定 はどうなっていますか？
ビューポートの設定をソースコードに書きました。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ご提示のコードでは問題が再現しません。
ただ、編集履歴にあった github page では header が 1000px になることを確認しました。
（このコメントについて、知られたくないので消してほしい、ということでしたらお知らせください。）
言葉が足りなかったかもしれませんが、編集履歴にあった github page に基づいて回答していいのでしょうか？ ということをお聞きしています。
回答1件
0
ベストアンサー
header が 980px になっていませんか？
ビューポート設定が正しくないかもしれません。
html
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
投稿2021/01/13 02:59
編集2021/01/13 03:01総合スコア36960
あなたの回答
tips
プレビュー
