レスポンシブデザインに必要なのは,メディアクエリとビューポートである.メディアクエリはCSSに,ビューポートはHTMLのmetaタグに,いずれも一行記述するだけだ.ただ,そのあとが難しめなので楽しいところである.
ビューポートは,metaタグのnameにviewportと書き,その後にwidth=device-widthとinitial-scale=1とmaximum-scale=1をカンマでつないで書いていく.それだけ.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
メディアクエリは,CSSの中で@media screen and ()と書いて最大幅を指定する.それだけ.
@media screen and (max-width: 600px) {
CSSを書いていく........
}
その後で,HTMLに書いたDOM要素たちを最大幅以下のデバイスでどのようにレイアウトするかを書いていくのだが,まったく別のCSS記述になりそうならsp版として作ってしまうことも考える.
ともあれ,スマホを対象としてHTML5を書くなら,metaタグにcharset=”utf-8″と,検索機関に表示されるname=”description”,それにname=”viewport”の3つを書いていくことにする.
