shortcut Webデザインとかガジェットについてつらつらと書き連ねています

21世紀美術館のトップページのHTMLを書き換えてみた

更新が遅れていたのは、こっちの作業が進んでいなかったせいです。
それにしてもIEは癖があるなぁ...。

なんかいろいろな所から怒られそうな気がしますが、21世紀美術館の日本トップページをデザイン・レイアウトはそのままにXHTML+CSSで書き換えてみました。

書き換えてみたページはこちら。

• 書き換えてみた金沢21世紀美術館のトップページ

元のページはこちら。

• 金沢21世紀美術館

ソースを見てもらえば分かりますが、全く違うHTMLでほぼ同一のレイアウトになるように調整しています。
ポイントは2つ

1. HTML中に画像を含まない(img要素を含まない)
2. flashの読み込みをできるだけ奇麗なソースで読み込む

一つ目の「HTML中に画像を含まない」というのは、要素に含まれるテキストを「text-indent:-9999px;」などの指定で表示領域外に追いやって、表示させたい画像を背景画像として読み込む方法です。普段やらない事なのでただ単にやってみたかっただけです。別に芸術に対するアンチテーゼであるとかそういうことではありません。
実際やってみて思ったのは、やたらクラスやIDが増えてHTMLがあまり美しくないということと、CSS側の記述がやたらと長くなるので可読性に欠けるというのが今ひとつかなぁ、と言う事です。
また、通常意識する事はありませんが、「CSSは読まれたけど画像が読まれない」という場合、ラベルなどの画像化テキストの箇所は何を書かれているか全く分からないと言う致命的な事になってしまうので、エンドユーザーの事を考えるのであればあまりお勧めできない手法ですね。

その代わり、CSSを切った場合のページ容量を極限まで押さえる事ができるので、モバイルに対応させるためにはいいかもしれません。今回僕が書いたHTMLも、XHTMLを解釈できるFOMA端末でストレスなく見られます。

二つ目の「flashの読み込みをできるだけ奇麗なソースで読み込む」は、SWFObjectを使いました。日本語訳はこちら。embed要素とobject要素をネストしたりnoscriptを記述したりしなくても、flashを表示させる事のできるすばらしいライブラリです。良い仕事しています。

あとは、スクリプトの使用をできるだけ減らしたとか、メニューをHTMLの後ろに持ってきたとか、IEのCSSの解釈がアレなので、修正用のCSSを一枚用意したとか、ありがちな対応です。

指摘、ツッコミ大歓迎です。

Tweet