スマートフォン ホームページテンプレート
ホームページをスマートフォンで最適に表示させる
スマートフォンでホームページが最適に表示されるようにするには、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="キーワード1,キーワード2,キーワード3" />
<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>ページ 2</a>
<ul class="sbm">
<li><a href="page3.html">ページ 2−1</a></li>
<li><a href="page4.html">ページ 2−2</a></li>
<li><a href="page5.html">ページ 2−3</a></li>
</ul>
</li>
※ホームページテンプレート プルダウンメニュー&ツリーメニュー付き用。
ツリーメニューのタップについて
スマートフォンでツリーメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、ツリーメニューを使う箇所は、一番上のリンクは空にします。
<li><a href="index.html">メニュー 1</a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー 2</a>
<ul class="sbm2">
<li><a href="page3.html">メニュー 2−1</a></li>
<li><a href="page4.html">メニュー 2−2</a></li>
<li><a href="page5.html">メニュー 2−3</a></li>
</ul>
</li>
※ホームページテンプレート プルダウンメニュー&ツリーメニュー付き用。
※ホームページテンプレート1面タイプには、ツリーメニューはありません。
スマートフォンのフォントサイズについて
スマートフォンは文字のサイズを自動的に調整する機能がついています。
この機能が必要ない場合は、スタイルシート(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;
}