HOME > 開発者向けBLOG > Webデザイン >  縦と横に可変可能な角丸ボックス

Technology Note 開発者向けBLOG

Webデザイン

縦と横に可変可能な角丸ボックス

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

テーブルタグを使用せずに、縦と横に可変可能な角丸画像を表示する方法をご紹介いたします。

使用する画像は下記の4つです。

左上の角丸画像
左上の角丸画像(13×13)
右上の角丸画像
右上の角丸画像(13×13)
右下の角丸画像
右下の角丸画像(13×13)
左下の角丸画像
左下の角丸画像(13×13)

1行目の「.box_short」のクラスでは幅と左上の角丸画像と背景色を指定しています。

2行目の「#CCC」の指定で角丸の色が途切れないようにしています。「left top」で左上の角丸画像の位置を左上に表示しています。

6行目の「.tr」クラスの「right top」で右上の角丸画像の位置を右上に表示しています。

10行目の「.br」クラスの「right bottom」で右下の角丸画像の位置を右下に表示しています。

14行目の「.bl」クラスの「left bottom」で左下の角丸画像の位置を左下に表示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box_short {
  width: 300px;
  background: url(bg_tl.gif) #CCC no-repeat left top; /* 左上の角丸画像と背景色 */
}
 
.tr {
  background: url(bg_tr.gif) no-repeat right top;     /* 右上の角丸画像 */
}
 
.br {
  background: url(bg_br.gif) no-repeat right bottom;  /* 右下の角丸画像 */
}
 
.bl {
  background: url(bg_bl.gif) no-repeat left bottom;   /* 左下の角丸画像 */
}

HTMLはネスト構造にしています。

1
2
3
4
5
6
7
8
9
10
11
<div class="box_short">
    <div class="tr">
        <div class="br">
            <div class="bl">
                <p>
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                </p>
            </div>
        </div>
    </div>
</div>

サンプルでは画像と表示方法は同じで、長さの違う角丸ボックスを表示させています。2つの幅と高さの違うサンプルを見ると、縦と横の両方にボックスが可変していることが確認できます。

サンプル

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
.box_short {
  width: 300px;
  margin: 0 0 20px;
  background: url(bg_tl.gif) #CCC no-repeat left top; /* 左上の角丸画像と背景色 */
}
 
.box_long {
  width: 600px;
  background: url(bg_tl.gif) #CCC no-repeat left top; /* 左上の角丸画像と背景色 */
}
 
.tr {
  background: url(bg_tr.gif) no-repeat right top;     /* 右上の角丸画像 */
}
 
.br {
  background: url(bg_br.gif) no-repeat right bottom;  /* 右下の角丸画像 */
}
 
.bl {
  background: url(bg_bl.gif) no-repeat left bottom;   /* 左下の角丸画像 */
}
 
p {
  margin: 0;
  padding: 20px;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
<div class="box_short">
    <div class="tr">
        <div class="br">
            <div class="bl">
                <p>
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                </p>
            </div>
        </div>
    </div>
</div>

PAGETOP