角丸にするためにライブラリを作ってみる
角丸にするためにライブラリはいろいろあるけど、思ったとおりのものが少ないので自分で作ってみようかなといろいろ実験しています。
目的と目標は、角丸のために背景画像を何枚も切り出したり、要素を入れ子にするのは工数もかかるし、運用時も大変。できれば画像使わないで、要素の入れ子もなくしたいといった感じです。
Firefox と Safari では CSS 3 の border-radius を先行実装しているのでそれらで実現が可能ですが、IE と Opera ではいまのところ border-radius は使えないなので、
- IE と Opera でのみ動作 JavaScript する
- IE と Opera も将来 border-radius を正式に実装するかもしれないので、border-radius が実装されている未知の IE や未知の Opera では動作しないようする
- 画像を使わないで角丸を実現する。IE は VML で実装して、Opera には canvas 要素をつかって実装してみる
- 引数とか特別な class 属性がなくてもどうするようにする
- 要素のcurrentStyle を目印にする
- border-color、border-width はそのまま引継ぎ、border-radius に該当する部分はあまり使わないプロパティの値を参照する
- border-radius は、そのまま取得できないので、どこかから取得しないといけない。voice-familyあたりを参照してみる。
- voice-familyはあまり使わないプロパティかつ、値に任意の文字列を設定できる。例えば voice-family:’border-radius:16px’ みたいにしておいて、element.currentStyle[voice-family] の値を参照する
といった具合のライブラリを作りたいなぁ。
とりあえず、IE での実装から始めてみます。IE では VML を使って実装するので、VML について少し調べてみました。
角丸の実現に使えそうなのは、VML の roundrect がよさそう。roundrect は角丸付きの矩形を描画するためのもので
- strokecolor 属性で枠の色 ≈ border-color
- strokeweight 属性で枠の太さ ≈ border-width
- arcsize 属性で角丸の度合い ≈ border-radius
などの属性を指定できるみたい。
そのほかに注意点として、
- namespace に urn:schemas-microsoft-com:vml を指定しておかないと VML が使えない
- 標準モードでは VML の要素は hasLayout が tlue ではないとうまく表示されない
- Math.floor(strokeweight / 2) と同じ分の margin-top と margin-left をつけないと見切れてしまう
というわけで、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VML test</title>
<style TYPE="text/css">
v\:* {behavior: url(#default#VML);}
v\:roundrect {zoom:1;}
</style>
</head>
<body>
<div style="width:500px;">
<v:roundrect style="height:100%; padding:10px; margin:1px 0 0 1px" arcsize="0.2" strokecolor="red" strokeweight="3px">
<p>ie test div</p>
</v:roundrect>
</div>
</body>
</html>
みたいな感じすると、画像を使わずに角丸を実現できます。IE で確認できる実際の HTML も demo として用意してみました。
ただ、そのまま使うには汚すぎる HTML なので、IE だった場合のみ、通常の HTML がこんな感じに自動で変換する仕組みを JavaScript で作っています。
現在は CSS で border-radius を指定してあれば IE でも HTML ソースを綺麗なままで、自動で border-radius をエミュレートできるくらいになってきました。というわけで IE でも自動で border-radius をエミュレートするライブラリベータ版。ためしにこのdemo の HTML ソースを見てみてください。
そんなわけで、こんな感じのライブラリを作っていきます。
トラックバックURI
http://www.yomotsu.net/wp/wp-trackback.php?p=441
コメント
稲葉の城兎さんからのコメント
2009年3月28日 16:32
IE8が正式公開されましたが、角丸用ライブラリは特に問題なさそうでしょうか？ 自分の環境ではIE7に暫く前に上げたばかりで、当分IE8にする予定が無いので試せませんが。(^^;;ppBlog1.8.0さんからのコメント
2009年3月29日 13:36
VMLやSVGを用いた角丸コーナー… おはようございます。時間があるときに、以下のようなサイトを作成しているのですが、この2枚のスクリーンショットは、違うところがあります。どこが違うのかというと、2枚目のや…adminさんからのコメント
2009年4月6日 0:42
@稲葉の城兎 さん :
たびたびコメントいただきありがとうございます。そして…一向にアップデートしておらずすみません。
IE 8 では、現状では表示できませんでした。すこし修正することで今のスクリプトでもいけそうなのですが、先日トラックバックをいただいた記事 (ML や SVG を用いた角丸コーナー) ではもう少しわかりやすくよい方法で実装をしていましたので、そちらもご参考にされるとよいかと思います。
自分でも、トラックバック先で紹介されている方法を試してみたいなと思っています。
こんな感じですがよろしくおねがいします。
稲葉の城兎さんからのコメント
2009年4月15日 16:54
ありゃ、IE8では駄目でしたか。残念です。 でも角丸にならないだけで表示が異常になるとかじゃ無いですよね？ 自分の環境ではIE8を未だ導入が厳しいですし、今のライブラリをカスタム化する技量も無いので、IE8対応版が出るのを首を長くして期待したいと思います。(^^;; 実際のところ、トラックバック先の手段と今のライブラリの手段の違いが何なのか、理解不能なレベルの知識しか持ち合わせてないですし。(_ _;;adminさんからのコメント
2009年4月17日 10:57
@稲葉の城兎 さま : IE 8 で VML (ベクター画像描画用の技術) を使うには従来からすこし変更しないといけない箇所があるみたいです。その変更さえすればおそらく使えるのかなぁと考えています。 で、現状ではJSが効かず、角が四角いままで異常が出るということはないはずです。ただ、軽度のエラーがでているかもしれません…。 トラックバックをいただいた先の実現手段についてなのですが、基本的に VML を使うという実装は同じなのですが、ラウンドレクト (角が丸い長方形) を用いず、角部分のみを描画しているようで、この方法なら入れ子などの実現ができたりより柔軟に対応できるかなぁと感じています。 稲葉の城兎 さまのご期待に添えるように研究してみますね !!稲葉の城兎さんからのコメント
2009年4月17日 16:10
宜しくお願いします。m(_ _)m でも個人的には柔軟度がアップする新版を長く待つよりも、現版を少し変更しただけのIE8対処バージョンを早めに出して頂けると嬉しいです。(^^;;稲葉の城兎さんからのコメント
2009年7月22日 15:02
あれから３ヶ月ほど経ちましたしIE8のシェアの増えてる筈ですし、もうそろそろIE8対処バージョンが出てくれると嬉しいですが。稲葉の城兎さんからのコメント
2009年9月2日 18:31
これってやっぱり border-radius をサポートして無いんでしょうね。まあOpera10もサポートしないみたいだし。 何とかライブラリの機能追加で対策出来ると良いですが、どうなんでしょう？ 任天堂、Wii用ブラウザ「インターネットチャンネル」を無償化 ttp://bb.watch.impress.co.jp/docs/news/20090902_312444.html稲葉の城兎さんからのコメント
2009年11月19日 18:21
ようやくIE9でborder-radiusに対応するみたいですが、ライブラリのIE8対応品も期待してますので宜しくお願いします。 Silverlightに注力、急ピッチで機能強化 IE9発表、JS高速化も現状ではHTML5関連は言及なし ttp://www.atmarkit.co.jp/news/200911/19/ie.html稲葉の城兎さんからのコメント
2010年2月12日 18:34
まだ試してませんが border-radius のサポートはどうなんでしょうね？ 「Opera 10.50」ベータ版公開、Webページ表示速度が8倍高速に ttp://internet.watch.impress.co.jp/docs/news/20100212_348676.html ｜ Web標準技術ではHTML5に加え、CSS2.1や一部のCSS3などをサポートしており、正式版提供時には対応を拡大するとしている。稲葉の城兎さんからのコメント
2010年2月13日 18:33
http://dev.opera.com/articles/view/css3-border-background-boxshadow/ どうやら上記の頁を見ると、opera10.5では border-radius に対応するみたいですね。 因みに上記の頁のサンプルをIE7やFireFox3.6 で見てもやはり駄目でしたが、Google Chrome だと、ちゃんと角丸表示されました。稲葉の城兎さんからのコメント
2010年3月23日 16:31
Opera が10.50から10.51になって、ようやくautoアップデートする様になったのでインストールしてみました。 貴サイトのライブラリで角丸してた部分が、ちゃんと角丸化しました。(^o^) あとはIE8だけ各丸化しない状態になった訳です。なんとか角丸ライブラリのIE8対応版を、そろそろ出して頂ければ、と思います。（他力本願モードで済みませんが ＾＾；）コメントフォーム