スマートフォン ホームページテンプレート
ホームページをスマートフォンで最適に表示させる
スマートフォンでホームページが最適に表示されるようにするには、Viewportを設定します。
Viewportは、ホームページテンプレートのヘッダ内に設定します。
Viewportにホームページテンプレートのワイドサイズを設定すると、スマートフォンの画面いっぱいにページが表示されます。
ページに余白をとりたいときは、ホームページテンプレートのワイドサイズより大きめに設定します。
※現在ダウンロード出来るホームページテンプレートはスマートフォン対応です。以下は設定済みです。
ヘッダー内にViewportを設定
ホームページテンプレート（.html）のヘッダー内にViewportを設定します。
色のついた部分を追加します。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="viewport" content="width=850" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>タイトル</title>
<meta name="Keywords" content="キーワード１,キーワード２,キーワード３" />
<meta name="Description" content="サイトの説明" />
</head>
余白をとるときはワイドサイズより少し大きめに設定します。
Viewportの設定法
Viewportは、サイズの設定以外にも拡大率などの設定があります。
| プロパティ | 指定法 |
| width | Viewportの横幅 （px device-widthの指定が可能） |
| height | Viewportの縦幅 （px device-heightの指定が可能） |
| initial-scale | 最初に読み込まれた時の拡大率 （120%の場合は1.2） |
| minimum-scale | 操作可能な拡大率の最小値 （0〜10） |
| maximum-scale | 操作可能な拡大率の最大値 （0〜10） |
| user-scalable | ズームの有効・無効の設定 （yes / no） |
設定例
<meta name=”viewport” content=”width=横幅, user-scalable=ズームの設定, maximum-scale=拡大率の最大値″ />
ホームページテンプレート フレームタイプで慣性スクロール
スマートフォンでフレーム部を慣性スクロールさせるには、スタイルシート（style.css）の以下のところに、-webkit-overflow-scrolling:touch;を設定します。
※ホームページテンプレート フレームタイプ用
#main{
float:right;
width:620px;
height:400px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
ホームページテンプレート スクロールボックスで慣性スクロール
ページ内でスクロールさせるスクロールボックスを、スマートフォンで慣性スクロールさせるには、スタイルシート（style.css）の以下のところに、-webkit-overflow-scrolling:touch;を設定します。
.sbox{
height:150px;
overflow:auto;
border:solid 1px #dddddd;
-webkit-overflow-scrolling:touch;
}
プルダウンメニューのタップについて
スマートフォンでプルダウンメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、プルダウンメニューを使う箇所は、一番上のリンクは空にします。
<li><a href="index.html">HOME</a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ ２</a>
<ul class="sbm">
<li><a href="page3.html">ページ ２−１</a></li>
<li><a href="page4.html">ページ ２−２</a></li>
<li><a href="page5.html">ページ ２−３</a></li>
</ul>
</li>
※ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用。
ツリーメニューのタップについて
スマートフォンでツリーメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、ツリーメニューを使う箇所は、一番上のリンクは空にします。
<li><a href="index.html">メニュー １</a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー ２</a>
<ul class="sbm2">
<li><a href="page3.html">メニュー ２−１</a></li>
<li><a href="page4.html">メニュー ２−２</a></li>
<li><a href="page5.html">メニュー ２−３</a></li>
</ul>
</li>
※ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用。
※ホームページテンプレート１面タイプには、ツリーメニューはありません。
スマートフォンのフォントサイズについて
スマートフォンは文字のサイズを自動的に調整する機能がついています。
この機能が必要ない場合は、スタイルシート（style.css）の以下のところに、-webkit-text-size-adjust:none;を設定します。
body{
font-size:9pt;
color:#555555;
background-color:#ffffff;
text-align:center;
margin:0px;
-webkit-text-size-adjust:none;
}