ホームページを作成に関する備忘録
JavaScriptを使ってボックスを角丸コーナーにする（今はCSS３でできますが･･･）
Xhtmlファイル
<head>
<script language="javascript" type="text/javascript" src="js/curvycorners.js"></script>
<style type="text/css">
div.kakumaru{
background-color: silver;
margin: 20px;
.kakumaru p{
padding: 20px;
}
</style>
</head>
<html>
<body>
<div class="kakumaru">
内容
</div>
</html>
</body>
JSスクリプト
<script language="javascript" type="text/javascript">
addEvent( window, 'load', initCorners );
function initCorners() {
var settings = {
tl: { radius: 9 },
tr: { radius: 9 },
bl: { radius: 9 },
br: { radius: 9 },
antiAlias: true
}
curvyCorners( settings, ".kakumaru" );
}
</script>
このように背景がシルバーのボックスが出来て、四隅が角丸になります。
このように背景が画像ファイルでも、四隅を角丸にすることができます。
ボックスの背後に画像があっても、四隅を角丸にすることができます。
CurvyCorners.jsを使ってボックスエリアを角丸コーナーにしていきます。一般に、角丸コーナーにするには、四隅の画像ファイルを作ってCSSで力業でやりますが、いまいちコードが読みにくくなるので、いろいろと探しました。すると、他のライブラリがいらないものがありました。下のリンクからどうぞ。
JavaScriptが有効ならば別ウインドウ（タグ）で開きます。
まず、ヘッダー内にて >script language="javascript" type="text/javascript" src="js/curvycorners.js"<>/script<のように組み込みます。src="js/･･の部分は、ダウンロードしてきたファイルを解凍したフォルダにします。そして、次にスクリプトを書きます。左のように書きます。radiusは丸める部分の半径です。curvyCorners( settings, ".kakumaru" );の.kakumaruの部分はdivタグの部分でclass="kakumaru"と指定してあるものに関して角丸にします。この部分がid="kakumaru"だと、#kakumaruとします。しかし、この間自分のHPをie8でみたら、この角丸の部分の塗りつぶしがおかしくなっていました。いろいろと調べたところ、どうもie８の場合、角丸にするブロックのbackground-color（cssの）が、名前（たとえばwhite）で定義してあるとどうも変なことが起こることがあるようです。これを16進（たとえばwhiteの代わりに#ffffff）にすると大丈夫なのようです。いやはや、またieに悩まされました。
