Q&A
ブラウザのキャッシュの問題とか？
私は今、モバイルサイト用に画面が表示されるようにしたいと思っています。@media (max-width: 〇〇px) {} という形で進めているのですが、vsコードのファイルを保存してもブラウザを更新しても変化がないためコードミスかもしれませんが、何度照らし合わせても合っているように見えてしまいます。ブラウザ上で検証からiPhone SE用の画面表示にしても全く変化なしの状態です。
どうすればモバイルサイト用に向けた表示がされるのでしょうか？
css
1@charset "utf-8"; 2 3*, 4::before, 5::after { 6 padding: 0; 7 margin: 0; 8 box-sizing: border-box; 9} 10 11ul, 12ol{ 13 list-style: none; 14} 15 16a{ 17 color: inherit; 18 text-decoration: none; 19} 20 21body{ 22 font-family: sans-serif; 23 font-size: 16px; 24 color: #000000; 25 line-height: 1; 26 background-color: #ffffff; 27} 28 29img { 30 max-width: 100%; 31} 32 33.header-inner { 34 max-width: 1200px; 35 height: 110px; 36 margin-left: auto; 37 margin-right: auto; 38 padding-left: 40px; 39 padding-right: 40px; 40 display: flex; 41 justify-content: space-between; 42 align-items: center; 43} 44 45.toggle-menu-button { 46 display: none; 47} 48 49.header-logo { 50 display: block; 51 width: 170px; 52} 53 54.site-menu ul { 55 display: flex; 56} 57 58.site-menu ul li { 59 margin-left: 20px; 60 margin-right: 20px; 61} 62 63.site-menu ul li a { 64 font-family: 'Montserrat', sans-serif; 65 font-weight: bold; 66} 67 68.footer { 69 color: #ffffff; 70 background-color: #24211b; 71 padding-top: 30px; 72 padding-bottom: 15px; 73 display: flex; 74 flex-direction: column; 75 align-items: center; 76} 77 78.footer-logo { 79 display: block; 80 width: 235px; 81 margin-top: 90px; 82} 83 84.footer-tel { 85 font-size: 26px; 86 font-weight: bold; 87 margin-top: 28px; 88} 89 90.footer-time { 91 font-size: 13px; 92 margin-top: 16px; 93} 94 95.copyright { 96 font-size: 14px; 97 font-weight: bold; 98 margin-top: 90px; 99} 100 101@media (max-width: 800px) { 102 .site-menu ul { 103 display: block; 104 text-align: center; 105 } 106 107 .site-menu li { 108 margin-top: 20px; 109 } 110 111 .header { 112 position: fixed; 113 top: 0; 114 left: 0; 115 right: 0; 116 background-color: #ffffff; 117 height: 50px; 118 z-index: 10; 119 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 120 } 121 122 .header-inner { 123 padding-left: 20px; 124 padding-right: 20px; 125 height: 100%; 126 position: relative; 127 } 128 129 .header-logo { 130 width: 100px; 131 } 132 133 .header-site-menu { 134 position: absolute; 135 top: 100%; 136 left: 0; 137 right: 0; 138 color: #ffffff; 139 background-color: #736e62; 140 padding-top: 30px; 141 padding-bottom: 50px; 142 } 143 144}```HTML 145<!DOCTYPE html> 146<html> 147 148<head> 149 <meta charset="UTF-8"> 150 <title>KISSA official website</title> 151 <meta name="description" content="ページの概要文を記載します"> 152 <meta name="viewpoint" content="width=device-width"> 153 <script src="./js/toggle-menu.js"></script> 154 <link href="./css/common.css" rel="stylesheet"> 155 <link rel="preconnect" href="https://fonts.googleapis.com"> 156 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 157 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> 158</head> 159 160<body> 161 162 <!-- headerはここから --> 163 <header class="header"> 164 <div class="header-inner"> 165 <a class="header-logo" href="./index.html"> 166 <img src="./images/common/logo-header.png" alt="KISSA"> 167 </a> 168 <button class="toggle-menu-button"> </button> 169 <div class="header-site-menu"> 170 <nav class="site-menu"> 171 <ul> 172 <li> <a href="./concept.html">CONCEPT</a> </li> 173 <li><a href="./menu.html">MENU</a></li> 174 <li><a href="./shop.html">SHOP</a></li> 175 <li><a href="./access.html">ACCESS</a></li> 176 </ul> 177 </nav> 178 </div> 179 </div> 180 </header> 181 <!-- headerはここまで --> 182 183 <!-- mainはここから --> 184 <main class="main"> 185 186 </main> 187 <!-- mainはここまで --> 188 189 <!-- footerはここから --> 190 <footer class="footer"> 191 <nav class="site-menu"> 192 <ul> 193 <li> <a href="./concept.html">CONCEPT</a> </li> 194 <li><a href="./menu.html">MENU</a></li> 195 <li><a href="./shop.html">SHOP</a></li> 196 <li><a href="./access.html">ACCESS</a></li> 197 </ul> 198 </nav> 199 <a class="footer-logo" href="./index.html"> 200 <img src="./images/common/logo-footer.png" alt="KISSA"> 201 </a> 202 <p class="footer-tel">TEL 01-2345-6789</p> 203 <p class="footer-time">Open Fri-Sun 11:00-16:00</p> 204 <p class="copyright"><small>©Kissa</small></p> 205 206 </footer> 207 <!-- footerはここまで --> 208 209</body> 210 211</html>
回答1件
0
ベストアンサー
typoです。
viewpoint→viewport
投稿2022/06/09 08:59
総合スコア36138
回答ありがとうございます。気づきませんでした。CSSのコードでミスがあったとばかり思っていました。
私も15分ぐらい悩みました😀
お役に立てたようで何よりです。
あなたの回答
tips
プレビュー
