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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

モデル 解像度
iPhone 12 Pro Max 1,284 x 2,778
iPhone 11 Pro Max 1,242 x 2,688
iPhone 12 Pro / iPhone 12 1,170 x 2,532
iPhone 11 Pro / XS / X 1,125 x 2,436
iPhone 12 mini 1,080 x 2,340
iPhone 8 / 7 / 6s / 6 Plus 1,080 x 1,920
iPhone 11 / XR 828 x 1,792

スマホ対応する基本指定

スマホ対応にするには事前に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のファイル構成は1つにまとめても複数でも好みで作成していきましょう。

<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とスマホのみに絞るパターンが多いです。以前にご紹介した「後からレスポンシブ(スマホ対応)」も同様の手順で設計を行います。これから本気でスマーオフォン対応に挑戦される方は本記事を参考にしてスマホ最適化に挑戦してみてください。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください