前提
レスポンシブデザインのページをつくっているのですが、検証ツールをつかったところ、SPが表示されません。(真っ白です)
cssにミスがないか、確認をお願いします。
実現したいこと
・Googleの検証ページで、SPページの表示
(PCページはちゃんと表示されています)
該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="expires" content="604800"> <meta name="format-detection" content="email=no,telephone=no,address=no"> <title>【1】| 【Puzzle03】</title> <meta name="description" content="【1】| 【Puzzle03】のdescriptionです"> <link rel="icon" href="assets/images/common/favicon.ico"> <link rel="stylesheet" href="assets/fonts/Roboto/Roboto-Light.ttf"> <link rel="stylesheet" href="assets/stylesheets/app.css"> </head> <body> <main> <div class="pbox"> <div class="box1"><img src="logo-hdr.png" alt="" class="logo-top"></div> <div class="flex_box"> <div class="box2"> <h1>大見出し</h1> <div class="text-bigbox1"> <p class="text-box1"> 大見出しテキスト<span class="text-change">大見出しテキスト</span>大見出しテキスト<br> 大見出しテキスト<br> 大見出しテキスト大見出しテキスト大見出しテキスト </p> <p class="text-box1"> 大見出しテキスト大見出しテキスト大見出しテキスト<br> 大見出しテキスト<br> 大見出しテキスト<span class="text-change">大見出しテキスト</span>大見出しテキスト </p> </div> </div> <div class="box3"> <h2>中見出し</h2> <div class="link-box"> <div class="link">link_1</div><div class="link">link_2</div><div class="link">link_3</div> </div> <div class="text-bigbox2"> <p class="text-data">2021/01/01</p> <p class="text-box2"> datalistテキストdatalistテキストdatalistテキスト<br> datalistテキストdatalistテキスト </p> <p class="text-data">2021/02/22</p> <p class="text-box2"> datalistテキストdatalistテキスト<br> datalistテキストdatalistテキストdatalistテキストdatalistテキスト </p> <p class="text-date">2021/12/09</p> <p class="text-box2"> datalistテキストdatalistテキストdatalistテキスト<br> datalistテキストdatalistテキストdatalistテキストdatalistテキスト<br> datalistテキストdatalistテキスト </p> </div> </div> </div> <div class="box4"> <h3>小見出し</h3> <div class="text-box3">©Puzzle_03</div> </div> </div> </main> </body> </html>
css
/* 共通スタイルは外に書く */h1{ color: #f00;}h2{ color: #00f;}h3{ color: #0f0;}.pbox{ width: 100%;}.box1{ padding: 20px 40px;}.box2{ padding: 20px;}.text-bigbox1{ margin-top: 20px;}.text-box1{ margin-bottom: 10px;}.box3{ padding: 20px;}.link-box{ display: flex; margin-top: 20px;}.link{ color: #fff; background-color: #333; border: solid 1px #d98d30;}.box4{ padding: 20px 40px;} @media screen and (min-width: 796px) { /* pc用スタイル */ h1{ font-size: 25px; } h2{ font-size: 20px; } h3{ color: #0f0; } .flex_box{ display: flex; } .box1{ background-color: #141f40; } .box2{ background-color: #80bfa8; width: 30%; } .text-box1{ font-size: 18px; } .text-change{ font-size: 10px; } .box3{ background-color: #8c2727; width: 70%; } .text-box2{ font-size: 18px; color: #999; } .link{ padding: 5px 30px; margin-right: 20px; } .text-bigbox2{ margin-top: 50px; } .text-data{ font-family: "Roboto-Light"; } .box4{ background-color: #d98d30; display: flex; justify-content: space-between; } .text-box3{ font-size: 18px; } .logo-top{ width: 100px; }} @media screen and (max-width: 795px) { /* sp用スタイル */ h1{ font-size: 20px; } h2{ font-size: 10px; } .box1{ background-color: #e91e63; } .box2{ background-color: #0093b7; } .text-box1{ font-size: 13px; } .text-change{ font-size: 30px; } .box3{ background-color: #dbd400; } .text-box2{ color: #f00; font-size: 15px; } .link{ padding: 5px 0; width: 30%; } .box4{ background-color: #170e38; } .text-box3{ font-size: 13px; color: #fff; } .logo-top{ width: 50px; }}
試したこと
cssの見直し
0 コメント