スマホ対応はCSSレスポンシブWebデザインで - IE8対策版
IE8以下を使用している人も実は結構いますが、既存サイトのスマートフォン対応がそろそろ本格的になってきましたね。今回はレスポンシブWebデザインについて書いてみます。ご存知のようにレスポンシブWebデザインは、CSS3のmedia queriesを使用し、ブラウザのサイズによってCSSを切り替える方法です。
既存サイトのHTMLコーディング部分を極力変更せず、大量なスマホ用別ファイルを用意せずに済むため、最近はとても注目されています。
レスポンシブWebデザイン IE8 対策版
<head></head>内
head内では、Viewportの指定、IE8以下対策用jsの読み込み、CSSファイルの読み込みとなります。
Viewportについてはここでは詳しく解説しませんが、上記設定では、スマホで画面をユーザーに拡大をさせないという、一般的な指定です。
ウィンドウサイズによる指定は後述しますが、各CSSファイル内に記述します。
style.css -- PC用CSSファイル内
mobile.css -- スマホ用CSSファイル内
media queries IE8、IE8以下の場合の注意点
IE8以下対策１．ウィンドウサイズによる指定は、CSSファイル内で行うのが良い。
ウィンドウサイズによって、読み込むCSSを切り替えたいので、<link>で読み込む際にmedia queriesの指定をしたくなるところだが、どうやらIE8以下ではバグになるらしい。これは、css3-mediaqueries.jsによるバグだと推測されますので、スクリプトのバージョンアップや、違うスクリプトを適用させた際に解消される可能性があります。
× <head>内で<link>タグによってサイズ指定するとダメ
<link rel="stylesheet" media="screen and (min-width: 569px)" href="/css/style.css" />
<link rel="stylesheet" media="screen and (max-width: 568px)" href="/css/mobile.css" />
◎<head>内では、とりあえず読み込むだけにする
<link rel="stylesheet" media="screen" href="/css/style.css" />
<link rel="stylesheet" media="screen" href="/css/mobile.css" />
IE8以下対策２．CSSファイルに@media 以外のダミーセレクタを入れておく。
CSSファイル内に@が複数あると問題なのか、@と{}の出現パターンに問題があるかはcss3-mediaqueries.jsを見てみないと判断できませんが、そのあたりにバグをはらんでいそうです。以下のようにダミーのセレクタを入れておき、また、@mediaの中に@が出ないようにしておく。
スマホ対応のひとつの手段として
実際にレスポンシブWebデザインを活用しようとすると、既存サイトで画像で作った見出し文字などの処理が大変だったりします。display:noneとか画像をとばして背景に別画像を指定するなどのトリッキーな方法が必要な場合もあります。また、すべてのCSSを読み込まざるを得ない現状では、表示に時間が多少かかる場合もあります。
しかし、これからはますますデバイスサイズの多様化が進むのが目に見えており、ユーザーエージェントではなく、ブラウザのサイズによってレイアウトを変更するという考えは合理的であり、今後さらに簡単かつマルチデバイスに対応できる方法がでてくると思います。スマホからのアクセス比率が急激に上がってきた現状では、いち早く何かしらの対応を求められます。レスポンシブWebデザイン、がんばってトライしてみてください。