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

編集履歴

回答編集履歴

5

修正

2015/06/08 10:16

投稿

flat
flat

スコア617

test CHANGED
@@ -116,9 +116,9 @@
116
116
 
117
117
  **追記**
118
118
 
119
- 画面いっぱいに画像を表示させたい場合はCSSを次の様にして下さい。
119
+ 画面いっぱいに画像を表示させたい場合は次の様にして下さい。
120
-
120
+
121
- 'background'プロパティなどは適宜変更して下さい。
121
+ `background`プロパティなどは適宜変更して下さい。
122
122
 
123
123
  ```lang-HTML
124
124
 
@@ -194,36 +194,24 @@
194
194
 
195
195
  <div class="content">
196
196
 
197
- .content
198
-
199
197
  <div class="box"><img src="test.jpg"></div>
200
198
 
201
- text
202
-
203
- </div>
199
+ </div>
204
-
205
-
206
-
200
+
201
+
202
+
207
- <div class="content">
203
+ <div class="content">
208
-
209
- .content
210
204
 
211
205
  <div class="box"><img src="test.jpg"></div>
212
206
 
213
- text
214
-
215
- </div>
207
+ </div>
216
-
217
-
218
-
208
+
209
+
210
+
219
- <div class="content">
211
+ <div class="content">
220
-
221
- .content
222
212
 
223
213
  <div class="box"><img src="test.jpg"></div>
224
214
 
225
- text
226
-
227
215
  </div>
228
216
 
229
217
 

4

質問への追記

2015/06/08 10:16

投稿

flat
flat

スコア617

test CHANGED
@@ -111,3 +111,125 @@
111
111
  </html>
112
112
 
113
113
  ```
114
+
115
+
116
+
117
+ **追記**
118
+
119
+ 画面いっぱいに画像を表示させたい場合はCSSを次の様にして下さい。
120
+
121
+ 'background'プロパティなどは適宜変更して下さい。
122
+
123
+ ```lang-HTML
124
+
125
+ <!DOCTYPE html>
126
+
127
+ <html>
128
+
129
+ <head>
130
+
131
+ <style type="text/css">
132
+
133
+ <!--
134
+
135
+ body {
136
+
137
+ margin: 0; /* ブラウザが挿入するmarginを取り除く */
138
+
139
+ padding: 10px; /* 10px */
140
+
141
+ }
142
+
143
+
144
+
145
+ .content {
146
+
147
+ display: block;
148
+
149
+ margin-top: 10px;
150
+
151
+ padding: 10px; /* 10px */
152
+
153
+ background: #fbb;
154
+
155
+ }
156
+
157
+
158
+
159
+ /*
160
+
161
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
162
+
163
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10)] = 20
164
+
165
+ */
166
+
167
+ .box {
168
+
169
+ margin: 0 -20px;
170
+
171
+ background: #bdf;
172
+
173
+ }
174
+
175
+
176
+
177
+ .box img {
178
+
179
+ max-width: 100%;
180
+
181
+ height: auto;
182
+
183
+ }
184
+
185
+ -->
186
+
187
+ </style>
188
+
189
+ </head>
190
+
191
+ <body>
192
+
193
+ body
194
+
195
+ <div class="content">
196
+
197
+ .content
198
+
199
+ <div class="box"><img src="test.jpg"></div>
200
+
201
+ text
202
+
203
+ </div>
204
+
205
+
206
+
207
+ <div class="content">
208
+
209
+ .content
210
+
211
+ <div class="box"><img src="test.jpg"></div>
212
+
213
+ text
214
+
215
+ </div>
216
+
217
+
218
+
219
+ <div class="content">
220
+
221
+ .content
222
+
223
+ <div class="box"><img src="test.jpg"></div>
224
+
225
+ text
226
+
227
+ </div>
228
+
229
+
230
+
231
+ </body>
232
+
233
+ </html>
234
+
235
+ ```

3

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

2015/06/08 10:13

投稿

flat
flat

スコア617

test CHANGED
@@ -40,6 +40,14 @@
40
40
 
41
41
 
42
42
 
43
+ /*
44
+
45
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
46
+
47
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
48
+
49
+ */
50
+
43
51
  .box {
44
52
 
45
53
  margin: 10px -21px;
@@ -51,14 +59,6 @@
51
59
  background: #bdf;
52
60
 
53
61
  }
54
-
55
- /*
56
-
57
- * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
58
-
59
- * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
60
-
61
- */
62
62
 
63
63
  -->
64
64
 

2

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

2015/06/08 08:19

投稿

flat
flat

スコア617

test CHANGED
@@ -1,6 +1,6 @@
1
1
  分かりやすくするために色々CSSでプロパティを指定していますが、コメント部分以外は適宜変更して下さい。
2
2
 
3
- ちなみに`.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
3
+ `.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
4
4
 
5
5
  ```lang-HTML
6
6
 
@@ -10,19 +10,15 @@
10
10
 
11
11
  <head>
12
12
 
13
- <meta charset="utf-8">
14
-
15
- <title>title</title>
16
-
17
13
  <style type="text/css">
18
14
 
19
15
  <!--
20
16
 
21
- body{
17
+ body {
22
18
 
23
19
  margin: 10px;
24
20
 
25
- padding: 10px;
21
+ padding: 10px; /* 10px */
26
22
 
27
23
  border: 1px solid #000;
28
24
 
@@ -32,9 +28,13 @@
32
28
 
33
29
  .content {
34
30
 
35
- margin-bottom: 10px;
31
+ margin-top: 10px;
36
32
 
33
+ padding: 10px; /* 10px */
34
+
37
- border: 1px solid #f00;
35
+ border: 1px solid #f00; /* 1px */
36
+
37
+ background: #fbb;
38
38
 
39
39
  }
40
40
 
@@ -42,13 +42,23 @@
42
42
 
43
43
  .box {
44
44
 
45
- margin: 10px -11px; /* marginのrightとleftに負の値を指定する */
45
+ margin: 10px -21px;
46
+
47
+ padding: 10px;
46
48
 
47
49
  border: 1px solid #00f;
48
50
 
51
+ background: #bdf;
52
+
49
53
  }
50
54
 
55
+ /*
51
56
 
57
+ * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
58
+
59
+ * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
60
+
61
+ */
52
62
 
53
63
  -->
54
64
 
@@ -58,23 +68,43 @@
58
68
 
59
69
  <body>
60
70
 
71
+ body
72
+
61
73
  <div class="content">
62
74
 
75
+ .content
76
+
63
- <div class="box">test.</div>
77
+ <div class="box">.box</div>
78
+
79
+ text
64
80
 
65
81
  </div>
66
82
 
83
+
84
+
67
85
  <div class="content">
68
86
 
87
+ .content
88
+
69
- <div class="box">test.</div>
89
+ <div class="box">.box</div>
90
+
91
+ text
70
92
 
71
93
  </div>
72
94
 
95
+
96
+
73
97
  <div class="content">
74
98
 
99
+ .content
100
+
75
- <div class="box">test.</div>
101
+ <div class="box">.box</div>
102
+
103
+ text
76
104
 
77
105
  </div>
106
+
107
+
78
108
 
79
109
  </body>
80
110
 

1

修正

2015/06/08 08:16

投稿

flat
flat

スコア617

test CHANGED
@@ -1,4 +1,6 @@
1
1
  分かりやすくするために色々CSSでプロパティを指定していますが、コメント部分以外は適宜変更して下さい。
2
+
3
+ ちなみに`.box`の`margin`で指定する負の値はボックスモデルを考慮して指定して下さい。
2
4
 
3
5
  ```lang-HTML
4
6
 
@@ -40,7 +42,7 @@
40
42
 
41
43
  .box {
42
44
 
43
- margin: 10px -12px; /* marginのrightとleftに負の値を指定する */
45
+ margin: 10px -11px; /* marginのrightとleftに負の値を指定する */
44
46
 
45
47
  border: 1px solid #00f;
46
48