JavaScript

jquery.corner.jsを使って指定エリアを角丸にする方法

  /

ウェブデザインの世界では、要素の角を丸める「角丸」は見た目の柔らかさを演出するのに非常に有効です。最近ではCSSのborder-radiusプロパティを使って簡単に実現できますが、過去にはこの機能を実現するためのさまざまなテクニックが必要でした。

今回は、JavaScriptライブラリの一つであるjquery.corner.jsを使用して、指定したエリアを角丸にする方法をご紹介します。このプラグインは古いブラウザでも動作するため、特に互換性を重視するプロジェクトで役立ちます。

Contents

jquery.corner.jsとは

jquery.corner.jsは、jQueryプラグインの一つで、HTML要素に角丸の効果を簡単に追加するためのものです。現代のブラウザではCSSだけで十分ですが、古いブラウザや、JavaScriptで動的に角丸を変更したい場合には、このプラグインが便利です。

特徴

  • シンプルな記述: 簡単なコードで角丸効果を実装。
  • 互換性: 古いブラウザでも問題なく動作。
  • 柔軟なオプション: さまざまな角丸のスタイルを指定可能。

jquery.corner.jsを使って、指定エリアを角丸にするCSSの記述

まずは、CSSで基本的なスタイルを設定します。以下は、3つのサンプルクラスに対して角丸を適用するためのCSSコードです。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
	font-weight:normal;
}
#idWrap{
	width:500px;
	margin:0 auto;
}

.clSample1{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
.clSample2{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
.clSample3{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
-->
</style>

　
このスタイルでは、.clSample1、.clSample2、.clSample3の3つのエリアが同じ背景色とサイズで設定されています。角丸の効果はJavaScriptで追加します。

jquery.corner.jsを使って、指定エリアを角丸にするJavaScriptの記述

次に、jquery.corner.jsを利用して、指定エリアを角丸にします。以下のJavaScriptコードをHTMLに追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".clSample1").corner();
	$(".clSample2").corner("top");
	$(".clSample3").corner("5px");
});
</script>

　
このスクリプトでは、jquery.min.jsとjquery.corner.jsを読み込んで、以下の3パターンで角丸を適用しています。

  • .clSample1 – 全ての角を丸める。
  • .clSample2 – 上部だけを丸める。
  • .clSample3 – 全ての角を5ピクセルの半径で丸める。

jquery.corner.jsを使って、指定エリアを角丸にするHTMLの記述

次に、HTMLの記述を行います。以下は、3つの角丸パターンを適用するためのサンプルHTMLコードです。

<div id="idWrap">
	<h1>指定エリアを角丸にします。<br />
    ここでは3パターン指定してますが色々オプションで指定ができる様です。</h1>

    <div class="clSample1">
    四隅
    </div>
    <div class="clSample2">
    上だけ
    </div>
    <div class="clSample3">
    角丸を5pxに指定
    </div>

</div><!--/idWrap-->

　
このHTML構造では、各エリアに対応するクラスを指定し、角丸の効果を確認できるようにしています。

jquery.corner：指定エリアを角丸にするデモページ

実際に動作を確認したい場合は、以下のデモページをご覧ください。

jquery.corner：指定エリアを角丸にするデモページ

デモページでは、さまざまな角丸の効果を実際に試すことができます。

ソース元：JQuery Corner Demo

jquery.corner.jsについて詳しく知りたい方は、公式サイトをご覧ください。

ソース元：JQuery Corner Demo

このプラグインは、CSSだけでは実現できない動的な角丸効果を提供しますが、現代のウェブ開発ではCSSで簡単に同様の効果を実現できるため、CSSでの実装も考慮する価値があります。

まとめ

今回紹介したjquery.corner.jsは、特に古いブラウザでの互換性が必要な場合や、動的に角丸を操作したい場合に便利なツールです。しかし、最新のプロジェクトでは、できるだけCSSのborder-radiusを使用することをお勧めします。CSSによる角丸は、ブラウザの負荷が少なく、スタイルの一貫性も保ちやすいためです。

ウェブデザインでは、シンプルさと互換性が重要です。状況に応じて適切なツールを選び、最適なユーザー体験を提供しましょう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.corner 角丸
関連記事