回答編集履歴

4

修正

2020/04/24 22:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -40,8 +40,26 @@
40
40
 
41
41
  .left {
42
42
 
43
- width: calc(70% - 40px); /* 40pxが余白 */
43
+ width: calc(70% - 40px); /* 40pxが余白。好きなように調整してください。 */
44
44
 
45
45
  }
46
46
 
47
47
  ```
48
+
49
+
50
+
51
+ ---
52
+
53
+ いったん、上記で見た目を確認してほしいのですが、
54
+
55
+
56
+
57
+ `<h1>入力フォーム</h1>`や`<form>..</form>`については、
58
+
59
+ もしかしたら意図通りでないレイアウトになっているかもしれません。
60
+
61
+
62
+
63
+ その場合、`width: 70%`のコメントアウトを解除するか、
64
+
65
+ `float: left`をコメントアウトしてみるといいかもしれません。

3

HTMLありがとうございます。回答内容を更新しました。

2020/04/24 22:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,11 +1,47 @@
1
1
  横幅`width: 70%;`の要素の子要素にも`width: 70%;`が指定されている場合、
2
2
 
3
- 画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのは
3
+ 画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのはそのためです。
4
-
5
- そのためです。
6
4
 
7
5
 
8
6
 
9
- HTMLに手を加えないとすると、`form`、`.submid`、`.contents`など、
7
+ ---
10
8
 
9
+ ステップ1:
10
+
11
- `.left`以外で`width: 70%;`を指定している箇所をすべてコメントアウトすると、広すぎる余白は無せると思ます
11
+ `form`、`.submid`、`.contents`など、`.left`以外で`width: 70%;`を指定している箇所をすべてコメントアウトしてださい。
12
+
13
+ これで、まずは広すぎる余白はなくなると思います。
14
+
15
+
16
+
17
+ ---
18
+
19
+ ステップ2:
20
+
21
+ 「ステップ1」を終えると今度は余白がゼロになるという問題が生じると思います。
22
+
23
+ 以下のようにすることで、余白を作ることができると思います。
24
+
25
+
26
+
27
+ ```CSS
28
+
29
+ .left {
30
+
31
+ width: 65%;
32
+
33
+ }
34
+
35
+ ```
36
+
37
+
38
+
39
+ ```CSS
40
+
41
+ .left {
42
+
43
+ width: calc(70% - 40px); /* 40pxが余白 */
44
+
45
+ }
46
+
47
+ ```

2

修正

2020/04/24 22:39

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,87 +1,11 @@
1
+ 横幅`width: 70%;`の要素の子要素にも`width: 70%;`が指定されている場合、
2
+
3
+ 画面全体からすると49%くらいのサイズになってしまいます。右側に大きな余白が生じてしまっているのは
4
+
1
- HTMLがないので、かなり勘で回答します。
5
+ ためです。
2
6
 
3
7
 
4
8
 
5
- まず「main」いうのは「width: 70%;」を指定している要素のことだと理解しました。
9
+ HTMLに手を加えないすると`form`、`.submid`、`.contents`など、
6
10
 
7
-
8
-
9
- その前提で、.title2、contents 、h1などに指定されている
10
-
11
- `width: 70%;`や`float: left;`をすべて削除 (コメントアウト) し
11
+ `.left`以外で`width: 70%;`を指定している箇所をすべてコメントアウトすると広すぎる余白は無くせると思います。
12
-
13
- 1つの「.left」の中に内包するとコーディングがしやすいと思います。
14
-
15
-
16
-
17
-
18
-
19
- ```HTML
20
-
21
- <!-- ↓以下のような形にすると、余白やレイアウトの制御はしやすいと考えます。 -->
22
-
23
- <div class="left">
24
-
25
- <h1>h1タイトル</h1>
26
-
27
- <h2>h2タイトル</h2>
28
-
29
- <h3>h3タイトル</h3>
30
-
31
- <form>
32
-
33
- <div>
34
-
35
-
36
-
37
- </div>
38
-
39
- </form>
40
-
41
- </div>
42
-
43
- <div class="right">
44
-
45
- <h3>ああああ</h3>
46
-
47
- <ul>
48
-
49
- <li>あああああ</li>
50
-
51
- <li>あああああ</li>
52
-
53
- <li>あああああ</li>
54
-
55
- <li>あああああ</li>
56
-
57
- </ul>
58
-
59
- </div>
60
-
61
- ```
62
-
63
-
64
-
65
- ```CSS
66
-
67
- .left {
68
-
69
- width: 70%;
70
-
71
- padding-right: 40px; /* 好きな余白を指定 */
72
-
73
- box-sizing: border-box;
74
-
75
- }
76
-
77
- ```
78
-
79
-
80
-
81
- 横幅`width: 70%;`の要素の子要素にも`width: 70%;`が指定されている場合、
82
-
83
- 画面全体からすると49%くらいのサイズになってしまいます。
84
-
85
-
86
-
87
- `width: 70%;`というのは、「親要素に対して横幅70%」という意味です。画面全体に対して横幅70%にしたいのであれば`width: 70vw;`を使ってください。

1

修正

2020/04/24 22:31

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- まず「main」といっているのは、「width: 70%;」を指定している要素のことだと理解しました。
5
+ まず「main」といのは、「width: 70%;」を指定している要素のことだと理解しました。
6
6
 
7
7
 
8
8