画面拡大サイズによってCSSの表示が異なってしまう

PHP でサイト上に公開したのですが、画面拡大すると「class = "box"」の幅が狭く表示されてしまいます。下記PHPコードの14行目とCSSコードの16行目の内容です。画面拡大しても幅が狭まらないようにするにはどうすれば良いでしょうか。未だに調べても分からないままですので、どなたか教えて頂けると幸いです。=

デフォルトでの表示

画面拡大したときの表示

PHP
1<!DOCTYPE html>
2<html lang="ja">
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>Brash Washing</title>
8    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
9    <link rel="stylesheet" href="p.css">
10</head>
11<body>
12<h1>3/4 ステップ</h1>
13<p>整理する</p>
14<div class="box">
15    <p>先ほど書かれたリストを整理してみよう。内容が被っているなら削除したり、１つにまとめて分かりやすくしたりなど。</p>
16    <form action="p4.php" method="POST">
17        <div class="container">
18            <table>
19            <tbody>
20            <div class="sortable">
21            <?php
22                foreach($_POST['name'] as $value){
23                    echo '<tr><td class="sort">=</td></div><td><textarea name="name[]" cols="80" rows="1">'.$value.'</textarea></td><td><button class="remove">-</button></td></tr>';
24                }
25            ?>
26            </div>
27            </tbody>
28            </table>
29            <button id="addRow" type="button">+ 追加</button>
30            <button id="back" type="button">１つ復活</button><br>
31            <div id='submit'><input type="submit" value='次へ進む'></div>
32        </div>
33        <?php echo '<input type="hidden" name="first" value="'.$_POST['first'].'">' ?>
34    </form>
35</div>
36<script src ="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
37<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
38<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
39<script>
40    $(function(){
41        $('tbody').sortable();
42
43        $('#addRow').click(function(){
44            var html = '<tr><td class="sort">=</td><td><textarea name="name[]" cols="40" rows="1"></textarea></td><td><button class="remove">-</button></td></tr>'
45
46            $('tbody').append(html);
47        });
48        var d;
49        $(document).on('click', '.remove', function(){
50            d = $(this).parents('tr').remove()});
51        
52        $("#back").on("click", function(){
53            $('tbody').append(d);});
54    });
55</script>
56</body>
57</html>

CSS
1@charset "UTF-8";
2
3html {
4  font-size: 100%;}
5body {
6    background-color: #fbfbfb;}
7h1 {
8    text-align:center;
9    font-size: 3rem;
10    font-weight: 700}
11p {
12    text-align: center;
13    font-size: 2.125rem;
14    font-weight: 400;}
15    
16.box {
17    padding: 0.5em 1em;
18    margin: 2em 25em;
19    font-weight: bold;
20    border-radius: 4px;
21    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
22    background-color: #fff;}
23
24.box p {
25    font-size: 1.5rem;
26    font-weight: bold;
27    text-align: left}
28
29#submit {
30    text-align: right;
31    padding-top: 20px;
32}
33
34input[type=submit] {
35    background-color: rgb(25, 118, 210);
36    color:#fff;
37    font-size: 1.2rem;
38    font-weight: 200px;
39    border-radius: 4px;
40    border: 0;
41    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 20%);
42}
43
44button:hover,
45input:hover {
46    cursor: pointer;
47}
48
49
50/* リスト */
51.container > table {
52    margin: 50px 50px 30px 50px;
53}
54
55form {
56    text-align: center;
57}
58
59.container > table > tbody > tr > td > textarea {
60    margin: 10px 0px 0px 0px;
61    box-shadow: 0px 0.5px 2px 2px rgb(0 0 0 / 20%);
62    border-radius: 4px;
63    border: 0px;
64    background-color: #ffffff;
65    font-size: 1.3rem;
66    resize: none;
67    width: 95%;
68    letter-spacing: 2px;
69}
70
71.remove {
72    margin: 6px 0px 0px 0px;
73    font-size: 30px;
74    width: 36px;
75    border-radius: 50%;
76    background-color: tomato;
77    color: white;
78    border: none
79}
80
81#addRow {
82    font-size: 20px;
83    width: 150px;
84    height: 40px;
85    background-color: #fffcf4;
86    color: rgb(0, 0, 0);
87    font-weight: 600;
88    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 20%);
89    border: 0;
90}
91
92#back {
93    font-size: 20px;
94    margin: 0px 0px 0px 30px;
95    width: 150px;
96    height: 40px;
97    background-color: #fffcf4;
98    color: rgb(0, 0, 0);
99    font-weight: 600;
100    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 20%);
101    border: 0;
102}
103
104
105
106/* p1.php */
107.box h1 {
108    text-align:center;
109    font-size: 2rem;
110    font-weight: 700;
111}
112    
113.box > .p1list > ul {
114    background-color: #fffcf4;
115    color: rgba(0, 0, 0, 0.6);
116    padding: 0.5em 0.5em 0.5em 2em;
117    box-shadow: 0 0 5px silver;
118    border-radius: 8px;
119    font-size: 1.2rem;
120}
121    
122.box > .p1list > ul > li {
123    line-height: 2.5rem}
124
125.box > form > textarea {
126    text-align: left;
127    resize: none;
128    width:800px;
129    height: 200px;
130    max-width: 100%;
131    font-size: 1.4rem;
132    letter-spacing: 1px;
133    line-height: 1.5em;
134    border-radius: 4px;
135    border: 0px;
136    color: rgb(68, 68, 68);
137    background-color: #ffffff;
138    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 20%);
139}
140
141.p2list {
142    background-color: #fffcf4;
143    color: rgba(0, 0, 0, 0.6);
144    box-shadow: 0 0 5px silver;
145    border-radius: 8px;
146    font-size: 1.2rem;
147}
148
149/* p2.php */
150
151.p2list > ul {
152    padding: 30px 50px 0px 30px;
153    list-style: none;
154    line-height: 1.5em;
155    border-radius: 10px;
156}
157
158input[type=checkbox] {
159	transform: scale(1.5);
160    margin-right: 10px;
161}
162
163tr:hover {
164    cursor: move;
165}
166
167
168
169
170/* p3.php */
171.sort {
172    padding-bottom: 10px;
173    font-size: 25px;
174    margin: 1px 0px 0px 0px;
175}
176
177
178/* p5.php */
179#return {
180    text-align: right;
181    padding-top: 0.5em 1em;
182    margin: 2em 25em;}
183
184.box > .p1list > .before {
185    background-color: #fffcf4;
186    color: rgba(0, 0, 0, 0.6);
187    padding: 0.5em 0.5em 0.5em 0.5em;
188    box-shadow: 0 0 5px silver;
189    border-radius: 8px;
190    font-size: 1.2rem;
191    margin-bottom: 60px;
192}
193
194.box h2 {
195    text-align:center;
196    font-size: 2rem;
197    font-weight: 700;
198    margin-top: 50px;
199}

m.ts10806

2023/02/11 23:05

marginがそのようになっているからかと思いますが、どのようになって欲しいのかを明記しないと原因のみの回答になるのではと。

flexibler

2023/02/12 00:09

説明不足ですみません。画面拡大しても「class= "box"」の幅が狭まらないようにしたいです。

m.ts10806

2023/02/12 02:54

それだと狭めたらはみ出しませんか？

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

回答1件

ベストアンサー

css
1.box {
2    padding: 0.5em 1em;
3    margin: 2em 25em;

横のマージンが文字の大きさの相対になっているので、文字が大きくなればマージンが大きくなり、.box の幅は狭くなります。

文字幅の相対でマージンを決めるのをやめましょう。たとえば、ビューポート幅の相対にするとか。

css
1.box {
2    padding: 0.5em 1em;
3    margin: 2em 25vw;

投稿2023/02/13 01:10

int32_t

総合スコア20845

flexibler

2023/02/16 07:47

.box の親要素は body タグであり、その文字が画面拡大に大きくなることでマージンも空いてしまうんですね。自分の中で空回りしてたので、解決できて良かったです。ご丁寧に教えて頂きありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画面拡大サイズによってCSSの表示が異なってしまう

関連した質問