teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問CSSで余白が消えません

編集履歴

回答編集履歴

4

URL

2020/04/30 09:39

投稿

rikutennis
rikutennis

スコア55

test CHANGED
@@ -1,4 +1,4 @@
1
- [https://jsfiddle.net/awuxqejb/1/](https://jsfiddle.net/awuxqejb/1/)
1
+ [動くサンプル](https://jsfiddle.net/awuxqejb/2/)
2
2
 
3
3
  ```HTML
4
4
 

3

シンプルに

2020/04/30 09:39

投稿

rikutennis
rikutennis

スコア55

test CHANGED
@@ -1,49 +1,53 @@
1
- ```CSS
2
-
3
- #sidecontact{width: 100px; float: right;}
4
-
5
- ```
6
-
7
- を
8
-
9
- ```CSS
10
-
11
- #sidecontact{width: 100px; float: left;}
1
+ [https://jsfiddle.net/awuxqejb/1/](https://jsfiddle.net/awuxqejb/1/)
12
-
13
- ```
14
-
15
- にするとかですか？？
16
-
17
-
18
-
19
- 他は
20
2
 
21
3
  ```HTML
22
4
 
23
5
  <aside id="sidebar">
24
6
 
25
- <section>
7
+ <section>
26
8
 
27
- <span id="sidebanner">
9
+ <div id="sidebanner">
28
10
 
29
- <h2>関連リンク</h2>
11
+ <h2>関連リンク</h2>
30
12
 
13
+ </div>
31
14
 
15
+ <div id="sidecontact">
32
16
 
33
- </span>
17
+ <h2>ご予約・お問い合わせ</h2>
34
18
 
35
- <span id="sidecontact">
19
+ </div>
36
20
 
37
- <h2>ご予約・お問い合わせ</h2>
21
+ </section>
38
22
 
39
-
40
-
41
- </span>
42
-
43
- </section>
44
-
45
- </aside>
23
+ </aside>
46
24
 
47
25
  ```
48
26
 
27
+ ```CSS
28
+
29
+ #sidebar section {
30
+
31
+ display: flex;
32
+
33
+ }
34
+
35
+ #sidebanner {
36
+
37
+ padding: 20px;
38
+
49
- なども変わってくるとお思います。
39
+ background: #555;
40
+
41
+ margin: 0 20px 0 0;
42
+
43
+ }
44
+
45
+ #sidecontact {
46
+
47
+ padding: 20px;
48
+
49
+ background: #ff0000;
50
+
51
+ }
52
+
53
+ ```

2

追記

2020/04/30 09:37

投稿

rikutennis
rikutennis

スコア55

test CHANGED
@@ -1,16 +1,22 @@
1
1
  ```CSS
2
2
 
3
- #sidebanner{margin-bottom: 50px;}
3
+ #sidecontact{width: 100px; float: right;}
4
4
 
5
5
  ```
6
6
 
7
- こちらの値を変更されましたか？？
7
+ を
8
8
 
9
+ ```CSS
10
+
9
- CSSは下のものが優先されるので下から見て行った方がいいです。
11
+ #sidecontact{width: 100px; float: left;}
12
+
13
+ ```
14
+
15
+ にするとかですか？？
10
16
 
11
17
 
12
18
 
13
-
19
+ 他は
14
20
 
15
21
  ```HTML
16
22
 
@@ -39,3 +45,5 @@
39
45
  </aside>
40
46
 
41
47
  ```
48
+
49
+ なども変わってくるとお思います。

1

追記

2020/04/30 09:17

投稿

rikutennis
rikutennis

スコア55

test CHANGED
@@ -7,3 +7,35 @@
7
7
  こちらの値を変更されましたか？？
8
8
 
9
9
  CSSは下のものが優先されるので下から見て行った方がいいです。
10
+
11
+
12
+
13
+
14
+
15
+ ```HTML
16
+
17
+ <aside id="sidebar">
18
+
19
+ <section>
20
+
21
+ <span id="sidebanner">
22
+
23
+ <h2>関連リンク</h2>
24
+
25
+
26
+
27
+ </span>
28
+
29
+ <span id="sidecontact">
30
+
31
+ <h2>ご予約・お問い合わせ</h2>
32
+
33
+
34
+
35
+ </span>
36
+
37
+ </section>
38
+
39
+ </aside>
40
+
41
+ ```