CSS3で作るスマートフォン用ページ

2011年12月15日(木)
宮本 麻矢(著)山田 祥寛(監修)

スマートフォンサイトの基本のマークアップ

スマートフォンサイトは、特に理由がない限りHTML5とCSS3で制作するのが一般的です。スマートフォンに搭載されているブラウザは、HTML5やCSS3の対応が比較的進んでいるため、PCサイトのように古いブラウザを意識しながら制作する必要はありません。これまでの総まとめとして、新しい技術を試すのにちょうど良いスマートフォンサイトを作ってみましょう。

基本のHTML5テンプレート

ベースとなるマークアップは次の通りです。スマートフォンならではの記述がありますので、順を追って説明していきます。

[リスト01]スマホ用のHTML5テンプレート

  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <meta name="format-detection" content="telephone=no">
  <link rel="apple-touch-icon-precomposed" href="iphone.png">
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
  </html>

viewportを指定する

まずは、タグのviewportです。viewportでは次の表のようなプロパティがあり、幅や高さなど、Webページをどのような縮尺でレンダリングするかを指定できます。

プロパティ 説明 指定できる値 初期値
width ビューポートの幅 200~10000のピクセル値/device-width 980
height ビューポートの高さ 233~10000のピクセル値/device-height widthの値とデバイスのアスペクト比から算出
initial-scale 初期状態の倍率 minimum-scaleとmaximum-scaleで定義 コンテンツの表示範囲から算出
minimum-scale 最小倍率 0~10 0.25
maximum-scale 最大倍率 0~10 1.6

user-scalable

ズームの可否 yes/no yes
表:viewportのプロパティ

viewportのwidthプロパティの初期値は980pxとなっていて、特に何も指定しない場合、図1のようにコンテンツが縮小表示されます。

図1:viewportのwidthプロパティを指定しない場合(クリックで拡大)

このままでは、操作や閲覧がしにくくなってしまいますので、デバイスの幅で自動的に調整するよう、widthプロパティにはdevice-widthを指定するのが一般的です。ピクセルによる固定幅も指定できますが、例えば、縦方向での表示を前提として固定幅で制作したページを横向きで表示すると、画面サイズに対してコンテンツ幅が狭く感じられてしまいます。

また、スクロールバーが表示されないのもスマートフォンの特徴ですが、固定幅で作ったページがウィンドウサイズより大きい場合、表示領域からはみ出している部分に気付かれないことがあります。したがって、スマートフォンサイト制作においては、特別な理由がない限り、可変レイアウトを採用するのが一般的です。

[リスト02]ズーム操作可能/横表示のとき:横幅にフィット、文字サイズ拡大

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

図2:viewportのwidthプロパティにdevice-widthを指定(クリックで拡大)

device-widthの指定のみで横向き表示にすると、通常、図3【著註:横表示にすると文字サイズが大きくなる(左:縦表示、右:横表示)】のように、デバイスの幅に合わせて文字サイズも拡大表示されます。

図3:横表示にすると文字サイズが大きくなる(左:縦表示、右:横表示)(クリックで拡大)

maximum-scale=1を指定することで、縦表示と横表示で文字サイズを統一できますが、この場合、ユーザーによるズーム操作ができなくなります。現状では、ユーザーによるズームを可能にし、かつ、横表示で文字サイズを拡大しないと、いう両立した設定はできず、どちらかを犠牲にすることになります。

[リスト03]ズーム操作禁止/横表示のとき:横幅にフィット、文字サイズ縦表示と同じ

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

図4:横表示でも文字サイズが拡大されない(クリックで拡大)

なお、Androidのviewportは、iPhoneと挙動が異なることがあるため、サンプルのように、初期状態の倍率や、最小倍率、最大倍率をすべて1に指定し、iPhoneとAndroidで差異がなくなるよう指定するのが主流のようです。

[リスト04]ズーム操作可能/横表示のとき:横幅にフィット、文字サイズ拡大(ユーザーのズーム操作不可)

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

電話番号のリンクを制御する

スマートフォンには、電話番号に自動でリンクを付ける独自機能がありますが、郵便番号のような文字列に対しても誤認識でリンクが付けられてしまうことがあります。これを防ぐには、次のように記述します。

[リスト05]電話番号の自動リンクを付けない

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

本当の電話番号には、次のように手動でtel:リンクを付ければOKです。

[リスト06]電話番号にリンクを付ける

  <a href="tel:090-000-000">090-000-000</a>

ホーム画面用アイコン

iPhone/Androidでは、Webページをホーム画面に登録できます。ホーム画面のアイコン(WebClipアイコン)は、特に指定しない場合は、ページのスクリーンショットになります。iPhoneの場合、ルートディレクトリにapple-touch-icon.pngという名前のPNG形式の画像を置くか、次のようにアイコンまでのパスを指定すればOKです(アイコンのファイル名は自由)。次のように記述すると、iPhoneでは自動的に角丸・光沢処理されて表示されます。

[リスト07]ホーム画面用アイコンを指定(角丸・光沢処理あり)

  <link rel="apple-touch-icon" href="apple-touch-icon.png">

光沢処理が不要な場合は、次のようにprecomposedを付けて指定します。なお、Andoridでは、どちらの記述でも光沢なし・角丸処理ありで表示されます。

[リスト08]ホーム画面用アイコンを指定(光沢処理なし)

  <link rel="apple-touch-icon-precomposed" href="iphone.png">

図5:左から:指定なし、光沢処理あり、光沢処理なし(クリックで拡大)
  • 「CSS3で作るスマートフォン用ページ」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています