メディアクエリ ワンソース・マルチデバイステンプレートをリリースしました

CSS3のメディアクエリを使ったワンソース・マルチデバイステンプレートをリリースしました。

MediaQueries Multi-Device Template.

PC, iPhone, iPad, Android, 各種タブレットに最適化された形でコンテンツが提供できるように開発しました。多分まだ検証不十分でバグがあるかもですが、ベータ版をリリースします。

ワンソース・マルチデバイスとは?

「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。 CSS3のMediaQueryを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。

動作検証端末

Windows, Mac

Internet Explorer 7 以上
Firefox3.6 以上
Safari5 以上
Opera11 以上
Google Chrome

iOS4.3以上

iPhone3GS
iPhone4
iPad
iPad2

Android2.1以上

Xperia (Android2.1)
GalaxyS (Android2.2)
NexusS (Android2.3)

とりあえず目標として、スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを目指しました。

マルチデバイス対応案件における、開発、運用のハードルや負荷を下げつつ、運用もラクにできればなと。

極力、ユーザーエージェント判別による振り分けはしません。全部CSS! JSギミックなければ全然いけるよ、うんきっと。

メリット

CSSのみで対応できちゃう。 JavaScriptができなくても、マークアップのみで対応できちゃう。 MediaQueryはウィンドウの横幅でCSSを切り替えるため、未知のデバイスも考慮できる(はず。)

デメリット

複雑なレイアウト、コンテンツの出し分けは難しい。 MediaQueryでのCSS切り替えによるコーディングの取得が必要。

最後に・・・

このブログはマルチデバイス対応まだです!これからこのテンプレートを使ってみようと思います。