レスポンシブデザインに対応させたい

PCで表示すると図のような画面になります。
これをスマホ(iphone11)で表示させると下図のようになります。

下に空白が空いてしまいます。
背景を縦いっぱいに表示したいのですが、
cssにどう記述したらいいかわかりません。

html
1<!DOCTYPE html>
2<html>
3  <head></head>
4    <meta charset="utf-8">
5    <title>Resonsive</title>
6    <link rel="stylesheet" href="stylesheet3.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9
10  <body>
11    <div class="box">
12        <div class="bgImg src1"></div>
13        <div class="bgImg src2"></div>
14        <div class="bgImg src3"></div>
15        <div class="bgImg src4"></div>
16        <div id="rumi" class="boxString">Responsive</div>
17    
18   
19    </div>
20    
21
22    <div class="menu">
23        <ul>
24            <li id="home">Home</li>
25            <li id="profile"><a href="profile.html">Profile</a></li>
26            
27            <li id="pr"><a href="pr.html">PR</a></li>
28            <li id="yout"><a href="youtube.html">Youtube</a></li>
29        </ul>
30    </div>
31
32
33
34    <script src="script1.js"></script> 
35  </body>
36</html>

css
1* {
2    margin: 0;
3    padding: 0;
4  }
5
6.box {
7    position: relative; 
8   
9    height     : 800px;
10    margin     : 0;
11    overflow   : hidden;
12    opacity: 0.7;
13
14  }
15  
16  /* --- 背景の指定 ------------------------------------------- */
17  .box .bgImg {
18    position   : absolute;
19    top        : 0;
20    left       : 0;
21    bottom     : 0;
22    right      : 0;
23    opacity    : 0;
24    animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
25  }
26  
27  /* --- 段差で背景画像のアニメーションを実行 ----------------- */
28  .box .src1 {
29    background-image : url(http://rumi8532.cocotte.jp/2409797.jpg);   /* 背景の画像を指定 */
30  }
31  .box .src2 {
32    background-image : url(http://rumi8532.cocotte.jp/2507282.jpg);   /* 背景の画像を指定 */
33    animation-delay  : 5s;
34  }
35  .box .src3 {
36    background-image : url(http://rumi8532.cocotte.jp/2497988.jpg);   /* 背景の画像を指定 */
37    animation-delay  : 10s;
38  }
39  .box .src4 {
40    background-image : url(http://rumi8532.cocotte.jp/2516134.jpg);   /* 背景の画像を指定 */
41    animation-delay  : 15s;
42  }
43  
44  @keyframes bgAnime {
45     0% { opacity: 0; }
46     5% { opacity: 1; }
47    25% { opacity: 1; }
48    30% { opacity: 0; }
49   100% { opacity: 0; }
50  }
51  
52  /* --- 前面の文字定義（サンプルのため変更してください） ----- */
53  .box .boxString{
54    font-size: 60px;
55    opacity: 1.0;
56    border-bottom: 2px solid #a9a9a9;
57
58    margin-top: 370px;
59    margin-left: 480px;
60 
61    position   : absolute;
62    display    : inline-block;
63  }
64
65
66
67  .menu{
68    float: left;
69    background-color: #dcdcdc;
70    height: 100px;
71    width: 100%;
72}
73
74li{
75    list-style: none;
76    float: left;
77    font-size: 30px;
78    color: white;
79    margin-right: 20px;
80    margin-top: 30px;
81    margin-left: 30px;
82    padding: 3px;
83}
84
85a{
86  color: white;
87  text-decoration: none;
88}
89
90@media (max-width: 670px) {
91
92
93  
94}

このページです。

どなたかご教授願います。

行動規範の内容に同意します

回答1件

ベストアンサー

viewportの設定が抜けているように思えます。
ひとまず、HTMLの5行目に<meta name="viewport" content="width=device-width,initial-scale=1">と追記して試していただけますでしょうか？？

viewportというものがなぜ必要か簡単に説明させていただきます。（詳細は調べていただけますと幸いです）
例えばiPhone11でいうと、画面の解像度が1,792 x 828あるわけです。ただ、PCの画面が通常1,920 x 1,080くらいであることを考えると、PCよりもはるかに小さいiPhoneの画面でこの解像度だと、文字や画像などが小さくなりすぎることになります。

そのため、スマートフォンの画面では、もっと小さい解像度のときと同じ大きさで文字や画像を表示すれば、viewportを指定していないときより文字や画像が大きくなり、スマートフォンでもWeb画面が見やすく表示できるわけですね。
それを実現するための設定が、このviewportの設定ということになります。
（上ではwidth=device-width,initial-scale=1となっていますが、この設定の詳しい意味については、こちらのサイトが参考になるかと思います。

投稿2021/06/04 16:12

編集2021/06/04 16:16