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

TOP > HTML > HTML5 >  スマートフォン

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

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

まずは以下の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横幅px980px範囲: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拡大縮小の可否 yesyes または 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〜の端末)