分かりやすくするために色々CSSでプロパティを指定していますが、コメント部分以外は適宜変更して下さい。
.box
のmargin
で指定する負の値はボックスモデルを考慮して指定して下さい。
lang
1<!DOCTYPE html>
2<html>
3<head>
4<style type="text/css">
5<!--
6body {
7 margin: 10px;
8 padding: 10px; /* 10px */
9 border: 1px solid #000;
10}
11
12.content {
13 margin-top: 10px;
14 padding: 10px; /* 10px */
15 border: 1px solid #f00; /* 1px */
16 background: #fbb;
17}
18
19 /*
20 * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
21 * この場合は [bodyのpadding(10)] + [.contentのpadding(10) & border-width(1)] = 21
22 */
23 .box {
24 margin: 10px -21px;
25 padding: 10px;
26 border: 1px solid #00f;
27 background: #bdf;
28 }
29-->
30</style>
31</head>
32<body>
33body
34<div class="content">
35.content
36 <div class="box">.box</div>
37text
38</div>
39
40<div class="content">
41.content
42 <div class="box">.box</div>
43text
44</div>
45
46<div class="content">
47.content
48 <div class="box">.box</div>
49text
50</div>
51
52</body>
53</html>
追記
画面いっぱいに画像を表示させたい場合は次の様にして下さい。
background
プロパティなどは適宜変更して下さい。
lang
1<!DOCTYPE html>
2<html>
3<head>
4<style type="text/css">
5<!--
6body {
7 margin: 0; /* ブラウザが挿入するmarginを取り除く */
8 padding: 10px; /* 10px */
9}
10
11.content {
12 display: block;
13 margin-top: 10px;
14 padding: 10px; /* 10px */
15 background: #fbb;
16}
17
18 /*
19 * ここでmarginのrightとleftにボックスモデルを考慮した負の値を指定する
20 * この場合は [bodyのpadding(10)] + [.contentのpadding(10)] = 20
21 */
22 .box {
23 margin: 0 -20px;
24 background: #bdf;
25 }
26
27 .box img {
28 max-width: 100%;
29 height: auto;
30 }
31-->
32</style>
33</head>
34<body>
35body
36<div class="content">
37 <div class="box"><img src="test.jpg"></div>
38</div>
39
40<div class="content">
41 <div class="box"><img src="test.jpg"></div>
42</div>
43
44<div class="content">
45 <div class="box"><img src="test.jpg"></div>
46</div>
47
48</body>
49</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/08 09:14
2015/06/08 09:56
2015/06/08 10:06
2015/06/08 11:04