Windowの横はばを小さくしていった時に、余白を小さくしたい

Windowのフル画面で表示すると画像の１枚目、Windowの横幅をめいいっぱい小さくすると画像の２枚目のようになります。

Windowの横幅をめいいっぱい小さくした時に、灰色部分の余白と一番外側の白い余白の両方をもっと小さくし、文字の割合を大きくしたいです。

１つの解決方法として、javascriptで条件分岐して、windowの横幅がある値以下なら、余白のvw,vhの値を小さくしようと考えました。が、javascript内でvw, vhの値を参照できず、うまくいきませんでした。どうやったらうまくいきますでしょうか？

また、この方法以外に目的を達成できる方法があれば教えていただきたいです。よろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<html lang="en">
4
5<head>
6
7<meta charset="utf-8"/>
8 <title>ああああああ</title>
9<link rel="stylesheet" href="style.css" type="text/css"> <!--これなんだ？-->
10
11<style>
12
13.body{
14   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
15  }
16
17.title p {
18  font-size: 40px;
19  font-weight:  bold;
20  text-align: center;
21  padding: 0;
22  margin-top: 20px;
23}
24
25.title span {
26  font-size: 20px;
27  text-align: center;
28  color: #73683b;
29  line-height: 0px;
30  margin: 0px;
31  padding: 0;
32/*あれ？？近くにならないぞ、、、並べ方の問題か？？*/
33
34}
35
36.title p:first-child {/*20211215 terateil参照*/
37    margin-block-end: -40px;
38}
39
40.title p:last-child {/*20211215 terateil参照*/
41    margin-block-end: -10px;
42}
43
44.back{
45  margin: 10px 10vw;
46  padding-top: 10vh;
47  padding-bottom: 10vh;
48  height: 100%;/*もしレスポンシブ化したかったらmax-widthとか使って構成し直しかな？？*/
49  background-color: #E5E5E5;
50
51}
52
53.baloon{
54	margin: 3vh 10vw;/*この親要素がbalppnじゃないのか？？*/
55	padding: 3vh 3vw;
56	background-color: white;
57}
58
59.baloon.content {
60  text-align: left;
61}
62
63.Q1 p {
64  font-size: 20px;
65  font-weight:  bold;
66  color: #73683b;
67}
68
69.A1 p {
70  font-size: 15px;
71  line-height: 20px;
72  margin: 2.5px 0;
73 }
74
75 .A1 a {
76  font-size: 15px;
77  line-height: 20px;
78  color: #1F94BB;
79  text-decoration: underline;
80
81 }
82
83.Q2 p {
84  font-size: 20px;
85  font-weight:  bold;
86  color: #73683b;
87}
88
89.A2 p {
90  font-size: 15px;
91  line-height: 20px;
92 }
93
94 .Q3 p {
95  font-size: 20px;
96  font-weight:  bold;
97  color: #73683b;
98}
99
100.A3 p {
101  font-size: 15px;
102  /*line-height: 20px;*//*<p>が並んでいるときは、同じ要素内の高さではなく、他の要素との関係で指定*/
103  margin: 2.5px 0;
104 }
105
106 .Q4 p {
107  font-size: 20px;
108  font-weight:  bold;
109  color: #73683b;
110}
111
112.A4 p {
113  font-size: 15px;
114  line-height: 20px;
115  margin: 2.5px 0;
116 }
117
118 .Q5 p {
119  font-size: 20px;
120  font-weight:  bold;
121  color: #73683b;
122}
123
124.A5 p {
125  font-size: 15px;
126  line-height: 20px;
127 }
128
129  .Q6 p {
130  font-size: 20px;
131  font-weight:  bold;
132  color: #73683b;
133}
134
135.A6 p {
136  font-size: 15px;
137  line-height: 20px;
138 }
139
140</style>
141</head>
142
143<body>
144
145<div class="title">
146 <p>ああああああ</p>
147 <p><span>アアア</span></p>
148</div>
149<div class=back>
150<div class=baloon>
151  <div class="content">
152    <div class="Q1">
153	  <p>Q.あああああああああああああああああああああああ</p>
154    </div>
155    <div class="A1">
156    <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
157    <a href="http://asobi-gokoro.net/"><span style="text-decoration: underline;">あああああああああああああ</span></a>
158    </div>
159    <div class="Q2">
160    <p>Q.ああああああああああああああああああ</p>
161    </div>
162    <div class="A2">
163    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
164    </div>
165    <div class="Q3">
166    <p>Q.あああああああああああああああ</p>
167    </div>
168    <div class="A3">
169    <p>ああああああああああああああああああああああ</p>
170    <p>あああああああああああああああ</p>
171    <p>あああああああああああああああああああああ</p>
172    <p>あああああああああああああああああああああ</p>
173    </div>
174    <div class="Q4">
175    <p>Q.あああああああああああああああああああ</p>
176    </div>
177    <div class="A4">
178    <p>ああああああああああああああああああああああああああああああああああああああああああ</p>
179    <p>あああああああああああああああああああああああああああああああああああああああああああああ</p>
180    </div>
181    <div class="Q5">
182    <p>Q.ああああああああああ</p>
183    </div>
184    <div class="A5">
185    <p>あああああああああああああああああああああああああああああああああああああああああ</p>
186    </div>
187     <div class="Q6">
188    <p>Q.あああああああああああああああああ</p>
189    </div>
190    <div class="A6">
191    <p>ああああああああああああああああああああああああああああああああああああああああああ</p>
192    </div>
193  </div>
194</div>
195</div>

JavaScript
1/*sublime textでjava scriptを書くのはどうやってやるんだ？？*/
2let intViewportWidth = window.innerWidth;
3
4if(intViewportWidth >= 800){/*800px以上では大きめのvw,vhを指定したい*/
5  margin: 10px 10vw;
6  padding-top: 10vh;
7  padding-bottom: 10vh;
8}else{/*800px以下では小さめのvw,vhを指定したい*/
9  margin: 10px 10vw;
10  margin: 5px 5vw;
11  padding-top: 5vh;
12  padding-bottom: 5vh;
13}

sousuke

2021/12/16 06:50

メディアクエリは検討しましたか？

Lhankor_Mhy

2021/12/16 07:20

メディアクエリでいいのでは。

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

回答1件

ベストアンサー

メディアクエリでいいと思います。

css
1    .back {
2      margin: 10px 10vw;
3      padding-top: 10vh;
4      padding-bottom: 10vh;
5      height: 100%;
6      /*もしレスポンシブ化したかったらmax-widthとか使って構成し直しかな？？*/
7      background-color: #E5E5E5;
8    }
9
10    @media screen and (max-width:800px) {
11      .back {
12        margin: 5px 5vw;
13        padding-top: 5vh;
14        padding-bottom: 5vh;
15      }
16    }