Opera搭載のケータイが日本で登場して早２ヶ月以上経ちました。Opera はPCでも使っている方もいると思いますが、表示モードに「スモールスクリーンモード」というのがあり、携帯版にはさらに「ケータイモード」というのを追加して小さなスクリーンでも快適にネットが出来るように工夫されています。
CSS には media typeを使ってCSSを読み込むデバイスごとにCSSファイルを使い分けることが出来ます。音声ブラウザや印刷用など様々なデバイスに対応していますが、携帯用には「handheld」と呼ばれる属性があり、これを Opera はサポートしています。「handheld」用の CSS を作ってOpera搭載の携帯で観覧すれば、同じページなのに携帯で見やすいレイアウトに組み替えて表示・・・なんてことが可能になるわけです。
もちろん Opera 以外にも独自規格のも含めて様々なブラウザが携帯にはありますが、このテストページにアクセスすればあなたのお使いのブラウザが handheld のメディアタイプの CSS を継承するかどうか確かめることが出来ます。PC版のOperaでも「View→Small Screen」とすると handheld メディアが適応されるようになっていますね。さすがに Docomo の Movaでは無理でしたが FOMA だと可能なのかな？
現状、CSS を読み込まない携帯ブラウザが多数を占めていますし、たとえ読み込むことが出来たとしても handheld属性がサポートされてないというケースもあるのでまだまだ実用性が高いとはいえませんが、これから普及して行く可能性もありますし、そうなると本当の意味でのオールインワンなサイトが作れるようになれるので楽しみといえば楽しみですね。 Opera だけでなくMozilla のほうでは Minimoと呼ばれるモバイル専用ブラウザも開発しているので（Nokiaが出資中）、こちらの動向も見逃せないですね。
本サイトの「CSSテンプレート」へ行くとお手軽にCSSレイアウトを生成していれるサイトを幾つか紹介していますが、今回も様々なパターンを用意してくれている便利サイトだと思いますよ。
Alsacreations, modeles et gabarits de page en CSS et XHTML
可変レイアウトで２コラム、３コラムの例を幾つか用意してあります。「voir la feuille de style CSS」と書かれているリンクをクリックするとCSSを観覧／ダウンロードが出来るのでそれをベースにあなたのオリジナルテンプレートを制作すると良いと思います。ここのサイトの『ウリ』はなんといってもこのページにあるようなフレームデザインのようなデザイン。CSSデザインの多くはテーブルデザインのような組み方が主流だと思いますが、少し変わったのに挑戦したいのであればこのような感じのレイアウトも良いでしょうね。もちろん従来のような<frameset>を使っているのではなく１つのXHTML文書で成り立っています。「overflow:」というCSSプロパティを使えばフレームみたいな効果は簡単に作れるので一度試してみると良いかもしれませんね。
ちなみに上記のサイトで紹介されているテンプレートはWindows版IE5.0以上から使えますよ。
様々なハックを使えば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用のスタイルシートを読み込むことがないので安心して使えます。
