teratail
回答率
85.25%
質問するログイン新規登録
トップCSSに関する質問ある要素の上で、幅いっぱいまで広げるCSS

編集履歴

回答編集履歴

5

修正

2015/06/08 10:16

投稿

flat
flat

スコア617

answer CHANGED
@@ -57,8 +57,8 @@
57
57
  ```
58
58
 
59
59
  **追記**
60
- 画面いっぱいに画像を表示させたい場合はCSSを次の様にして下さい。
60
+ 画面いっぱいに画像を表示させたい場合は次の様にして下さい。
61
- 'background'プロパティなどは適宜変更して下さい。
61
+ `background`プロパティなどは適宜変更して下さい。
62
62
  ```lang-HTML
63
63
  <!DOCTYPE html>
64
64
  <html>
@@ -96,21 +96,15 @@
96
96
  <body>
97
97
  body
98
98
  <div class="content">
99
- .content
100
99
  <div class="box"><img src="test.jpg"></div>
101
- text
102
100
  </div>
103
101
 
104
102
  <div class="content">
105
- .content
106
103
  <div class="box"><img src="test.jpg"></div>
107
- text
108
104
  </div>
109
105
 
110
106
  <div class="content">
111
- .content
112
107
  <div class="box"><img src="test.jpg"></div>
113
- text
114
108
  </div>
115
109
 
116
110
  </body>

4

質問への追記

2015/06/08 10:16

投稿

flat
flat

スコア617

answer CHANGED
@@ -54,4 +54,65 @@
54
54
 
55
55
  </body>
56
56
  </html>
57
+ ```
58
+
59
+ **追記**
60
+ 画面いっぱいに画像を表示させたい場合はCSSを次の様にして下さい。
61
+ 'background'プロパティなどは適宜変更して下さい。
62
+ ```lang-HTML
63
+ <!DOCTYPE html>
64
+ <html>
65
+ <head>
66
+ <style type="text/css">
67
+ <!--
68
+ body {
69
+ margin: 0; /* ブラウザが挿入するmarginを取り除く */
70
+ padding: 10px; /* 10px */
71
+ }
72
+
73
+ .content {
74
+ display: block;
75
+ margin-top: 10px;
76
+ padding: 10px; /* 10px */
77
+ background: #fbb;
78
+ }
79
+
80
+ /*
81
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
82
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10)] = 20
83
+ */
84
+ .box {
85
+ margin: 0 -20px;
86
+ background: #bdf;
87
+ }
88
+
89
+ .box img {
90
+ max-width: 100%;
91
+ height: auto;
92
+ }
93
+ -->
94
+ </style>
95
+ </head>
96
+ <body>
97
+ body
98
+ <div class="content">
99
+ .content
100
+ <div class="box"><img src="test.jpg"></div>
101
+ text
102
+ </div>
103
+
104
+ <div class="content">
105
+ .content
106
+ <div class="box"><img src="test.jpg"></div>
107
+ text
108
+ </div>
109
+
110
+ <div class="content">
111
+ .content
112
+ <div class="box"><img src="test.jpg"></div>
113
+ text
114
+ </div>
115
+
116
+ </body>
117
+ </html>
57
118
  ```

3

コメント位置がおかしかったのを修正

2015/06/08 10:13

投稿

flat
flat

スコア617

answer CHANGED
@@ -19,16 +19,16 @@
19
19
  background: #fbb;
20
20
  }
21
21
 
22
+ /*
23
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
24
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
25
+ */
22
26
  .box {
23
27
  margin: 10px -21px;
24
28
  padding: 10px;
25
29
  border: 1px solid #00f;
26
30
  background: #bdf;
27
31
  }
28
- /*
29
- * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
30
- * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
31
- */
32
32
  -->
33
33
  </style>
34
34
  </head>

2

コードより分かりやすく修正

2015/06/08 08:19

投稿

flat
flat

スコア617

answer CHANGED
@@ -1,42 +1,57 @@
1
1
  分かりやすくするために色々CSSでプロパティを指定していますが、コメント部分以外は適宜変更して下さい。
2
- ちなみに`.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
2
+ `.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
3
3
  ```lang-HTML
4
4
  <!DOCTYPE html>
5
5
  <html>
6
6
  <head>
7
- <meta charset="utf-8">
8
- <title>title</title>
9
7
  <style type="text/css">
10
8
  <!--
11
- body{
9
+ body {
12
10
  margin: 10px;
13
- padding: 10px;
11
+ padding: 10px; /* 10px */
14
12
  border: 1px solid #000;
15
13
  }
16
14
 
17
15
  .content {
18
- margin-bottom: 10px;
16
+ margin-top: 10px;
17
+ padding: 10px; /* 10px */
19
- border: 1px solid #f00;
18
+ border: 1px solid #f00; /* 1px */
19
+ background: #fbb;
20
20
  }
21
21
 
22
22
  .box {
23
- margin: 10px -11px; /* marginのrightとleftに負の値を指定する */
23
+ margin: 10px -21px;
24
+ padding: 10px;
24
25
  border: 1px solid #00f;
26
+ background: #bdf;
25
27
  }
26
-
28
+ /*
29
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
30
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
31
+ */
27
32
  -->
28
33
  </style>
29
34
  </head>
30
35
  <body>
36
+ body
31
37
  <div class="content">
38
+ .content
32
- <div class="box">test.</div>
39
+ <div class="box">.box</div>
40
+ text
33
41
  </div>
42
+
34
43
  <div class="content">
44
+ .content
35
- <div class="box">test.</div>
45
+ <div class="box">.box</div>
46
+ text
36
47
  </div>
48
+
37
49
  <div class="content">
50
+ .content
38
- <div class="box">test.</div>
51
+ <div class="box">.box</div>
52
+ text
39
53
  </div>
54
+
40
55
  </body>
41
56
  </html>
42
57
  ```

1

修正

2015/06/08 08:16

投稿

flat
flat

スコア617

answer CHANGED
@@ -1,4 +1,5 @@
1
1
  分かりやすくするために色々CSSでプロパティを指定していますが、コメント部分以外は適宜変更して下さい。
2
+ ちなみに`.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
2
3
  ```lang-HTML
3
4
  <!DOCTYPE html>
4
5
  <html>
@@ -19,7 +20,7 @@
19
20
  }
20
21
 
21
22
  .box {
22
- margin: 10px -12px; /* marginのrightとleftに負の値を指定する */
23
+ margin: 10px -11px; /* marginのrightとleftに負の値を指定する */
23
24
  border: 1px solid #00f;
24
25
  }
25
26