プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

FC2ブログ十数件、アメブロ数件、Yahoo!ストア、Yahoo!オークションストア、カラーミーショップ、ビジネスサイト数件、趣味サイト数件を現在仕事とプライベートで管理・運営中。過去には他のASPやCMSもいろいろ。

全記事表示リンク
検索フォーム
ユーザータグランキング
最新コメント
<>+-

角丸(角R)ボックスを実現するjavascriptの比較

「png画像もしくはcssにて透過するdivボックス」をJavascriptを利用して角丸にする事を目的として数種類のJavascriptを比較してみました。
それぞれの使い方は書くと長くなるので、それぞれ検索して解説してる他のサイトを探して参考にしてください。ここでは比較のみ扱います。

jquery curvycorners
curvy1.jpg
綺麗だけど重い。
重いと能力の低いパソコンでは最初は四角いボックスで、付け足すように遅れて丸い部分が表示されるので格好悪い。
あと、ブラウザで拡大表示すると変になったり。
curvy2.jpg(拡大図)


Nifty Corners Cube
nifty1.jpg
丸のカーブが汚い。そして汚いくせに重い。
丸の外側に本来の四角の部分が薄く見えたりして格好悪い。
nifty2.jpg(拡大図)


DD_roundies
dd1.jpg
綺麗で軽い。
拡大して見ると輪郭を滑らかにするアンチエイリアスが他よりも効いてる。
たぶん角丸を表現するjavascriptでは一番いい。
dd2.jpg(拡大しても綺麗)


jquery corner
ちょっと検証した時から時間が経ってしまって記憶が曖昧だけど、透過と相性が悪くて却下した気がする。

ぶっちゃけ角丸にする要素が少なければ、このようなjavascriptを利用せず、従来通りの角丸画像を用意してhtmlとcssだけでレイアウトするのが一番綺麗で軽いという結論。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

COMMENT

EDIT COMMENT

非公開コメント

テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

sightseeingに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。スライドショー

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。奥入瀬

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。月と木

torn_paperに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。破れた紙風

wantedに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
アクセスランキング
[ジャンルランキング]
コンピュータ 427位
[サブジャンルランキング]
Webサイト作成 20位