HOME > > > CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

CSS「border-radius」を使って角丸を表現する

角丸は元々画像をトリミングをし背景に設置して表現していましたが、CSS3.0になってから「border-radius」を使って角丸に対応する事が可能になりました。ですが、相変わらずIEを筆頭に各ブラウザで対応・未対応があります。
各ブラウザで角丸になる様にCSSを設定しましょう。

基本のソース

divの中の文字(白)に背景(黒)を付けて、角を5px丸くします。
HTML・cssの基本ソースは以下の様に書きます。

HTML


<div class="box">サンプル</div>

CSS


div .box{
border-radius: 5px;
color: #fff;
background-color: #000;
}

Safari・Chrome・Firefox・operaに対応

Safari・Chrome・Firefox・operaに対応する為に、基本ソースのCSSに付け加えてます。

CSS


div .box{
-webkit-border-radius: 5px;/* for Safari and Chrome */
-moz-border-radius: 5px; /* for Firefox */
-o-border-radius: 5px; /* for opera */
border-radius: 5px;
color: #fff;
background-color: #000;
}

この様に「-webkit-border-radius」はサファリ・グーグルクロム、「-moz-border-radius」はファイアーフォックス、「-o-border-radius」はオペラで対応できる様に付け加えます。

そしていつもちょっと手がかかるIE

IEに関しては相変わらずちょっとだけ手を掛けます。
IE6~8でも一部のCSS3が表現できる「CSS3 PIE」を使います。
「CSS3 PIE」は「border-radius」の他に「box-shadow」等にも使えます。

手順1:CSS3 PIEをダウンロード

下記のサイトよりCSS3 PIEをダウンロードしてきます。

CSS3 decorations for IE

PIE

手順2:「PIE.htc」を設置

ダウンロードするとファイルがいくつか入っていますが、「PIE.htc」以外は使用しません。
「PIE.htc」だけを自分のサイト内任意の場所に設置してください。

手順3:「PIE.htc」を読み込む

PIE.htc」をCSSで読み込みます。
PIE.htc読み込みを加えたCSSは以下になります。
※読み込みのパスは任意ですので変更してください。


div .box{
-webkit-border-radius: 5px;/* for Safari and Chrome */
-moz-border-radius: 5px; /* for Firefox */
-o-border-radius: 5px; /* for opera */
behavior: url('PIE.htc');/* for IE */
border-radius: 5px;
color: #fff;
background-color: #000;
}

最新ブラウザであれば対応可能

各ブラウザとも最新であれば問題なく「border-radius」表示はされると思います。IEも9・10共に問題なさそうです。
ですがIE8の方はまだいらっしゃいますし、他のブラウザも全員が最新という訳ではありません。
もうしばらく気をつかっておこうかなと思います。(今年いっぱいでIE8ともお別れなのでタイミングですね。)

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2015.05.06