スライディングドア型の角丸ボックスを作ってみた。

Rounded Corners With Javascript (jQuery) by 15 Days Of jQueryを読みながら、角丸ボックスを作ってみた。

スライディングドアというCSSのトリックは、とても有名で、Sliding Doors of CSS – A List Apartなど、タブデザインなどで多用される。

解説にあった、スライディングドアは、何年も前からのなじみのあるものだった。
何度か、実際にpngファイルを作ってスライスして、物まねをしたこともあった。

ただ、装飾性と引き換えに、意味のないデザインのための構造ができてしまうので、その点がいつも後ろ髪を引いていた。

だから、jQueryのサンプル帖(ほとんど物まねの、やってみたら本当に動いた記録的なもの）に、こう書いた。

Tutorials:Rounded Cornersで紹介されている。
昔から見かけた懐かしい、スライディングドア角丸ボックスに、jQueryを使うと、どんないいことがあるのか、実際に作ってみたサンプルです。
スライディングドア型の角丸デザインは、タブや、コンテンツの表示領域などに広く使われています。
しかし、装飾用の、エレメントを必要としたり、ソースの可読性は、著しく低下します。htmlドキュメントとしても、文書構造とは無関係なタグがあることは、好ましいものではありません。
クライアントサイドで、ブラウザの閲覧性を高める工夫のひとつとして、DOM操作は、とても面白いものだと思いました。