Q&A
前提・実現したいこと
表題の通り、iphone seサイズ（6,7,8)と（6+)で右に余白ができてしまう。
それぞれのセクションにwidth:100vw;が反映されない
ご教授いただけると幸いです。
発生している問題・エラーメッセージ
iphone seサイズ（6,7,8)と（6+)で右に余白ができてしまう。(Edgeの場合、余白ができてしまう)
試したこと
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>石井花壇|温海温泉旅館【公式サイト】</title> 8 <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。"> 9 <link rel="stylesheet" href="./css/destyle.css"> 10 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 11 <!--flatpicker--> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> 13 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> 14 <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script><!-- 日本語化 --> 15 <link rel="stylesheet" href="./css/style.css"> 16 17</head> 18<body> 19 <!-- <div class="nav-wrapper"> --> 20 <header class="header"> 21 <div class="header-inner"> 22 <div class="header-left"> 23 <h1 class="logo"> 24 <a href="#"> 25 <img class="header-logo" src="/img/top-header-logo.png" alt=""> 26 </a> 27 </h1> 28 29 <nav class="nav nav-open drawer-nav"> 30 <ul class="header-list"> 31 <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item --> 32 <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item --> 33 <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item --> 34 </ul><!-- /.header-list --> 35 </nav><!-- /.nav --> 36 37 </div> 38 <div class="header-right"> 39 <div class="header-link " id="js-modal"> 40 <a class="calender-link js-modal-open" href="#"> 41 <!-- <img src="./img/calender.png" alt="カレンダー"> --> 42 宿泊予約 43 </a> 44 </div><!-- /.header-link --> 45 46 <button type="button" id="js-humburger" class=" humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する"> 47 <span class="line"></span ><span class="line"></span><span class="line"></span> 48 </button> 49 </div><!-- /.header-right --> 50 </div><!-- /.header-inner --> 51 </header><!-- /.header --> 52 <div class="overlay"></div><!-- /.overlay --> 53 <!-- </div>/.nav-wrapper --> 54 55 56 <!--modal --> 57 <div class="modal js-modal"> 58 <div class="modal__bg js-modal-close"></div><!-- /.modal__bg --> 59 <div class="js-modal-content"> 60 <div class="form-inner"> 61 <figure class="form_img" id="js-close-calender"> 62 <!-- <img src="./img/close@2x.png" alt="✖ボタン"> --> 63 </figure><!-- /#js-close-calender --> 64 <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> 65 <hr class="bar"> 66 <!-- modal-form --> 67 <form class="form" id="js-form" action="x"> 68 <ul class="form-list"> 69 <!--1--> 70 <li class="form-item"> 71 <label for="name">お名前</label> 72 <input type="text" name="name" class="form_txt" placeholder="例.石井花壇"> 73 </li><!-- /.form-item --> 74 <!--2--> 75 <li class="form-item"> 76 <label for="mail">メールアドレス</label> 77 <input type="text" name="name" class="form_txt" placeholder="例.example@example.com"> 78 </li> 79 <!--3--> 80 <li class="form-item"> 81 <p class="form-plan">ご希望プラン(空いているプランのみ表示されます)</p><!-- /.form-plan --> 82 <select class="select-plan" name="宿泊プラン"> 83 <optgroup> 84 <option class="form_opption" value="hidden selected">プランを選択してください</option> 85 <option class="form_opption" value="1">➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option><!-- /.form_opption --> 86 <option class="form_opption" value="2">➁平日に優雅に楽しむ、特別宿泊プラン</option><!-- /.form_opption --> 87 <option class="form_opption" value="3">➂絶景貸切露天と個室会席を楽しむファミリープラン</option><!-- /.form_opption --> 88 </optgroup> 89 </select><!-- /# --> 90 </li><!-- /.form-item --> 91 <!--4--> 92 <li class="form-item"> 93 <label for="js-flatpickr">日時選択</label></li><!-- /.form-item --> 94 <input class="calendar" id="js-flatpickr" data-mindate=today type="text" name="name" placeholder="日時を選択してください"> 95 </li> 96 </ul><!-- /.form-list --> 97 </div><!-- /.form-inner --> 98 </form><!-- /.form --> 99 <div class="form-close"> 100 <a href="#"> 101 送信する 102 </a> 103 </div><!-- /.form-close --> 104 </div><!-- /.modal-contents --> 105 </div><!-- /.modal --> 106 107 <section class="fv"> 108 <ul id="slide_wrap"> 109 <li class="slide_item"><img src="img/mainbg01.jpg" alt="1枚目"></li> 110 <li class="slide_item"><img src="img/mainbg02.jpg" alt="2枚目"></li> 111 <li class="slide_item"><img src="img/mainbg03.jpg" alt="3枚目"></li> 112 </ul> 113 <p class="fv-txt1">頑 張 る 人 の<br class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt --> 114 </section><!-- /.fv --> 115 116 <main class="main main_open"> 117 <section class="history"> 118 <div class="inner hs-theme"> 119 <div class="hs-flex"> 120 <h2><span class="class="hs-ttl">温 海 温 泉 の</span><br class="hs-ttl2"><span class="span">美 し さ に 癒 や さ れ て</span> </h2><!-- /.hs-ttl --> 121 <!-- <ul class="hs-list > --> 122 <p class="hs-item aos-init aos-animate" data-aos="fade-up">東 北 の 奥 座 敷 で あ る 温 海 温 泉 郷 <br class="middle-line"> 開 湯 は 約 <span class="num">1</span> <span class="num">3</span><span class="num">0</span><span class="num">0</span> 年 前 と さ れ 、 役 小 角が <br> 発 見 し た と 伝 え ら れ ま す</p><!-- /.hs-item --> 123 <p class="hs-item aos-init aos-animate" data-aos="fade-up">石 井 花 壇 は 江 戸 よ り 続 く 由 緒 あ る 旅 館で <br class="middle-line"> ク ラ シ ッ ク な 作 り の 中 に 大 正 ロ マ ン あ ふ れる <br> 内 装 を 残 し て お り ま す</p><!-- /.hs-item --> 124 <p class="hs-item aos-init aos-animate" data-aos="fade-up">圧 倒 的 癒 や し の 空 間 で <br class="middle-line"> 頑 張 る 現 代 人 に <br> 頑 張 ら な い 圧 倒 的 な 非 日 常 を ご 提 供 し ま す</p><!-- /.hs-item --> 125 <p class="shop-name">石 井 花 壇</p><!-- /.shop-name --> 126 </div><!-- /.hs-flex --> 127 </div><!-- /.inner --> 128 </section><!-- /.history -->
コードです↓
HTML,css
回答1件
0
ベストアンサー
css
1@media screen and (max-width: 599px) { 2 .history { 3 margin: 0 2vw; 4 width: 100vw; 5 } 6}
となっていますので、2+100+2で104vwとなり、画面からはみ出します。
その分だけ他の要素の右側に余白があるように見えますが、実際には逆に飛び出しているのが原因ということだと思います。
投稿2021/11/05 02:32
総合スコア36158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/05 07:26
2021/11/05 07:46
2021/11/05 07:49
2021/11/05 07:56
2021/11/05 08:08