border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる

border-radius と jQueryプラグイン-jQuery.corner を使って角丸を IE にも簡単に適応させる

IE8以下ではcss3のborder-radiusは使用できませんが、jQuery.cornerを使用すれば簡単に角丸にできます。

IE8以下にはjQuery.cornerプラグインを適用するようにして、IE9とその他のブラウザにはborder-radiusで角丸を作れば、実用的にborder-radiusを使っていけそうです。

jQuery.cornerプラグイン

!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を使ったかのように角丸にしてくれます。
IE6でみた border-radiusを使ったかのような角丸
(クリックで大きい画像がみれます)

IEの場合角丸からはみ出た部分は表示されないようです。
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;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能