HOME > 開発者向けBLOG > Webデザイン >  画像の下にテキストを回り込ませる

Technology Note 開発者向けBLOG

Webデザイン

画像の下にテキストを回り込ませる

こんにちは、ゼノフィ渡部です。

画像の下にテキストを回り込ませる方法をご紹介いたします。

画像が左寄せ、右寄せのクラスを作成しました。「.img_l」が左寄せ、「.img_r」が右寄せになります。それぞれ、imgにタグに直接記述します。

1
2
3
4
5
6
7
8
9
.img_l {
  float: left;
  margin: 0 20px 20px 0;
}
 
.img_r {
  float: right;
  margin: 0 0 20px 20px;
}

HTMLのソースは下記になります。imgとテキストの順番は変わっていません。imgに記述するクラスのみが変わっています。

「class=”img_l”」が画像の左寄せ、「class=”img_r”」の画像の右寄せとなります。

1
2
3
4
5
6
7
8
9
10
11
<!-- 左寄せ -->
<div class="mb20">
    <img src="img_box.gif" width="100" height="100" alt="ボックス" class="img_l" />
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>
 
<!-- 右寄せ -->
<div class="mb20">
    <img src="img_box.gif" width="100" height="100" alt="ボックス" class="img_r" />
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>

次に画像の周囲にボーダーがあるものと、キャプションが付きでテキストがまわりこむスタイルを作成しました。1行目の「img_l_box .grid」と「img_r_box .grid」によってボーダー付きで、画像を垂直中央にしています。「img_l_box」が画像を左寄せ、「img_r_box」で画像を右寄せにしています。

23行目の「.cap_block 」でキャプションを画像枠と同じ幅内で中央に表示させています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.img_l_box .grid,
.img_r_box .grid {
  display: table-cell;
  width: 120px;
  height: 120px;
  line-height: 0;
  vertical-align: middle;
  border: 1px solid #CCC;
  text-align: center;
  layout-grid-line: 120px; /* IE用 */
}
 
.img_l_box {
  float: left;
  margin: 0 20px 20px 0;
}
 
.img_r_box {
  float: right;
  margin: 0 0 20px 20px;
}
 
.cap_block {
  width: 122px;
  text-align: center;
}

下記がHTMLソースになります。画像にボーダー付き、キャプション付きでそれぞれ画像が左寄せ、右寄せとなっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- 左寄せ(ボーダーあり) -->
<div class="mb20">
    <div class="img_l_box">
        <div class="set_position grid">
            <img src="img_box.gif" width="100" height="100" alt="ボックス" />
        </div>
    </div>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>
 
<!-- 右寄せ(ボーダーあり) -->
<div class="mb20">
    <div class="img_r_box">
        <div class="set_position grid">
            <img src="img_box.gif" width="100" height="100" alt="ボックス" />
        </div>
    </div>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>
 
<!-- 左寄せ(ボーダーあり・キャプション付き) -->
<div class="mb20">
    <div class="img_l_box">
        <div class="cap_block">
            <div class="set_position grid">
                <img src="img_box.gif" width="100" height="100" alt="ボックス" />
            </div>
            キャプション
        </div>
    </div>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>
 
<!-- 右寄せ(ボーダーあり・キャプション付き -->
<div class="mb20">
    <div class="img_r_box">
        <div class="cap_block">
            <div class="set_position grid">
                <img src="img_box.gif" width="100" height="100" alt="ボックス" />
            </div>
            キャプション
        </div>
    </div>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>

サンプルを見ると画像がテキストの下に回り込んでいることがわかります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.box_area {
  width: 600px;
}
 
.mb20 {
  margin: 0 0 20px;
}
 
/* imgに直接記述・左寄せと右寄せ */
.img_l {
  float: left;
  margin: 0 20px 20px 0;
}
 
.img_r {
  float: right;
  margin: 0 0 20px 20px;
}
 
/* divに記述・左寄せと右寄せ(ボーダー付き) */
.img_l_box .grid,
.img_r_box .grid {
  display: table-cell;
  width: 120px;
  height: 120px;
  line-height: 0;
  vertical-align: middle;
  border: 1px solid #CCC;
  text-align: center;
  layout-grid-line: 120px; /* IE用 */
}
 
.img_l_box {
  float: left;
  margin: 0 20px 20px 0;
}
 
.img_r_box {
  float: right;
  margin: 0 0 20px 20px;
}
 
.cap_block {
  width: 122px;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<div class="box_area">
 
    <p>
        画像左寄せ
    </p>
 
    <!-- 左寄せ -->
    <div class="mb20">
        <img src="img_box.gif" width="100" height="100" alt="ボックス" class="img_l" />
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
    <p>
        画像右寄せ
    </p>
 
    <!-- 右寄せ -->
    <div class="mb20">
        <img src="img_box.gif" width="100" height="100" alt="ボックス" class="img_r" />
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
    <p>
        画像左寄せボーダーあり
    </p>
 
    <!-- 左寄せ(ボーダーあり) -->
    <div class="mb20">
        <div class="img_l_box">
            <div class="set_position grid">
                <img src="img_box.gif" width="100" height="100" alt="ボックス" />
            </div>
        </div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
    <p>
        画像右寄せボーダーあり
    </p>
 
    <!-- 右寄せ(ボーダーあり) -->
    <div class="mb20">
        <div class="img_r_box">
            <div class="set_position grid">
                <img src="img_box.gif" width="100" height="100" alt="ボックス" />
            </div>
        </div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
    <p>
        画像左寄せボーダーあり・キャプション付き
    </p>
 
    <!-- 左寄せ(ボーダーあり・キャプション付き) -->
    <div class="mb20">
        <div class="img_l_box">
            <div class="cap_block">
                <div class="set_position grid">
                    <img src="img_box.gif" width="100" height="100" alt="ボックス" />
                </div>
                キャプション
            </div>
        </div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
    <p>
        画像右寄せボーダーあり・キャプション付き
    </p>
 
    <!-- 右寄せ(ボーダーあり・キャプション付き -->
    <div class="mb20">
        <div class="img_r_box">
            <div class="cap_block">
                <div class="set_position grid">
                    <img src="img_box.gif" width="100" height="100" alt="ボックス" />
                </div>
                キャプション
            </div>
        </div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
    </div>
 
</div>

PAGETOP