2014/04/2232 Shares

簡単にできる!IE8をHTML5レスポンシブデザインに対応させる方法

www

WordPressオリジナルテーマが徐々にできあがってきました。レスポンシブデザインにすべく奮闘中。今後はタブレットの普及で端末の解像度やサイズも多様化すると思うので今のうちに対応しときましょう。

現在使用中のテーマはStingerですが、Stinger4やStinger5になるとそこら辺も考えてくれるんじゃないかと勝手にENJIさんに期待。

レスポンシブデザインはモバイルファーストで

ブラウザの横幅でレイアウトが変わるレスポンシブデザイン。具体的な作り方は完成後に公開しようと思いますが、作成はモバイルファーストというのが基本です。

PCでもスマホでもタブレットでも同一のファイルを読み込むので、回線速度や処理が遅い端末ではかなり重くなってしまいます。WordPressはいろいろなパーツを読み込んでひとつのページを作るので、スマホで快適に閲覧してもらうためにはできるだけ軽くしなければなりません。

PCで見たときのデザインは後回し。骨組みを作ったら、まずはモバイル端末で見たときにどうなるかをブラウザで確認しながらデザインしていきます。その後、タブレットで見た時、PCで見た時という感じでブラウザの横幅を広げながら作成。今のところこんな感じ。

PC表示サンプル

スマホ表示サンプル

ブラウザの横幅を確認するために、FirefoxにFiresizerというアドオンを入れました。一発で指定した横幅に調整されます。

レスポンシブデザインは慣れるとけっこう簡単にできます。そう、IEさえなければね。

Internet Explorer 8に対応させる簡単な方法

FirefoxとChromeで表示を確認しながら作っていたのですが、そういえばInternet Explorerなんてのもあったよな、と思って確認してみたら表示が崩れまくり。

IEでいちいち確認するのメンドーだよ!という時は、Chromeのデベロッパーツールを使いましょう。スマホの表示もチェックできます。

IE8以下になるとHTML5やCSS3に対応していないので、潔く切り捨てるか、なんとか対応するかの2択。モバイルファーストでレスポンシブサイトを作成すると、どんなに幅を広げてもスマホ用の表示にしかなりません。

というわけで、JavaScriptで簡単に対応する方法をご紹介します。

HTML5に対応させるJavaScript

まず、Google Codeから「html5shiv」をダウンロードします。

解凍後、「src」フォルダ内の「html5shiv.js」を作成中のサイトに放り込みます。その後、ヘッダ内に下記を記述。

これだけでOK。つづいてCSS3。

CSS3に対応させるJavaScript

GitHubから「Respond.js」をダウンロード。

解凍後、「dest」フォルダ内の「respond.src.js」を先ほどと同じくサイトへ放り込みます。ヘッダ内の記述は1行のみ。

100%対応させるためにはCSSの記述等に気を使わなければなりませんが、とりあえずHTML5+CSS3のレスポンシブサイトは表示崩れがなくなりました。誠に面倒ですが、XPがまだ残っているのでしようがないですね。

注意Windows XPのサポートは終了しました!

追記:それでもIEで表示が崩れる場合

通常のHTMLサイトはこれでOKだったのですが、WordPressにすると表示が崩れてしまいました。環境によるのかもしれませんが、「Respond.js」のかわりにGoogle Codeの「css3-mediaqueries-js」を試したらうまくいきました。

ただ、XP+IE8の環境でレスポンシブサイトをいくつか見て回ったところ、「html5shiv.js」+「css3-mediaqueries.js」でも表示崩れのところが。IEってホント面倒。

下記のメタタグをヘッダ内に挿入するとうまくいくかもしれません。

PCやスマホをひっくるめて、当ブログをIE8以下のブラウザで閲覧している方は全体の2%ほど。XPが終了すればほぼゼロになると思いますが、それまでこれで凌ぎます。

一番重要視すべきなのは余白設定

ブログを作るにあたって、もっとも大切なのは余白の設定です。

文字の大きさとか配色とか、考えなきゃいけない点はたくさんあります。でも、何より重要なのが余白です。よはく。

ヘッダーやコンテンツ・サイドバーとの余白もそうですが、メインコンテンツの段落や文字間をどのくらいに設定するかで読みやすさが違ってきます。

ブラウザ標準の文字サイズである16pxをメインに考えたとき、行間はどのくらいが読みやすいでしょうか。スマホとPCで同じ行間にしても良いのでしょうか。ここら辺がすごく難しいです。

参考これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

今回は現在の設定をほぼ引き継いでデザインしています。コンテンツ幅なども一緒なので、切り替えてもあまりわからないかも。たぶん読みやすいと思います。Stingerの39px余白は絶妙だなと改めて感じました。

無料WPレスポンシブデザインテーマ Principle

レスポンシブデザインの無料テーマを見つけたのでご紹介しておきます。

初心者にもおすすめ!無料 WordPress テーマ『Principle』

ローカル環境でインストールしてみましたが、いじりやすいテーマだと思います。段落のマージンがあったほうが読みやすいかなと。

僕はどうやら余白マニアらしいです。

それでは、また。

追記レスポンシブデザイン無料テーマ「Gush」公開中