PCではマルチカラムでも全然問題ないが、スマートフォン（W-ZERO3シリーズやiPhoneなど）で閲覧するとなるとマルチカラムでは往々にして読みづらい。機器自体のディスプレイサイズが小さすぎるからだ。
故に、スマートフォンではシングルカラムが望ましい。
そして、スマートフォンで使われているブラウザは、メディアタイプhandheldを解釈せず、screenを解釈する。
ということは、メディアタイプscreenのCSSの中で、PC向けブラウザ用とスマートフォン用のCSSを用意しなければならない。
また、CSS Hackは使えないと思った方がよい。スマートフォンにデフォルトで搭載されているブラウザにはNetFrontは含まれていないが、WindowsCE系であればダウンロードして利用することが可能だからだ。
今回は、.htaccessを使った方法を紹介。
HTML側で読み込ませるCSSはNetscape4.x対策として、CSSそのものを読み込ませないようにする。
<link rel="stylesheet" href="style.css" type="text/css"
media="screen,projection">
style.cssでは以下のようにする。
@import url("single-column.css");
@import url("p-2column-right-liquid.css");上がシングルカラムでスマートフォン向け、下がマルチカラムでPCモダンブラウザ向けとなる。
.htaccessで、各CSSファイルの制御を行う。
ポイントは、
- HTMLファイルから直接読み込みされるCSSファイル（ここでは、style.css）は全て許可
- マルチカラム用CSSファイルには、SetSetEnvIfで読み込み対象外のUAを列挙し、それらのUAからのアクセスを拒否する
- シングルカラム用CSSファイルには、SetSetEnvIfで読み込み対象のUAを列挙し、それらのUAからのみアクセスを許可する
<Files style.css>
allow from all
</Files>
<Files p-2column-right-liquid.css>
SetEnvIf User-Agent "Windows CE" deny_ua
SetEnvIf User-Agent "iPhone" deny_ua
SetEnvIf User-Agent "iPod" deny_ua
order allow,deny
allow from all
deny from env=deny_ua
</Files>
<Files single-column.css>
SetEnvIf User-Agent "Windows CE" ok_agent
SetEnvIf User-Agent "iPhone" ok_agent
SetEnvIf User-Agent "iPod" ok_agent
order deny,allow
deny from all
allow from env=ok_agent
</Files>
マルチカラム用CSSの読み込みさせたくないUAとしては、他に以下のものがあげられるだろう。
- 携帯フルブラウザのNetFront
- PSP（NetFrontだが、User-Agent名にNetFrontの文字列はない）
- PC向け非モダンブラウザ（IE3～IE5.x）
PCモダンブラウザではマルチカラム、スマートフォンではシングルカラムのサンプルページ
このサンプルでは、PC向け非モダンブラウザや携帯フルブラウザのNetFrontもシングルカラムとなる。
当然だが、ベースとなる(X)HTMLの文書構造には注意を払う必要がある。でなければ、シングルカラムにしても、読みづらいページにしかならない。
