Cornerを使う

Cornerを使うには最初にcorner.jsまたはjustcorners.jsファイルを<script>タグを使って読み込ませます。

Cornerの場合

<script type="text/javascript" src="js/corner.js"></script>

JustCornerの場合

<script type="text/javascript" src="js/justcorners.js"></script>

Cornerは画像に対して角丸だけでなく立体枠や影の効果を施すことができます。これらの効果を施すための画像を用意しスタイルシートのクラスを指定します。Corner、JustCornerの効果は画像のみ適用され<div>タグで囲まれた文章などには適用されません。画像に効果を施すには<img>タグのclass属性にcornerを指定します。角の半径はiradiusを使い直後に丸みを示す値を付加します。この値は0~100まで指定することができます。以下のように指定するとページ読み込み直後に自動的に画像の角が丸くなります(サンプル01)。この場合、特に新たにスクリプトを記述する必要はありません。

<img src="images/001.jpg" class="corner iradius24">

サンプル01の実行結果

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg">
        <img src="images/001.jpg" class="corner iradius24">
    </p>
    </body>
</html>

また、以下のように<a>タグでリンクを設定している場合でも正しく動作します(サンプル02)。

<a href="http://www.mt-fuji.co.jp/index.html">
<img src="images/button.gif" class="corner iradius5">
</a>

サンプル02の実行結果

リンクも動作します。

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/corner.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <a href="http://www.mt-fuji.co.jp/index.html">
            <img src="images/button.gif" class="corner iradius5">
        </a>
    </p>
    </body>
</html>

Cornerでは四隅の角が丸くなりますが、個別に角を丸くするかどうかを指定する場合にはJustCornerを使います。JustCornerではスタイルシートのクラスにcornersを指定します。角の半径はCornerと同様にiradiusを使い直後に丸みを示す値を付加します。この値は0~100まで指定できます。どの角を丸くするか、もしくは丸くしないかはiradiaeを使い、直後に1つの0または1を4つ指定します。この4つの数値は、どの角を丸くするかどうかを示しています。左から順番に「左上」「右上」「左下」「右下」を示します。0であれば角、1であれば角丸で表示されます。以下のように指定すると最初の画像は全て角丸に、2番目の画像は左上と右上だけ角丸になります(サンプル03)。

<img src="images/001.jpg" class="corners iradius24 iradiae1111">
<img src="images/001.jpg" class="corners iradius24 iradiae1100">

サンプル03の実行結果

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Cornerサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript" src="js/justcorners.js"></script>
    </head>
    <body>
    <h1>Cornerサンプル</h1>
    <p>
        <img src="images/001.jpg" class="corners iradius24 iradiae1111">
        <img src="images/001.jpg" class="corners iradius24 iradiae1100">
    </p>
    </body>
 </html>