スマートフォンサイトのHTML作成 |

スマートフォンサイトの制作

スマートフォンサイトの基本的なサンプルソース

まずは以下のHTMLソースを見て下さい。通常のHTMLとかわりませんが、viewport～といった見慣れない設定があるぐらいだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルです</title>
<meta name="viewport" content="width=device-width,
 initial-scale=1.0,user-scalable=yes" />
</head>
<body>
<h1>スマートフォンサイトテスト</h1>
<p>初めてのスマートフォン向けサイトです</p>
</body>
</html>

<!DOCTYPE html> とは？

<!DOCTYPE html> とすることでHTML5で作成された事を宣言します。 HTML5の文法ルールなどはこちらをご覧ください。

<meta name="viewport" ～> とは

スマートフォンで見た時のページ幅やタッチ操作による拡大縮小方法を指定します。

<meta name="viewport" content="width=【横幅】,
　initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】">

viewport の概念

　例えばiPhone3Gの画面サイズは、横幅が320pxですが、ブラウザであるiPhone用Safariの横幅は980pxです、これは仮想的なサイズのようなものです。仮に横幅980pxのWEBページを作成した場合、Safariではぴったりと表示されますが、スマートフォンは画面が小さいので約1/3のサイズになると考えて下さい。またiPhone・Androidの簡単な仕様の違いもご確認ください。

viewport の一般的な設定値

viewport の一般的な設定値は以下です。width=device-width とすることで端末の幅がviewportの幅になります。

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

他に以下のパラメーター・初期値があります。

プロパティ	内容	単位など	デフォルト	備考
width	横幅	px	980px	範囲:200～10,000px 「device-width」の指定が可能
height	縦幅	px		範囲:200～10,000px 「device-height」の指定が可能
initial-scale	倍率の初期値	倍		範囲:minimum-scale～maximum-scale 1.5とすれば1.5倍
minimum-scale	倍率の最小値	倍	0.25	範囲:0～10
maximum-scale	倍率の最大値	倍	1.6	範囲:0～10
user-scalable	拡大縮小の可否		yes	yes または no

その他

画面を横にしたときの処理

　スマートフォンでは本体を横向きにすると、ブラウザも横になり文字が拡大されます(＊回転表示が有効な場合)。文字サイズはそのままで、1行の文字数を増やすように表示をさせたい場合は Viewportの「maximum-scale」を「1」に設定します。

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

iPhone・iPadのホーム画面用アイコン

　iPhone・iPadのホーム画面用のアイコンは、「apple-touch-icon.png」というPNG形式の画像をサイトのルートディレクトリに置けばホーム画面用のアイコンとなります。ホーム画面に置かれる際にはアイコンの拡大・縮小、角丸、光沢は自動的につけられます。もし光沢や自動リサイズをされたくない場合は、「apple-touch-icon-precomposed.png」を用意することでこちらが優先して使用されます。　

　もし、ページ毎にアイコンを変えたい、アイコン名を別にしたい場合は、以下のようにヘッダーに記述します。

<link rel="apple-touch-icon" href="アイコンファイル名">

またiPhoneの場合ホームアイコンのサイズは57×57、iPhone4：114×114、iPad：72×72　です。

各デバイスでCSSを切り分ける方法

以下のようにヘッダーに記述することで端末のサイズに応じたスタイルシートを設定できます。


<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="screen and (min-device-width: 481px) and 
　(max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="screen and (min-device-width: 481px) and 
　(max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">

意味は以下の通りです。

①width: 〜480pxの端末(iPhone)
②iPad縦（width: 481〜1024の端末が縦（portrait）
③iPad横（width: 481〜1024の端末が横（landscape）
④PC（width: 1025〜の端末）

スマートフォン向けWEBサイトの制作