teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

追記

2019/07/02 14:18

投稿

yoshinavi
yoshinavi

スコア3525

answer CHANGED
@@ -32,7 +32,6 @@
32
32
  .earth {
33
33
  box-sizing: border-box;
34
34
  display: inline-block;
35
- width: 330px;
36
35
  border: solid 1px #000; /* ← 分かりやすく枠線を付けています。 */
37
36
  }
38
37
 
@@ -45,4 +44,6 @@
45
44
  ```
46
45
  `position`関連は、全て削除してください。
47
46
  HTMLに余分な空白が含まれているので、削除してください。
48
- HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。
47
+ HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。
48
+
49
+ ※余分なコードがあったので修正しました。(^^;)

3

追記

2019/07/02 14:18

投稿

yoshinavi
yoshinavi

スコア3525

answer CHANGED
@@ -43,5 +43,6 @@
43
43
  text-align: left;
44
44
  }
45
45
  ```
46
+ `position`関連は、全て削除してください。
46
47
  HTMLに余分な空白が含まれているので、削除してください。
47
48
  HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

2

追記

2019/07/02 13:47

投稿

yoshinavi
yoshinavi

スコア3525

answer CHANGED
@@ -2,4 +2,46 @@
2
2
  提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てが`position:absolute;`されているので、**親要素の高さが「0(ゼロ)」**のため、親要素からハミ出してます。
3
3
 
4
4
  -追記-
5
- 表現を一部、修正しました。
5
+ 表現を一部、修正しました。
6
+
7
+ ---
8
+ 「yambejp」さんと、ほぼ同じで、該当箇所のみです。
9
+
10
+ ```CSS
11
+ .space-full {
12
+ background-color: powderblue; /* ← 分かりやすく色を付けています。 */
13
+ }
14
+
15
+ .space-top3 {
16
+ /* 設定削除 */
17
+ }
18
+
19
+ .space-top3-2 {
20
+ text-align: center;
21
+ }
22
+
23
+ .space-top3 h2 {
24
+ font-size:32px;
25
+ font-weight:bold;
26
+ font-style:solid;
27
+ text-align:center;
28
+ }
29
+
30
+ .mail,
31
+ .watch,
32
+ .earth {
33
+ box-sizing: border-box;
34
+ display: inline-block;
35
+ width: 330px;
36
+ border: solid 1px #000; /* ← 分かりやすく枠線を付けています。 */
37
+ }
38
+
39
+ .mail p,
40
+ .watch p,
41
+ .earth p {
42
+ width: 330px;
43
+ text-align: left;
44
+ }
45
+ ```
46
+ HTMLに余分な空白が含まれているので、削除してください。
47
+ HTML、CSS共に「インデント」を揃えて作成されると良いかと思います。

1

追記

2019/07/02 13:45

投稿

yoshinavi
yoshinavi

スコア3525

answer CHANGED
@@ -1,2 +1,5 @@
1
1
  崩れる理由:
2
- 提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てが`position:absolute;`されているので、**親要素の高さが「0(ゼロ)」**のため、CSSが適用されせん
2
+ 提示のコードで見ると、HTML上では「親子」の関係が記載されていますが、CSS上では、子要素全てが`position:absolute;`されているので、**親要素の高さが「0(ゼロ)」**のため、親要素からハミ出してま
3
+
4
+ -追記-
5
+ 表現を一部、修正しました。