border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる
IE8以下ではcss3のborder-radiusは使用できませんが、jQuery.cornerを使用すれば簡単に角丸にできます。
IE8以下にはjQuery.cornerプラグインを適用するようにして、IE9とその他のブラウザにはborder-radiusで角丸を作れば、実用的にborder-radiusを使っていけそうです。
！IE9でborder-radiusが適用されない場合
IE9でborder-radiusが適用されない事がありました。調べたら後方互換モードになってしまう事が原因のようです。以下のメタタグをヘッド内へ追加して解決しました。IE9 モードでレンダリングしなさいという指定です。
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
以下のように content に IE=edge と指定すると、最新のバージョンで読み込んでくれるようです。chrome=1 というのは Google Chrome Frame が IE に入っていた場合にchromeモードで表示できる指定です。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
jQuery.cornerのデモとダウンロード
jQuery.corner は以下よりダウンロードできます。
malsup/corner
デモは以下のページで確認できます。
JQuery Corner Demo
jQuery.cornerの使い方
ヘッド内でjQuery本体とダウンロードしたプラグインを読み込みます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="js/jquery.corner.js"></script>
続けてヘッド内に下記の様に記入します。$(‘#box’) の部分は角丸を適用する要素を指定します。corner(“5px”) の部分は角丸の大きさを指定します。
<script type="text/javascript">
$('#box').corner("5px");
</script>
これだけで要素を角丸にできます。
注意点
jQuery.corner は input 要素へは適応できませんのでご注意下さい。もし input 要素を角丸に見せたい場合は、input 要素を div などで包み、その包んだ要素へ対して jQuery.corner を指定します。
作ってみたサンプルデモ
IE6でもちゃんとborder-radiusを使ったかのように角丸にしてくれます。
（クリックで大きい画像がみれます）
IEの場合角丸からはみ出た部分は表示されないようです。
サンプルのコード
サンプルではjQuery.cornerはIE8以下のみに読み込む様にしてあります。それ以外はborder-radiusで角丸を作っています。
head内コード
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
<title>memocarilog border-radius demo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="jquery.corner.js"></script>
<!--[if lt IE 9.0]>
<script src="js/jquery.corner.js"></script>
<script type="text/javascript">
$('#example1').corner("10px");
$('#example2').corner("30px");
$('#example3').corner("60px");
$('#example4').corner("150px");
</script>
<![endif]-->
</head>
body内コード
<div id="container"> <h1>memocarilog border-radius demo </h1> <div id="example1"> <p>Lorem ipsum (略)</p> </div> <div id="example2"> <p>Lorem ipsum (略)</p> </div> <div id="example3"> <p>Lorem ipsum (略)</p> </div> <div id="example4"> <p>Lorem ipsum (略)</p> </div> </div><!-- container ここまで-->
cssコード
#container{
width: 700px;
margin: 0 auto;
}
#example1,#example2,#example3,#example4{
width: 300px;
height: 300px;
margin: 5px;
float: left;
font-size: small;
background: #fff;
}
p{
padding: 20px;
}
#example1{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#example2{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 30px;
}
#example3{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 60px;
}
#example4{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 150px;
}
No Comments & Tracbacks