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

Technology Note 開発者向けBLOG

Webデザイン

CSSだけで角丸を表現

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

CSSだけで疑似的に角丸ボックスを表現する方法をご紹介いたします。

下記の4つパターンをご紹介いたします。

  1. 背景色のみで画面いっぱいまで伸びる
  2. 背景色のみで要素がある場所まで伸びる
  3. 背景色にボーダー付きで画面端まで伸びる
  4. 背景色にボーダー付きで要素がある場所まで伸びる

まず、1パターン目では7行目の「div.radius_block div」にある「padding: 1px 0;」で子要素であるp要素に対して、余白を挿入し、そのp要素と同じ背景色を指定しています。

13行目の「div.radius_block p」にある「margin: 0 -1px;」で左右をp要素の親divよりも外に出し、親であるdiv要素と同じ背景色を指定しています。こうすることにより背景色の重なりを意図的にずらし角丸を疑似的に表現しています。8行目の「margin: 0 1px;」はIE6用に指定しいています。IE6では14行目の「margin: 0 -1px; 」を「margin: 0 1px; 」で相殺しないと角丸に見えません。以上で1パターン目が表現できます。

次の2パターン目では19行目の「div.radius_inline_block」に「display: inline-block;」を指定し、要素のある場所まで背景色を表示させます。「display: inline;」ではなく「display: inline-block;」を指定する理由は、中の要素の「div.radius_inline_block div」がブロック要素なので「display: inline;」では画面端まで背景色が伸びてしまうということと、「div.radius_inline_block div」にマージンを指定する必要があるからです。「display: inline-block;」を指定する以外は1パターン目とプロパティは同じです。以上で2パターン目が表現できます。

3パターン目では42行目の「div.border_radius_block div」に「border-top: 1px solid #060;」、「border-bottom: 1px solid #060;」を、49行目の「div.border_radius_block p」に「border-right: 1px solid #060;」、「border-left: 1px solid #060;」を指定しボーダーを表示させています。「div.border_radius_block div」に左右のボーダーも一緒に指定しない理由は、50行目の「margin: 0 -1px;」で左右のボーダーを親である「div.border_radius_block div」よりも外に押し出してやる必要があるからです。これによりボーダーが付いた角丸に見えます。以上で3パターン目が表現できます。

4パターン目では57行目の「div.border_radius_inline_block」に「display: inline-block;」を指定し、要素のある場所まで背景色を表示させます。「display: inline;」を指定する理由は2パターン目と同じです。「display: inline-block;」を指定する以外は3パターン目とプロパティは同じです。以上で4パターン目が表現できます。

IE6とIE7は「display: inline-block;」に対応していないので、77行目から88行目にかけて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
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
86
87
88

/* 画面端まで伸びる */
div.radius_block {
  margin: 0 0 20px;
  color: #FFF;
}
 
div.radius_block div {
  margin: 0 1px;  /* IE6用 */
  padding: 1px 0; /* 上下の余白を子要素のp要素に対して挿入 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.radius_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* 要素がある場所まで伸びる */
div.radius_inline_block {
  display: inline-block; /* 要素のある場所まで表示 */
  margin: 0 0 20px;
  color: #FFF;
}
 
div.radius_inline_block div {
  margin: 0 1px;  /* IE6用 */
  padding: 1px 0; /* 上下の余白を子要素のp要素に対して挿入 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.radius_inline_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* ボーダー付きで画面端まで伸びる */
div.border_radius_block {
  margin: 0 0 20px;
  color: #FFF;
}
 
div.border_radius_block div {
  margin: 0 1px; /* IE6用 */
  border-top: 1px solid #060;    /* 上ボーダーを指定 */
  border-bottom: 1px solid #060; /* 下ボーダーを指定 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.border_radius_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  border-right: 1px solid #060; /* 右ボーダーを指定 */
  border-left: 1px solid #060;  /* 左ボーダーを指定 */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* ボーダー付きで要素がある場所まで伸びる */
div.border_radius_inline_block {
  display: inline-block;  /* 要素のある場所まで表示 */
  margin: 0 0 20px;
  color: #FFF;
}
 
div.border_radius_inline_block div {
  margin: 0 1px; /* IE6用 */
  border-top: 1px solid #060;    /* 上ボーダーを指定 */
  border-bottom: 1px solid #060; /* 下ボーダーを指定 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.border_radius_inline_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  border-right: 1px solid #060; /* 右ボーダーを指定 */
  border-left: 1px solid #060;  /* 左ボーダーを指定 */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
div.radius_inline_block,
div.border_radius_inline_block {
  _display: inline; /* display: inline-block;の代わり */
  _zoom: 1; /* 状況によって使用 */
}
 
/* IE7ハック */
*:first-child+html div.radius_inline_block,
*:first-child+html div.border_radius_inline_block {
  display: inline; /* display: inline-block;の代わり */
  zoom: 1; /* 状況によって使用 */
}

4パターンとも、要素の数は変わりません。

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

<!-- 画面端まで伸びる -->
<div class="radius_block">
    <div>
        <p>
            角丸ボックスが画面いっぱいに伸びます。
        </p>
    </div>
</div>
 
<!-- 要素がある場所まで伸びる -->
<div class="radius_inline_block">
    <div>
        <p>
            角丸ボックスが要素がある場所まで伸びます。
        </p>
    </div>
</div>
 
<!-- ボーダー付きで画面端まで伸びる -->
<div class="border_radius_block">
    <div>
        <p>
            ボーダー付きの角丸ボックスが画面いっぱいに伸びます。
        </p>
    </div>
</div>
 
<!-- ボーダー付きで要素がある場所まで伸びる -->
<div class="border_radius_inline_block">
    <div>
        <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
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
86
87
88
89
90
91
92
93
94

p {
  margin: 0;
  padding: 5px 10px;
}
 
/* 画面端まで伸びる */
div.radius_block {
  margin: 0 0 20px;
  color: #FFF;
}
 
div.radius_block div {
  margin: 0 1px;  /* IE6用 */
  padding: 1px 0; /* 上下の余白を子要素のp要素に対して挿入 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.radius_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* 要素がある場所まで伸びる */
div.radius_inline_block {
  display: inline-block; /* 要素のある場所まで表示 */
  margin: 0 0 20px;
  color: #FFF;
}
 
div.radius_inline_block div {
  margin: 0 1px;  /* IE6用 */
  padding: 1px 0; /* 上下の余白を子要素のp要素に対して挿入 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.radius_inline_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* ボーダー付きで画面端まで伸びる */
div.border_radius_block {
  margin: 0 0 20px;
  color: #FFF;
}
 
div.border_radius_block div {
  margin: 0 1px; /* IE6用 */
  border-top: 1px solid #060;    /* 上ボーダーを指定 */
  border-bottom: 1px solid #060; /* 下ボーダーを指定 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.border_radius_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  border-right: 1px solid #060; /* 右ボーダーを指定 */
  border-left: 1px solid #060;  /* 左ボーダーを指定 */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* ボーダー付きで要素がある場所まで伸びる */
div.border_radius_inline_block {
  display: inline-block;  /* 要素のある場所まで表示 */
  margin: 0 0 20px;
  color: #FFF;
}
 
div.border_radius_inline_block div {
  margin: 0 1px; /* IE6用 */
  border-top: 1px solid #060;    /* 上ボーダーを指定 */
  border-bottom: 1px solid #060; /* 下ボーダーを指定 */
  background: #98B950; /* 子であるp要素と同じ背景色に */
}
 
div.border_radius_inline_block p {
  margin: 0 -1px; /* 左右をp要素の親divよりも外に */
  border-right: 1px solid #060; /* 右ボーダーを指定 */
  border-left: 1px solid #060;  /* 左ボーダーを指定 */
  background: #98B950; /* 親であるdiv要素と同じ背景色に */
}
 
/* IE6ハック */
div.radius_inline_block,
div.border_radius_inline_block {
  _display: inline; /* display: inline-block;の代わり */
  _zoom: 1; /* 状況によって使用 */
}
 
/* IE7ハック */
*:first-child+html div.radius_inline_block,
*:first-child+html div.border_radius_inline_block {
  display: inline; /* display: inline-block;の代わり */
  zoom: 1; /* 状況によって使用 */
}

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

<!-- 画面端まで伸びる -->
<div class="radius_block">
    <div>
        <p>
            角丸ボックスが画面いっぱいに伸びます。
        </p>
    </div>
</div>
 
<!-- 要素がある場所まで伸びる -->
<div class="radius_inline_block">
    <div>
        <p>
            角丸ボックスが要素がある場所まで伸びます。
        </p>
    </div>
</div>
 
<!-- ボーダー付きで画面端まで伸びる -->
<div class="border_radius_block">
    <div>
        <p>
            ボーダー付きの角丸ボックスが画面いっぱいに伸びます。
        </p>
    </div>
</div>
 
<!-- ボーダー付きで要素がある場所まで伸びる -->
<div class="border_radius_inline_block">
    <div>
        <p>
            ボーダー付きの角丸ボックスが要素がある場所まで伸びます。
        </p>
    </div>
</div>

<

>

PAGETOP