スマホ対応したホームページの作り方

突然ですがあなたは「スマホ対応したホームページの作り方」をご存知でしょうか？ワードプレスなど多くのCMSではスマホ対応のテーマが多いので“作り方”を知っている方は限られているかもしれませんね。

スマホ対応したホームページの作り方

スマートフォンに対応したホームページを作る方法はシンプルです。 html+cssでPCの解像度とスマホの解像度に別けて各々で設定を書いていくだけでOK。PC、タブレット、スマートフォン、端末によって解像度は違います。解像度を細かく別けてCSSを書けばより細部までレイアウトにこだわったホームページが作れます。

スマホ端末によって異なる解像度

対応する範囲を広げるなら解像度をより細かく指定しなければなりません。一般的な仕様ではPC、スマホのみを指定することが多いです。次に多いのがPC、タブレット、スマホを指定する方法となります。

スマホ対応する基本指定

スマホ対応にするには事前にhtmlからメタ（meta）を指定する必要があります。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

上記が指定の例です。この指定があれば解像度ごとでCSSを切り替える準備はOK。

スマホ専用のCSSを読み込ませる

次にCSSを読み込む設定を行います。基本的にはファイルを別けるのが基本です。

<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/smp.css">

一般的に、共通の指定はcommon.css、全体のレイアウトはlayout.css、スマホのレイアウト指定をsmp.cssで行います。各ファイルのネーミングは自由です。お好きな名前を指定して構いません。上記の例で言えばcommonとlayoutがパソコン用のレイアウトを作るので「smp.css」でスマホ用のCSSを上書きする仕組みです。

スマホ用のCSSに記述する内容

解像度は以下の書き方で指定ができます。解像度768px以下になったら有効にするCSS。各解像度ごとで記述を分けて処理を行います。色々な解像度があるので状況に応じて追加していくのが基本ルールです。

@media screen and (max-width: 768px) {
	#wrapper h1 {
		font-size: 16px;
	}
}

上記のように“解像度を数値で指定”して「内側にCSSを記述する」のが基本構造。

<link rel="stylesheet" href="/css/tablet.css">

CSSを分けて解像度を指定しても構いません。指定を細かくすれば細部のコントロールが可能となります。ただ指定が増えれば増えるほどコストは膨らみます。CSSが長く複雑になるからです。以下のようにCSSを切り分けて設定しても構いません。CSSのファイル構成は１つにまとめても複数でも好みで作成していきましょう。

<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/pc.css">
<link rel="stylesheet" href="/css/tablet.css">
<link rel="stylesheet" href="/css/smp.css">

まとめ

CSSは解像度が大きい順番（PC > Tablet > Smartphone）で上書きするのが基本的な流れとなります。タブレットに対応するかどうかは予算によって異なります。予算の問題でPCとスマホのみに絞るパターンが多いです。以前にご紹介した「後からレスポンシブ（スマホ対応）」も同様の手順で設計を行います。これから本気でスマーオフォン対応に挑戦される方は本記事を参考にしてスマホ最適化に挑戦してみてください。