スキップナビゲーションリンク

ワンソースマルチデバイス Media Query (RWD : レスポンシブ ウェブ デザイン) 版

動作対象環境

仕様

動作サンプル

サンプルのみを別窓で表示

サンプル(max-width : 569pxの場合)のみを別窓で表示

サンプルダウンロード

サンプルダウンロード

サンプル(max-width : 569pxの場合)ダウンロード

解説

ワンソース・マルチデバイスという概念に基づいて、PCとスマートフォンを対象に1ドキュメントを複数の異なるデザインで出力するようなWebサイトを設計、マークアップしました。

実装技術別に3タイプのサンプルソースをアップしました。

・ワンソースマルチデバイス Media Query版

ワンソースマルチデバイス JavaScript 版

ワンソースマルチデバイス PHP 版

本編「Media Query版」は、link要素 media属性の機能拡張である「Media Query」という機能を利用して実装しています。
ブラウザの横幅の違いを判断材料に用いてCSSを読み分ける技術を利用して、PCと、画角の狭いスマートフォンのデザインを差別化しています。

・ 「min-width:横幅の最小値」 = "○○px以上を対応" → PC向けデザイン
・ 「max-width:横幅の最大値」 = "○○px以下で対応" → スマートフォン向けデザイン

また、PCとスマートフォンを分ける横幅のpx値の決め方ですが、iPhoneをメインターゲットにする場合は480pxで設定します。

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/style_pc.css" media="all" /><![endif]-->
<link rel="stylesheet" type="text/css" href="css/style_pc.css" media="all and (min-width : 481px)" />
<link rel="stylesheet" type="text/css" href="css/style_smp.css" media="only screen and (max-width : 480px)" />

Android スマートフォンを網羅する場合は569pxで設定します。

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/style_pc.css" media="all" /><![endif]-->
<link rel="stylesheet" type="text/css" href="css/style_pc.css" media="all and (min-width : 570px)" />
<link rel="stylesheet" type="text/css" href="css/style_smp.css" media="only screen and (max-width : 569px)" />

振り分けの材料にブラウザウィンドウの横幅サイズを利用しているので、PCと大きく横幅の差がとれないタブレット端末での活用は考えにくいです。
そのような場合には別途、ワンソースマルチデバイス JavaScript 版ワンソースマルチデバイス PHP 版の利用を検討します。

関連情報