これは押さえておきたい！スマホサイトコーディングのポイントまとめ

by m2g

こんにちは、デザイナーのマツグです。

今年の4月22日、Googleがモバイルフレンドリーアップデートを行ったことが少しの騒ぎとなりました。モバイルフレンドリーとは、スマートフォン（スマホ）利用に最適化されたサイトがモバイルでの検索結果で優遇されやすくなるというもの。

このようにスマホの普及が進む現在、Webサイトを製作する時にもスマホ対応がより求められてきています。そこで、基本的なことばかりですが、自分がスマホサイトコーディングの際の流れの中で行っていることをまとめてみました。

「viewportの設定」でデバイスに対応

まずはここから、基本中のキホン、スマホサイトをコーディングする際は始めに「これはスマホ向けですよ」と指示するためダグ内にviewportの記述をすることが必須です。

また、スマホの場合、横向きにした場合に文字にリサイズがかかり拡大されてしまうので、同じ文字サイズで一行あたりの文字数が増えるようにするため、次のように記述します。

viewportの設定のみの場合

<meta name="viewport" content="width=device-width">

横向きにした場合でも文字サイズを固定

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

この場合、上記に合わせCSSも指定します。

body {
-webkit-text-size-adjust: 100%;
}

加えて、ピンチによる拡大縮小を可能にしたい場合

同様にCSSを指定します。

body {
-webkit-text-size-adjust: 100%;
}

ただし、この設定には方向を変えた際に表示倍率が変わってしまうという不具合があるので、注意が必要です。

デバイスによる不安定なtelリンクを解除

スマホやタブレットは英数字の並びを読み取り、自動的にtelリンクを生成してしまいます。

これは本来ならば便利な機能なのですが、電話番号だけでなく全く別の数列（例えば、FAX番号や商標番号など）でも自動リンクが生成されてしまったり、Surfaceなどのタブレットとして使うことも想定したPCにも適用されるなどの問題が出てしまうため、この機能は解除し任意のところだけにこちら側でリンクを設定する方がコーディングがスムーズです。

解除方法は内（vewportの下などでOK）に以下の記述を加えればOKです。

<meta name="format-detection" content="telephone=no" />

ウェブクリップアイコンを設置

PCでファビコンを設定するのと同じように、スマホでブックマーク登録をした時に任意のアイコンを表示させるには「ウェブクリップアイコン」を設定します。

手順としては、まず表示させたいアイコンをpngファイルで作成します。この時、144x144px（Retina用の倍サイズ）で作成しておけばiPadにも対応可能です。

続いて、内に以下の記述を加えれば設定完了。Androidにも対応します。

光沢を入れたい場合

<link rel="apple-touch-icon" href="画像のパス" />

光沢を入れない場合

<link rel="apple-touch-icon-precomposed" href="画像のパス" />

フォーム要素のデフォルトスタイルをリセット

スマホでは、端末によってフォーム要素にそれぞれ違ったスタイルがかかってしまい、デザインに支障がでる場合も多くあります。

そのため、一旦デフォルトのスタイルをリセットしてしまい、こちら側で任意にスタイルを設定できるようにすることをオススメします。これで自由なデザインが可能です。

リセットはCSSで以下の設定をすることで可能です。

*{
-webkit-appearance: none;
}

スマホサイト独自の注意点

スマホサイトはデバイスの特性上、縦長にスクロールさせる長いページとなりやすいため、サイトロゴやグローバルナビゲーションを含んだheader部分にposition:fixedを設定し、上部固定にすることが多いと思います。

ただし、position:fixedを設定した場合にはスマホサイト独自の気をつけないといけないことがいくつかあります。

Android2.2以降のブラウザではposition:fixed;が使えるようになりましたが、Android4系でposition:fixed;を設定した場合に一部の機種でその要素内の画像がボケてしまうという不具合があります。

これを解消するには、その画像の親要素に:after擬似要素を指定して、content:”.”;とcolor:transparent;を設定します。

例（html）

<header>
	<h1><img src="img/logo.png" alt="ロゴ"></h1>
</header>

のように、headerをfixedさせている場合、imgの親要素となるh1に対し、

例（CSS）

header {
	width: 100%;
	height: 60px;
	position: fixed;
	z-index: 9999;
}
header h1:after {
	content:"."
	color: transparent;
}

と、:after擬似要素を設定することで解消します。

上記のように、headerを上部固定にさせた場合、アンカーリンクへ移動した時にアンカーポイントが画面の最上部についてしまうため、headerの高さとかぶりその部分のコンテンツが隠れてしまいます。

この場合、アンカーポイントをheader下に移動させるため、以下のスタイルを指定して解消します。

#mainAnchor {          //該当のアンカー
	padding-top: 60px; //headerの高さ分
	margin-top: -60px; //headerの高さ分マイナスマージン
}

BESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswy

BESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswy

BESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswyBESbswy

まだposition:fixed;に不安定な部分が残るスマホですが、コーディングの際には重要な部分になりますので、自分自身も気をつけていきたいところです。

<meta name="format-detection" content="telephone=no" />

– / / /

Related Posts

ブランコ株式会社