メディアタイプ（本では99ページに参照）を上手く利用すればひとつのXHTMLファイルを様々なデバイスに対応することが可能になります。少し前のエントリーで「handheld」と呼ばれる携帯デバイス用のCSSメディアタイプについて紹介しましたが、今回は映写機（プロジェクター）用のメディアタイプである「projection」を紹介したいと思います。
「handheld」と同様「projection」メディアタイプを現在サポートしているWebブラウザはOperaになります。Operaは早い時期から「projection」をサポートしておりバージョンは4.0にまでさかのぼります。「projection」CSSが記述されているサイトでOperaをフルスクリーンモード（F11）にすればパワーポイントのようなスライドショーになります（例）。スライドはキーボードの「page up」と「page down」で操作することが出来ます。映写機用のCSSの制作は非常に簡単で基本的にスライドの区切りを作るプロパティを加えればスライドショーっぽくなります。
div.slide {
page-break-before : always;
}ちなみにOperaのサイトでは簡単にスライドショー用のXHTMLとCSSを制作出来るOpera Show Generatorというのがあります。また、W3Cのほうでミニチュートリアルもあるので参考にしても良いかもしれませんね。
フォントは相対。アクセシビリティを考慮するのであれば、それはある意味『鉄則』だと思います。とはいうもののOperaやMozillaを使えばたとえ「font-size: 12px」のように絶対値（この例ではピクセル）を使って定義してあってもシッカリ拡大／縮小してくれます。それに対して Windows版IE は絶対値の拡大／縮小がサポートされていません。シェアの多い IE を無視してまで絶対値は使えない・・・というのが相対を勧める一般的な理由だと思います。
しかし、絶対値でも拡大する方法があるみたいです。IEにはIEでしか動作しない独自のCSS属性がありますが、その中にZoomというのがあります。これは文字通りサイトをズームしてくれる機能で、絶対値で設定した文字でも関係なく拡大してくれます。これのユニークなところは文字だけでなく画像やスクロールバーまで拡大してしまうところでしょうか。
書き方は簡単。スタイルシートの一番最初に以下のコードを記述します。
* {zoom: 1.0;}単位はパーセントでもOKで、1.0とはつまり100%のこと・・・つまり、通常サイズといったところでしょうか。この値を2.0にすればレイアウト全体が２倍表示されます。このzoom属性の数値をマニュアルなりJavaScriptなどで変えてあげることでレイアウトを拡大させることが可能になります。
サクッとBookmarkletが作りたい方は以下のコードをコピペ。こちらは使用したら全体が200%になります。
javascript:(function(){document.body.style.zoom="200%";}())またはBookmarklet Blogさんが作ったZoom表示Bookmarkletを使えばお好みの倍率で拡大することが出来ます。
もちろん、これはW3Cの標準規格でもありませんしIEの独自規格ということで、激しくオススメ！というわけではありません。どちらかというと相対値を使うのが無難だといったらその通りだと思います。しかし、IEにある隠れたアクセシビリティ機能という意味では非常に興味深いですし、zoom属性を加えたことによって他のブラウザに支障が起こるというわけでもないので予備知識として知っておくのも良いかもしれませんね。
様々なハックを使えばIE5.0移行のブラウザなら同じように見せるのは比較的簡単なのですが、ハックのコードだらけのCSSファイルになってしまうこともしばしば。今後、古いブラウザのシェアは低くなっていくことを考えるとハックしていないクリーンなCSSファイルにしておきたいものです。そこでブラウザごとに異なるCSSファイルを指定するわけですが、従来のやり方だとJavaScriptを組み合わせたりしなくてはならず非常に面倒です。
以下のようにコメントを書き込んでおくと指定したIEバージョンのみがCSSを読み込んでくれるようになります。
すべてのIEに対して（IE5, IE5.5, IE6）
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all.css" />
<![endif]-->
IE5.0に対して
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-50.css" />
<![endif]-->
IE5.5に対して
<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie-55.css" />
<![endif]-->
IE6.0に対して
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie.6.css" />
<![endif]-->
これらを書く順番も考慮しなければなりません。ページの下にあるほうが後に読み込まれるわけですから、まず最初にすべての標準ブラウザに対応したCSSを指定し、そのあと古いIEから順番に指定して行きます。
<!--[if IE5.0]>
<link rel="stylesheet" type="text/css" href="ie-50.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.css" />
<![endif]-->
FirefoxだとUserAgentを変えたりしてIEに『見せかける』ことができますが、間違ってIE用のスタイルシートを読み込むことがないので安心して使えます。
カスタムスタイルシートとはユーザーが設定した独自のスタイルシートのことで、サイトのスタイル定義よりカスタムスタイルシートの設定が優先されます。フォントのサイズや背景色が自分の好みに合わないときなどに有効です。カスタムスタイルシートはほとんどのブラウザで使うことが出来ます。
Microsoft Internet Explorer 6 のステップ バイ ステップ ガイド
Mozillaの設定 - はじめての Mozilla 1.4
先月リニューアルされたEric Meyer氏のサイトをみてみるとソースコードに<body id="www-meyerweb-com">という記述がされています。実はこれ、カスタムスタイルシートと深い関係があるのす。カスタムスタイルシートを特定のサイトに対して別のスタイル定義をしたいときにbodyタグ内にMeyer氏のようなIDを設定をしてあげるとユーザーにとって非常に有益なものになります。例えばこんな感じでカスタムスタイルシートを定義します。
#www-meyerweb-com {color: #333; font: 1em Times, serif;}
#www-meyerweb-com * {color: #333; font-family: Times, serif;}
CSSファイルにどんどん定義を書き込んでいると、いつの間にか２００行、３００行と増えて行きますよね。複雑なレイアウトだったりハックを加えているとファイルサイズも10kを超えてしまうこともしばしば。いくらコンテンツとスタイルが分離されていても、ページがロードされたときに+10kのファイルサイズが加算されてはたまりません。キャッシュの設定で毎回読み込まなくて良いケースがほとんどだと思いますが、それでも負担になるには変わりません。
このように大きくなってしまったCSSファイルを一旦圧縮して、読み込んだときに展開する・・・という方法があるそうです。サーバー側で圧縮／展開を行うのでファイル転送量も少なくなりますし、体感出来るほどではないですが、表示スピードも上がると思います。圧縮方法はいろいろあってApacheなら「mod_gzip」というモジュールを使って行うことが出来ます。今回紹介するのは多くのサーバーにインストールされているPHPを使って行う方法。やり方も非常に簡単です。
CSSファイルが「styles-site.css」だとしたら「style-site.php」と拡張子を変更します。そしてPHPファイルの先頭に以下のコードを書き込むだけです。
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
?>
CSSファイルが圧縮出来るという意味では非常に興味深いですが、圧縮出来たからといって何か劇的に変わるというわけではないですし、この方法は残念ながらNetscape4では動作しません。先ほども書きましたが、別にPHPでしか出来ないというわけではないので、使用するときはサーバーのスペックをみて検討すると良いかもしれません。