Tweet

連載インデックスへ

便利なライブラリや動画に潜むWebデザインの3つの罠

ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部）

とても便利な“ライブラリ”だが

　デザイナーやコーダー／マークアップエンジニアが比較的気軽に使えるJavaScriptライブラリが、しばしば話題になります。

　それらの多くはライブラリを読み込みさえすれば、後は簡単な記述で便利な効果を得られます。そのため、JavaScriptを書けない人に特に人気です。さらには、Internet Explorer（以下、IE） 6に見られる不満点を対応してくれる、かゆい所に手が届くライブラリも多数存在します。

　これらは非常に便利で、作業時間を短縮してくれて、またWebサイトのクオリティを向上できます。しかし、何も考えずに安易に多用していると、ページの描画速度に影響を及ぼすことがあるのです。

　今回は連載の最終回として、便利なJavaScriptライブラリやFlashなどの動画やアニメーションに潜む、下記のような「Webデザインの3つの注意点」を紹介します（下記リストはインデックスになっています）。

1. IE6でアルファチャンネルを含むPNG画像を使う
2. とても便利なjQueryのセレクタだが
3. その動画やアニメーション、本当に必要ですか？

【ワナ1】IE6でアルファチャンネルを含むPNG画像を使う

　IE6には、それ以後のWebブラウザと比べて足りない部分がたくさんありますが、Webデザインの中で特に大きな影響を与えているのは、アルファチャンネルを含むPNG画像を正しく表示できないことでしょう。そもそもPNG画像は、透過処理を美しく表現できるはずですが、IE6で表示すると透過部分が塗りつぶされた状態になってしまうのです。

図　IE6とSafariの比較

　この問題を解決するためのライブラリは多数存在しますし、CSSにちょっとした記述をすることでも対応できます。これらの方法で、IE6でもアルファチャンネルを含むPNG画像を正しく表示できるようになります。代表的なライブラリは「IE PNG Fix」です。

IE PNG Fix - TwinHelix via kwout

　下記CSSコードでは、filterプロパティのAlphaImageLoaderフィルタを使用して問題を解決できるようにしています。

* html div {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=http://example.com/img/ie.png);
}

　しかし、これらの手段は処理が重く、描画速度に影響してしまいます。ロゴやタイトル部分だけに使うなど、アルファチャンネルを含むPNG画像が少なければそこまで影響しませんが、例えばブログのアーカイブページにあるすべての角丸部分に使われていたら、画像の数だけ処理されることになります。

　現在でもIE6を使っているユーザーは、少し古い型のPCを使っている可能性もあり得ます。マシンパワーが低ければ、その影響はさらに顕著になるでしょう。

ライブラリを使わない場合は、CSSハックで

　「アルファチャンネルを含むPNG画像は、IE6がこの世から消滅するまで使うことはできないのか」と思ったかもしれませんが、そんなことはありません。この問題を解決する手段を2つご紹介します。

　1つは、デメリットを理解したうえで前述のようなライブラリを使う方法があります。全体的なパフォーマンスで考えて、問題にならなければライブラリを使ってもよいでしょう。

　もう1つは、IE6とそれ以外のWebブラウザで表示する画像を変える方法です。FirefoxやSafari、IE7以降などにはPNG画像を指定し、IE6にはよく似せた別のGIF画像を指定するのです。

　この方法にはIE6とそれ以外のWebブラウザを振り分ける必要があり、「CSSハック」と呼ばれる手法や、PHPやJavaScriptを使う手法など多数のやり方があります。

　ここでは、最もシンプルなCSSハックを使用してご紹介します。

<div> Sample Code </div>

div {
  background-image: url(sample.png);
}
* html div {
  background-image: url(sample.gif); /* IE6 */
}

　CSSハックについて詳しく知りたい読者は、下記記事も参照してください。

連載インデックス「いまさら聞けないCSS／スタイルシート入門」 - ＠IT via kwout

　現在では、IE6のシェアも徐々にではありますが下がっていて、YouTubeなど一部の有名サイトで「IE6対応を打ち切る」という流れも出てきています（参考：「IE6はもういらない」――Web企業が撲滅キャンペーン）。「IE6で使えないから」という理由であきらめるにはアルファチャンネルの美しさはもったいないので、デザインをする際の引き出しとして持っておくと表現の幅が広がるでしょう。

　次ページでは、残りの2つの注意点について説明します。

1/2

INDEX
WebデザイナのためのHTMLチューニング入門（最終回）　 便利なライブラリや動画に潜むWebデザインの3つの罠
	Page1 とても便利な“ライブラリ”だが 【ワナ1】IE6でアルファチャンネルを含むPNG画像を使う ライブラリを使わない場合は、CSSハックで
	Page2 【ワナ2】とても便利なjQueryのセレクタだが 【ワナ3】その動画やアニメーション、本当に必要ですか？ 速度は“目的”ではなく“手段”である

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード