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 Beta2 ― 2008/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以降の利用をお奨めします。