画像を使わずにCSSだけで角丸を作る方法、PART1

ブロック要素の角丸を作るには、画像を使って実現させる方法が一般的ですが、画像を使わずにCSSだけで角丸を実現させる方法もあります。アンチエイリアスが効かないので滑らかな角丸はできないですが、画像を読み込む必要がない分、ページの表示スピードも若干速くなると思います。たぶん・・・ わざわざ角丸画像を作らなくて済むので、手っ取り早く角丸を作りたい時に使えるテクニックです。

HTML記述

 
<div class="box">
    <!-- 角丸トップ -->
    <span class="rtop">
        <span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
    </span>
    <!-- 角丸トップ -->
 
    <!-- 中身 -->
    <p class="text">ブロック要素の角丸を作るには、画像を使って実現させる方法が一般的ですが、画像を使わずにCSSだけで角丸を実現させる方法もあります。アンチエイリアスが効かないので滑らかな角丸はできないですが、画像を読み込む必要がない分、ページの表示スピードも若干速くなると思います。たぶん・・・
    わざわざ角丸画像を作らなくて済むので、手っ取り早く角丸を作りたい時に使えるテクニックです。</p>
    <!-- 中身 -->
 
    <!-- 角丸ボトム-->
    <span class="rbottom">
        <span class="r4"></span> <span class="r3"></span> <span class="r2"></span> <span class="r1"></span>
    </span>
    <!-- 角丸ボトム -->
</div>
 

CSS記述

 
.box p.text {
    padding: 5px 10px;
    background-color: #2C83AE;
    color: #FFFFFF;
    font-size: 0.8em;
    line-height: 1.3;
}
 
.box span.rtop,
.box span.rbottom {
    display: block;
}
 
.box span.rtop span,
.box span.rbottom span {
    display: block;
    height: 1px;
    overflow: hidden;
    background-color: #2C83AE;
}
 
.box span.r1{margin: 0 5px;}
 
.box span.r2{margin: 0 3px;}
 
.box span.r3{margin: 0 2px;}
 
.box span.r4 {
    margin: 0 1px;
    height: 2px;
}
 

構造図

→角丸ボックスサンプル

「角丸トップ」と「角丸ボトム」の部分で角丸を実現しています。 「角丸トップ」と「角丸ボトム」のspanタグをdisplay:block;にしてインライン要素からブロック要素へと変換している理由は、背景色や高さを指定できるようにする為です。 span.r1～r4の幅を5px、3px、2px、1pxと余白幅を変更して角丸を作っていきます。（もっと滑らかに角丸を表現したいならr5、r6～と増やしていき、余白幅を細かく設定するだけです） タグの中は空っぽなのでHTMLの文法としてはNGですが、「手軽にできる」「幅可変に対応」などメリットの部分も多いので、適正な判断をして使うのが良いと思います。

手軽に角丸を実現させる方法を「画像を使わずにCSSだけで角丸を作る方法、PART2」に載せています。どうぞご覧下さい。