写真地図ブラウザ制作２ ブラウザの角を丸く
ブラウザの角はやはり丸くしたい。
javascriptでカッコよくやる方法があったはずと、ブックマークを探してみたけど無かった。少し探すとRUZEE.ShadedBorder というのが高機能で良い感じ。サンプルもカッコイイ。しかし実装方法がカッコ悪い。挙動も少し不審。なんかソースが汚そう。このjsファイルは短いので、少し読み込んで改良しようとも考えた。けどめんどくさいので、他を探すことにした。
javascriptでsvgをしようというプロジェクトでも角を丸くすることは可能。サンプルはこんな感じ。だけど実装方法がごちゃごちゃ。しかもこのプロジェクト自体があまり動いていない感じ。なのでもう少し探してみることに。
色々な方法があるらしい。角丸に関するあれこれ @ WWW watchにまとまっている。Goggleでrounded divで検索しても結構色々出てくる。
色々見ていくとjavascriptで実現するのは、あまりカッコよくないように思えてきた。特にRounded Corners with CSS and JavaScript @ sitepointを読んでCSS＋画像でやることに決めた。
ただ、この方法の問題は丸い角の画像の準備。しかしcorner shopが必要な画像を自動生成してくれる！このページで、"Box Background"が角を丸くしたい領域の色。"Page Background"がその領域の背景色。"Corner Radius"が丸い角の半径。"Transparent"が透明にしたい対象。これらのパラメータを設定し、後は"Create Graphics"ボタンを押すだけ。この画像を使って角が丸いボックスを表示するためのCSSとHTMLも自動生成してくれる。
ただ、ここで新たな問題が。この自動生成されるCSSとHTMLは背景が透明な場合に対応していない。色々と試してみたけれども、この方法だと無理そう。ということで、自分でtableを使って、素直に作ってみることにした。結果は、以下の通り。
<style typte="text/css">
table.rounded {
width : 98%;
height : 98%;
}
td.Rnw {
background : url(nw.gif);
height : 20px; width : 20px;
}
td.Rn {
background : #000;
height : 20px;
line-height : 1em;
}
td.Rne {
background: url(ne.gif);
height : 20px; width : 20px;
}
td.Rmw, td.Rme {
background : #000;
}
td.Rm {
height : 100%;
}
div.Rcontent {
background : #333;
color : #fff;
height : 100%;
}
td.Rsw {
background : url(sw.gif);
height : 20px; width : 20px;
}
td.Rs {
background : #000;
height : 20px;
line-height : 1em;
}
td.Rse {
background : url(se.gif);
height : 20px; width : 20px;
}
</style>
<body style="background:#ddd">
<table class="rounded" cellpadding=0 cellspacing=0>
<tr><td class="Rnw"/><td class="Rn"> </td><td class="Rne"></tr>
<tr><td class="Rmw"/><td class="Rm"><div class="Rcontent">
本文
</div>
</td><td class="Rme"/></tr>
<tr><td class="Rsw"/><td class="Rs"> </td><td class="Rse"></tr>
</table>
</body>
ここで苦労したのは「ウィンドウサイズを変更したら、ブラウザのサイズも変更される」ようにすること。<td>のwidthを98%-20pxみたいに指定できれば、分かりやすくシンプルなCSS+HTMLになるとは思うのだけれども。javasriptで疑似的に実装しても良いかも。サンプルはこんな感じ。
本文
| ||
0 件のコメント:
コメントを投稿