先日、Twitterのプロフィールを下記のように少し変更しました。
「最近HTML5、CSS3、JavaScriptでのサイト作成を研究中。
マルチデバイス対応はUAでなくmediaqueryが主流になると予想して勉強中。」
やはりWEB業界に携わる者、初心者とはいえこの時流に乗り遅れると何の強みもなくなるので、日夜勉強しております。
ただ会社の業務としては、どうしてもIEを無視することはできないので個人的に実験サイトを作って勉強しようかと。
というのも、最近のサイト作成において「ワンソースマルチデバイス」なんて言葉も聞きます。
以前参加したシックスアパートのセミナーもマルチデバイス対応の話でした。
これは1つのソース（HTML）で様々なデバイス（PCだったり、スマホ、タブレット、ネットブック、携帯など）で閲覧できるというもの。
今までは、PCサイトと携帯サイトだけ作ればよかったのですが、iPhoneの登場により小さなディスプレイに表示されたPCサイトはとても見づらく、メニューのaタグを{display:block;}にしてない場合、かなりタップしずらいこともあり、早い段階で大手ポータルサイトなどは最適化されたサイトになっていました。
また、アメブロに代表されるブログは元々レイアウトがテンプレート化されていたので、最適化されなくても見やすいですが、それでも最適化されたブログの方が装飾が省かれサイドバーのバナー広告など余計なものがないため、表示速度が速く感じ大手のブログサービスは対応しているようです。
最近うちの会社でもクライアントからスマホ対応の問い合わせがあるので、スマホ対応サイト作成のプランが増えたようです。
ただ私は別プロジェクトなので、最近サイト作成に関わっていないため口を出していません。
既存サイトは作りも古いサイトも多く、構造から変更するとリニューアルになるため費用もかかりますが、ユーザーエージェントによる振り分けでCSSを切り替えスマホ対応としています。
またタブレット（iPad）対応はサイズ変更はしないが、サイト自体のメニューボタンを大きくして対応しています。
個人的な意見としては、ユーザーエージェントよりメディアクエリの方が主流なるのでは！と思って冒頭の実験サイトとして、ずいぶん前から自分のポートフォリオサイトを作ってみようと思ってたので、メディアクエリを使って作成してみました。ていうかまだ完成していませんが・・・^^；
で、ここからが本題。
そのポートフォリオサイトを作成するにあたり、JavaScriptを使ったイメージギャラリーをいろいろ設置してみたのですが、メディアクエリによるディスプレイサイズの伸縮に対応できるものがなく（カスタムするスキルがないだけ）諦めかけていた時、かちびと.netさんのスマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberryの記事で、表示確認としてリンクされていたツールがSimple Media Queries Testerでした
Simple Media Queries Tester
それまでは手動でブラウザの横幅を伸縮して、どう変化するかを確認していました。
このツールは一つの画面で確認することができるし、横幅のサイズ指定ができるうえに、表示されたサイトのリンクも機能しているので、他のページの確認もできます。
設定
使い方はとても簡単。
まずはSimple Media Queries Testerにアクセス。
見ての通り英語ですがとてもわかりやすいインターフェイスなのですぐわかると思います。
上の段にはテストするURLを入力。
下の段は左から
Netbook Width（デフォルトで650px）
Mobile Width
Desktop Width
Height Width(デフォルトで450px)
ようはテストしたい横幅サイズを入力します。
縦サイズはあまり長く設定すると見ずらいのでほどほどのサイズに。足りない場合はスクロールバーがでます。
自分の場合、下記のような設定でテストしてみました。
Netbook WidthはiPad用として確認したいので、「650」から「768」
Mobile WidthはiPhone4用として「480」
Desktop WidthはPC用として「960」
横幅768px
後述するPC用に比べ左右のマージンは少し詰まっていますが、2カラム表示をキープしています。
（実機で確認したことがないので実際、サイドメニューを下に落とし１カラムの方がいい場合もあります。^^;）
横幅480px
iPhoen4サイズは、お約束の１カラム表示になっています。
横幅960px
こちらはPCで見る通り普通に表示されます。実際はメディアクエリは980pxで若干レイアウトが変わりますが、リキッドレイアウトなので多少のサイズの変化は問題ないかと。
Link:THR Design Labの場合
もっと素敵なメディアクエリのショーケース
上記のできそこないのサイトより、世の中にはとても参考になるサイトがたくさんあります。
Link:http://mediaqueri.es/
見てるだけでもわくわくしませんか？
まとめ
このメディアクエリを使ってマルチデバイス対応と言っても、あくまでディスプレイサイズによる表示の変化なので、例えばスマホ用に最適化。とは少し意味合いが違います。と、このテーマで記事を書いたブロガーさんたちは注意として記述していることが多いです
うんうん確かに。と納得させられます。
今後はいかにシンプルに最適化させられるかが課題なのかな～と。
この先マルチデバイス対応が主流になれば、冒頭のユーザーエージェントかメディアクエリのどっちが良い！なんて論争が巻き起りどちらかがスタンダードになっていくんだろうな。
「ここでき！」