HOME > 開発者向けBLOG > Webデザイン >  角丸を表現

Technology Note 開発者向けBLOG

Webデザイン

角丸を表現

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

角丸ボックスを背景画像で表現する方法をご紹介いたします。

「div.line_box」、「div.corner_top」、「div.corner_bototm 」に共通の幅を指定します。「div.line_box」は302×1で作成した画像を「repeat-y」で縦にリピートしています。「div.corner_top」では角丸の上部分とテキストの間のスペースを「padding: 12px 0 0;」で調整し、「top」で角丸(上)画像(302×6)をテキストの上から表示しています。「div.corner_bottom」では角丸の下部分とテキストの間のスペースを「padding: 0 0 12px;」で調整し、「bottom」で角丸(下)画像(302×6)をテキストの下から表示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 共通プロパティ */
div.line_box,
div.corner_top,
div.corner_bototm {
  width: 302px;
}
 
/* 左右の縦線 */
div.line_box {
  background: url(bg_line.gif) repeat-y; /* 左右の線を縦にリピート */
}
 
/* 角丸の上部分 */
div.corner_top {
  padding: 12px 0 0; /* 角丸の上部分とテキストの間のスペース */
  background: url(bg_corner_top.gif) no-repeat top; /* 角丸(上)画像をテキストの上から表示 */
}
 
/* 角丸の下部分 */
div.corner_bottom {
  padding: 0 0 12px; /* 角丸の下部分とテキストの間のスペース */
  background: url(bg_corner_bottom.gif) no-repeat bottom; /* 角丸(下)画像をテキストの下から表示 */
}

HTMLのソースでは、「<div class="line_box">(左右の縦線)」からテキストの「<p>」要素までネストしていく構造になっているのがわかります。こうすることにより空のdivを作らず、かつ、テキストが増えた場合でも、角丸のボックスからテキストが溢れないようにしています。

1
2
3
4
5
6
7
8
9

<div class="line_box">
    <div class="corner_top">
        <div class="corner_bottom">
            <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
            </p>
        </div>
    </div>
</div>

CSS3の「border-radius」で簡単に角丸を実現できますが、IE6などCSS3に対応していないブラウザで角丸を実現する際には、一つの手段になりえるのではないでしょうか。

サンプル

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

/* 共通プロパティ */
div.line_box,
div.corner_top,
div.corner_bototm {
  width: 302px;
}
 
/* 左右の縦線 */
div.line_box {
  background: url(bg_line.gif) repeat-y; /* 左右の線を縦にリピート */
}
 
/* 角丸の上部分 */
div.corner_top {
  padding: 12px 0 0; /* 角丸の上部分とテキストの間のスペース */
  background: url(bg_corner_top.gif) no-repeat top; /* 角丸(上)画像をテキストの上から表示 */
}
 
/* 角丸の下部分 */
div.corner_bottom {
  padding: 0 0 12px; /* 角丸の下部分とテキストの間のスペース */
  background: url(bg_corner_bottom.gif) no-repeat bottom; /* 角丸(下)画像をテキストの下から表示 */
}
 
/* テキスト */
div.corner_bottom p {
  margin: 0; /* 余分なマージンを消去 */
  padding: 0 12px; /* テキストの左右のスペース */
}

HTML

1
2
3
4
5
6
7
8
9

<div class="line_box">
    <div class="corner_top">
        <div class="corner_bottom">
            <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
            </p>
        </div>
    </div>
</div>

<

>

PAGETOP