モバイル対応

レスポンシブデザイン

このページをスマホで見てみたんですが・・・・字が小さくて見えません。

機器によって表示内容を変更することを、「レスポンシブデザイン」と言うそうです。

「レスポンシブデザイン」を実現するには、メディアクエリ(Media Queries)を利用するらしいです。

メディアクエリ

文字の大きさや、色などサイトの共通したデザインをCSSというファイルで設定します。

メディアクエリを利用して、表示端末の画面サイズを取得し、CSSの内容を切り替えます。

CSSの内容を切り替えることができるなら、div等の画面のレイアウトも、下の図のように変更できそうです。

画面の総横幅を狭くすることで、字を大きく表示しようといいう作戦です。図の#siteとかは、div要素のidです。

メディアクエリ対応CSS

結果的に採用したのCSSの内容が以下になります。ファイルごと切り替える方法もあるらしいですが、同一CSSファイル内で切り替える方を選びました。



@media screen and (min-width:0px){
	#site { width : 960px; 	margin: 0 auto; }
	#header {background-color: royalblue; color: white;	}
	#viewer { width : 960px; color: royalblue; background-color: white; }
	#control { display: inline-block; width : 320px; color: royalblue; background-color: white;	}
	#footer { clear: both; background-color: royalblue; color: white; }
	.logo { font-size: 64px; padding: 0.5em 0.5em; }
	h1 { font-size: 48px; }
	h2 { font-size: 36px; }
	p { font-size: 28px; }
	body { font-size: 20px; }
	.feed { text-align: center;	}
}

@media screen and (min-width:1280px){
	/*1280px以上で適用する内容*/
	#site { width : 1280px; margin: 0 auto; }
	#header { background-color: royalblue; color: white; }
	#viewer { float: left; width : 960px; color: royalblue; background-color: white; }
	#control { float: right; width : 320px; color: royalblue; background-color: white; }
	#footer { clear: both; background-color: royalblue; color: white; }
	.logo { font-size: 32px; padding: 1em 1em; }
	h1 { font-size: 24px; }
	h2 { font-size: 18px; }
	p { font-size: 16px; }
	body { font-size: 14px; }
	.feed { text-align: right; }
}

androidのchromeが320pxの倍数で表示が変わっているようでしたので、320x4の1280pxをベースにしました。

@mediaの箇所の「min-width:1280px」の部分が画面サイズの分岐箇所です。最初に「min-width:0px」の部分が実行されて、1280px以上の表示になると「min-width:1280px」部分が実行され、設定が上書きされます。これは画面サイズが変更になると毎回動くようです。

div要素の「float: right」等を切り替えることで、画面のレイアウトを変更しています。

PCで見ている人は

キーボードのCTRLキーを押しながら、マウスのクリクリをいじっていると拡大縮小ができます。

拡大して行き、一定の拡大率を超えると、モバイル表示に切り替わるので、気が向いたらやってみてください。