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

Technology Note 開発者向けBLOG

Webデザイン

角丸単色を表現

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

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

「div.corner_simple_top」、「div.corner_simple_bototm」に共通の幅を指定します。「div.corner_simple_top」では角丸の上部分とテキストの間のスペースを「padding: 12px 0 0;」で調整し、「top」で角丸(上)画像(302×4)をテキストの上から表示しています。また、「#999」で角丸ボックス全体に背景色を指定しています。この指定がないと、「background」で出している画像以外の場所が白くなり、完全な角丸のボックスにはなりません。

「div.corner_simple_bottom」では角丸の下部分とテキストの間のスペースを「padding: 0 0 12px;」で調整し、「bottom」で角丸(下)画像(302×4)をテキストの下から表示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 共通プロパティ */
div.corner_simple_top,
div.corner_simple_bototm {
  width: 302px;
}
 
/* 角丸の上部分 */
div.corner_simple_top {
  padding: 12px 0 0; /* 角丸の上部分とテキストの間のスペース */
  background: url(bg_corner_simple_top.gif) #999 no-repeat top; /* 角丸(上)画像をテキストの上から表示しつつ、「#999」で角丸ボックス全体のカラーを指定 */
}
 
/* 角丸の下部分 */
div.corner_simple_bottom {
  padding: 0 0 12px; /* 角丸の下部分とテキストの間のスペース */
  background: url(bg_corner_simple_bottom.gif) no-repeat bottom; /* 角丸(下)画像をテキストの下から表示 */
}

以前ご紹介した枠線角丸と同じく、ネスト構造になっています。枠線角丸と違う点は、線ではなく色で表現する関係でdivが一つ減っています。

1
2
3
4
5
6
7

<div class="corner_simple_top">
    <div class="corner_simple_bottom">
        <p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </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

/* 共通プロパティ */
div.corner_simple_top,
div.corner_simple_bototm {
  width: 302px;
}
 
/* 角丸の上部分 */
div.corner_simple_top {
  padding: 12px 0 0; /* 角丸の上部分とテキストの間のスペース */
  background: url(bg_corner_simple_top.gif) #999 no-repeat top; /* 角丸(上)画像をテキストの上から表示しつつ、「#999」で角丸ボックス全体のカラーを指定 */
}
 
/* 角丸の下部分 */
div.corner_simple_bottom {
  padding: 0 0 12px; /* 角丸の下部分とテキストの間のスペース */
  background: url(bg_corner_simple_bottom.gif) no-repeat bottom; /* 角丸(下)画像をテキストの下から表示 */
}
 
/* テキスト */
div.corner_simple_bottom p {
  margin: 0; /* 余分なマージンを消去 */
  padding: 0 12px; /* テキストの左右のスペース */
  color: #FFF;
}

HTML

1
2
3
4
5
6
7

<div class="corner_simple_top">
    <div class="corner_simple_bottom">
        <p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
</div>

<

>

PAGETOP