Q&A
提示のコードでは現象を再現できません。
提示されてない部分に原因があるとおもいます。
現象を再現できるコードを提示してください。
前提
HTML, CSSのみでサイトをコーディング中で、レスポンシブ（スマホからPCへ）もする予定です。
要素を画面幅いっぱいにしたいのですが、画面幅を超えて横スクロールが発生してしまいます。
初歩的ですが、２日間くらい調べても分からないためこちらで教えていただけたら嬉しいです。
実現したいこと
position: fixed;したヘッダーとフッターを画面幅いっぱいにする。
レスポンシブするのでpxで幅を指定するのは避けたいです。
＊fixedした要素の幅を何も指定しない場合、何を基準にして決まるのかも教えていただけると幸いです。
発生している問題・エラーメッセージ
画面幅360pxに対して上記要素がどちらも380pxになってしまう。
該当のソースコード
HTML
1 <header class="header"> 2 <h1 class="logo_box"> 3 <a href="#top"> 4 <img class="logo" src="./img/logo.jpg" alt="xxx"> 5 </a> 6 </h1> 7 </header> 8 9 <footer> 10 <ul class="footernav_ul"> 11 <li><a href="#top"><i class="fa-solid fa-house"></i><br>ホーム</a></li> 12 <li><a href="#menu"><i class="fa-solid fa-scissors"></i><br>メニュー</a></li> 13 <li><a href="#catalog"><i class="fa-solid fa-table-cells"></i><br>カタログ</a></li> 14 <li><a href="#info"><i class="fa-solid fa-map-location-dot"></i><br>店舗情報</a></li> 15 <li><a href="#reserve"><i class="fa-solid fa-phone"></i><br>ご予約</a></li> 16 </ul> 17 </footer> 18
CSS
1img { 2 max-width: 100%; 3 vertical-align: top; 4} 5a { 6 text-decoration: none; 7 color: #393939; 8} 9header { 10 position: fixed; 11 left: 0; 12 right: 0; 13 top: 0; 14 z-index: 5; 15 background-color: #8d4d08; 16} 17.logo_box { 18 text-align: center; 19} 20.logo { 21 width: 260px; 22} 23 24footer { 25 margin-top: 100px; 26} 27.footernav_ul { 28 position: fixed; 29 left: 0; 30 right: 0; 31 bottom: 0; 32 text-align: center; 33 background-color: #edcdab; 34} 35.footernav_ul li { 36 display: inline-block; 37} 38.footernav_ul li a { 39 display: block; 40 text-align: center; 41 padding: 0.3em; 42}
試したこと
・left、lightを０にする
・ヘッダーの画像部分をテキストにしてみる
・フッターaタグのpaddingを検証ツールでチェックを外す
・JSを検証ツールへコピペして各要素にアウトラインをつけ、はみ出しているところを確認
補足情報（FW/ツールのバージョンなど）
VS Code
回答1件
0
ベストアンサー
はじめまして，回答させていただきます．
不慣れですが，よろしくお願いいたします．
解決案
まず，htmlタグとhead，bodyの３つのタグは必須ですので必ず書くようにお願いします．(この質問されるにあたって記載していないだけでしたらすみません．)
そのうえでレスポンシブを実現するにはviewportの設定が必要です．ここに書くと長いのでこちらの記事をお勧めいたします．Qiita - もう逃げない。HTMLのviewportをちゃんと理解する
以上の条件を満たせば画面幅に応じてコンテンツのサイズも変わると思います．
以下コードです．
html
1<html> 2 3<head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <link rel="stylesheet" href="style.css"> 6</head> 7 8<body> 9 <header class="header"> 10 <h1 class="logo_box"> 11 <a href="#top"> 12 <img class="logo" src="./img.jpg" alt="xxx"> 13 </a> 14 </h1> 15 </header> 16 17 <footer> 18 <ul class="footernav_ul"> 19 <li><a href="#top"><i class="fa-solid fa-house"></i><br>ホーム</a></li> 20 <li><a href="#menu"><i class="fa-solid fa-scissors"></i><br>メニュー</a></li> 21 <li><a href="#catalog"><i class="fa-solid fa-table-cells"></i><br>カタログ</a></li> 22 <li><a href="#info"><i class="fa-solid fa-map-location-dot"></i><br>店舗情報</a></li> 23 <li><a href="#reserve"><i class="fa-solid fa-phone"></i><br>ご予約</a></li> 24 </ul> 25 </footer> 26</body> 27 28</html>
そして大きさを指定しないときのblock: fixedですが子要素に依存した気がします．(まちがっていたらごめんなさい）
また，レスポンシブで高さや横幅を指定する際，レンダリングのコスパ的にどうなのと言われそうですが．cssのcalc関数も便利です．
- 例: マージンを上下左右に20px(全部で40px)つけた時大きさを親要素の50%にしたい
width: calc(50% - 40px);と設定することで実現できます．
ちなみに
bodyにはもともとmarginがついているのでcssであらかじめ
html,body{ margin: 0; width: 100% height: 100%; }
とすること良くやっています．
投稿2022/09/22 09:24
総合スコア9
あなたの回答
tips
プレビュー
