border-radius.js サンプル
概要
border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。
CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。
このライブラリーは、指定のブロックボックス要素の上下に角を追加します。Internet Explorerの場合はVMLを、 それ以外のブラウザーではCanvas（Canvasがサポートされていれば）を使っています。
※VMLを記述しないと使えないようで、つまり、IEでは表示できていない_re77
対応ブラウザー
- Internet Explorer 6, 7※
- Firefox 2.0以上
- Opera 9.0以上
- Safari 3.0以上（もしかしたら2.0でも動作するかもしれませんが、未確認です。）
- Google Chrome 0.3以上
使い方
文書型の宣言
headタグ内に、border-radius.jsをロードするようscriptタグを記述しておきます。
角を丸くしたいブロックボックス要素のclass属性に "html5jp-border-radius" を記述します。
すると、このdiv要素は、次のように角が丸くなります。
適用前
適用後
適用前
適用後
table要素の角を丸くすることもできます。
適用前
| 都道府県 | 面積(km2) | 人口(人) | コード |
| ※ 人口は2005年国勢調査の結果に基づく。 | |||
| 神奈川 | 2415.84 | 879万0900 | 14 |
| 千葉県 | 5156.58 | 605万6159 | 12 |
| 埼玉県 | 3797.25 | 705万3689 | 11 |
| 愛知県 | 5677.38 | 725万4432 | 23 |
| 大阪府 | 1896.83 | 881万7010 | 27 |
適用後
| 都道府県 | 面積(km2) | 人口(人) | コード |
| ※ 人口は2005年国勢調査の結果に基づく。 | |||
| 神奈川 | 2415.84 | 879万0900 | 14 |
| 千葉県 | 5156.58 | 605万6159 | 12 |
| 埼玉県 | 3797.25 | 705万3689 | 11 |
| 愛知県 | 5677.38 | 725万4432 | 23 |
| 大阪府 | 1896.83 | 881万7010 | 27 |
角ごとに半径を指定する
このライブラリーでは、4つの角それぞれに、丸みの半径を指定することができます。また、特定の角だけに丸みを加えることも可能です。
個別指定する場合は、class属性に [top-left:5px;top-right:10px;bottom-right:15px;bottom-left:20px] のように記述します。全パラメータを [] で囲みます。そして、CSSの記述と同じように、プロパティー名と値をコロンで区切って宣言を作り、各宣言をセミコロンで区切ります。このパラメータには半角スペースを入れないでください。
半径20pxの角を指定する
radius を指定すると、4角すべてに適用されます。radius の値の単位はpxとしてください。
左側だけ半径10pxの角を指定する
left を指定すると、左上と左下の角に適用されます。left の値の単位はpxとしてください。
右側だけ半径10pxの角を指定する
right を指定すると、右上と右下の角に適用されます。right の値の単位はpxとしてください。
上側だけ半径10pxの角を指定する
top を指定すると、右上と左上の角に適用されます。top の値の単位はpxとしてください。
下側だけ半径10pxの角を指定する
bottom を指定すると、右下と左下の角に適用されます。bottom の値の単位はpxとしてください。
左上だけ半径10pxの角を指定する
top-left を指定すると、左上の角に適用されます。top-left の値の単位はpxとしてください。
右上だけ半径10pxの角を指定する
top-right を指定すると、右上の角に適用されます。top-right の値の単位はpxとしてください。
右下だけ半径10pxの角を指定する
bottom-right を指定すると、左下の角に適用されます。bottom-right の値の単位はpxとしてください。
左下だけ半径10pxの角を指定する
bottom-left を指定すると、左下の角に適用されます。bottom-left の値の単位はpxとしてください。
右上と左下に半径10pxの角を指定する
2つ以上の角を個別に指定することも可能です。
それぞれの角に異なる半径を適用する
それぞれの角に異なる半径を適用することも可能です。
使用上の注意
- このライブラリーは、HTMLがブラウザーに標準モードとして認識されないと動作しません。後方互換モードでは無視されます。
- 利用可能な要素は、ブロックボックス要素に限ります。インラインボックス要素に適用しようとしても無視されます。
- table要素にCSSでborder-collapseにcollapseがセットされている場合は、期待通りの結果にならない場合があります。現時点で分かっている問題として、Firefoxの場合にtable要素に適用されたborder-widthが0として処理されてしまいます。
- 角を丸くしたい要素に対して、CSSで "border", "margin" を必ず明示的にセットしてください。style属性、style要素、link要素のいずれを使っても構いません。
- CSS3で規定されているborder-radiusでは本来の縦幅を維持したまま角を丸くしますが、このライブラリーは該当要素の縦幅を上下に広げますので、注意してください。
- 適用した要素の4辺それぞれに異なる border-width がCSSでセットされている場合は、最も太い線幅がすべての辺に適用されます。