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、そしてその他のブラウザでも、それなりに(きちんと読める程度に)表示されます。

IE8 Beta22008/08/31 12:25

8月28日にMicrosoft社のInternet Explorer 8 Beta2 日本語版公開されました。

当C.D.R.サイトは、2006年1月以降、標準準拠のHTMLやCSSで記述するようにしているため、IE8 Beta2 でも概ね、問題なく表示されます。

しかし、一部のJavaScriptが正しく動作しないため、以下のページでは、IE8でIE7互換表示になるようにしています。

IE7互換表示にするため、これらのページにはmeta要素で次の指定を行っています。


<meta http-equiv="X-UA-Compatible"
 content="IE=EmulateIE7" />

CSS、スクリプトの解釈で、まだいくつかわからないところもあるIE8 Beta2ですが、それはWeb制作での問題であり、Webページを表示・閲覧するうえでは、Beta2とはいえ、非常に快適で便利なブラウザーに仕上がっています。C.D.R.サイトも、今後はIE8での表示を基準に、サイト制作を進めていきます。

ブログレイアウトの変更2008/04/07 01:04

当ブログのレイアウトも、本サイトに合わせ、コンテンツが中央揃えで表示されるように変更しました。

また、左側のナビゲーション部分は、従来はInternet Explorer専用のスタイルシート(filterプロパティのalpha)を使って、背景を透過させていましたが、透過PNGファイルを背景画像に使用する方法に変更しました。このため、FirefoxやOperaでも透過表示されるようになりますが、反対に、IE6以前では透過されなくなります。これは、PNG画像の透明度に、IE6以前が対応していないためです。

しかし、日本でもWindows UpdateでIE7への自動更新が始まったので、ブログ、本サイトともに、IE7以降で利用可能なCSSを積極的に取り入れることにしました。

もちろん、IE6での表示にも考慮しつつサイトデザインを設計しています。たとえば、本サイトのほうでは、IEの「コメント分岐」を利用して、透明PNGを使う部分には従来のfilterプロパティによる別のCSSを適用させる、といった方法を採っています。ただし、このブログではHTMLコードを変更することはできないので、コメント分岐は使えません。CSSコードの記述内で使える、いわゆる"CSSハック"という手法は、個人的に好みではないので、利用していません。結果として、IE6以前とIE7以降で、完全なデザインの一致を目指すよりも、より標準に準拠したIE7重視の姿勢で、サイト制作をしていくことにしました。

ゆえに、当サイトで完全な表示を再現するには、IE7以降の利用をお奨めします。