HTML5/CSS3サイト作成2010/11/08 13:38

Internet Explorer 9のベータ版も登場し、HTML5やCSS Level 3にそれなりの関心が高まっているようなので、それらの技術を試してみるために「音の無いアルバム」というWebサイトを制作してみました。

サイトの掲載内容は、以前に書いたエッセーなのですが、HTMLのコーディングやスタイルシートでのデザインにHTML5とCSS3を使用し、現状(これらの技術は未確定の仕様です)での技術的な評価を行ってみました。

HTML5に関しては、単にサイトを作ったというだけでなく、「HTML5の技術・政治的考察」という評価記事も掲載してあります。もちろん、例によって技術的評価にはとどまらず、政治的な内容も含んでいるのでご注意ください。CSS3等については、後日、評価をまとめてみたいと思います。

また、IE 9 BetaではSVG形式の画像ファイルに(やっと)全面的に対応したので、SVG画像もサイトのデザインに多用しています。これらは、svg要素などでページに組み込むのではなく、スタイルシートのbackground-imageプロパティ値(background-image: url("images/beautiful.svg")といった感じ)で読み込ませています。こうしたSVG画像も含めサイトのグラフィックスは、当然、CorelDRAW X5で作成しています。CorelDRAWはSVGファイルへのエクスポートに以前から対応しているほか、X5ではピクセル単位での画像作成機能が改良されているので、X4以前よりもWeb画像作成に適しています。

なお、「音の無いアルバム」を完全に表示するためには、IE 9 Betaでも実は不完全で、開発者向けの「IE9 Platform Preview #6」が必要です。「開発者向け」ということで、Platform Preview #6には通常のインターフェイスが用意されていませんが、IE 8もしくはIE 9 Betaと共存させることが可能です。

IE 9 Betaは、SVG画像がきちんとキャッシュされないようで、同じSVG画像を使っているページを続けて開いた場合、その度ごとにページを手動で更新しないと、画像が表示されません。JavaScriptを使えば解決することができたのですが、後からリリースされたPlatform Preview #6では修正されたようなので、そのままにしてあります。なお、IE 8以下はSVG画像に対応していないので、PNG画像に置き換えて表示するようにしてあります。ゆえに、「音の無いアルバム」の閲覧には、Platform Preview #6が最適という次第です。もちろん、IE 9 BetaやIE 8、そしてその他のブラウザでも、それなりに(きちんと読める程度に)表示されます。