初めてスマートフォン専用ページを作成する際に知っておきたいポイント (original) (raw)

ちなみに、今回は基本的にiPhone4を使って確認していますのでご了承ください。

目次

  1. スマートフォンに対応させるには？
  2. viewportについて
  3. 1カラムのリキッドレイアウトで
  4. box-sizingプロパティ
  5. 幅は5パーセント刻みで指定しよう
  6. 見出しをCSS3で作ってみる
  7. Media Queriesについて
  8. 横向きにしたときに文字が大きくならないように
  9. 数字がリンクになってしまう
  10. スマートフォン用ページの表示確認について
  11. スマートフォン専用ページにリダイレクトさせる
  12. 最後に

1. スマートフォンに対応させるには？

ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。

PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。

1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。

Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。

例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。

mediaqueries-sample.jpg

Media Queriesについては後で簡単に紹介します。

2つ目のスマートフォン専用ページは、PCのことは気にせずスマートフォンに最適化されたページです。

ヤフーもスマートフォンでアクセスすると、専用ページに移動しますね。

smartphone-yahoo.png

といことでスマートフォン対応にするには2つのパターンがあるわけですが、作成方法には共通点がたくさんあります。

今回は、スマートフォン専用のページを作成する際に注意しておきたいポイントを紹介します。

PCでもスマートフォンでもという方には、Webデザインレシピさんの「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」が非常に参考になりますね。

2. Viewportについて

iPhoneでパソコン用のウェブサイトを見るとなんか小さく見えますよね。

このように小さく見えるのは、iPhoneの画面の横幅がデフォルトで980pxに表示されるようになっているからです。

実際の画面サイズは320pxですが、一般的なウェブサイトの横幅は800px以上が多いので、うまく全体を表示できるよう擬似的に画面サイズが980pxになっています。

あの小さな画面を、横幅980pxにしてサイトを見るとさすがに小さいですよね。

smartphone-view.png

そんなときに活躍するのがViewportです。

Viewportを使うと、画面サイズや拡大に関することを操作することができます。

このように使い、head内に挿入します。各プロパティの内容については以下のとおりです。

width
height
minimum-scale
maximum-scale
initial-scale
user-scalable

で、実際に色んなサイトを見ていると、横幅についてはほとんどがwidth=device-width に設定されています。

無駄なくスペースを使いたいので、デバイスによって、それに合った横幅にしているのだと思います。

この場合、「横幅はデバイスに合わす」、「読み込んだときは等倍」、「等倍以上拡大はできない」、という設定になります。

3. 1カラムのリキッドレイアウトで

スマートフォンはパソコンに比べ画面も小さいですので、無駄なく表示させたいものです。

スマートフォンには様々な画面サイズがありますが、どの端末で見ても無駄なく表示されるようにするにはどうすればいいか？

横幅が100%のリキッドレイアウトですね。

リキッドレイアウトとは (liquid layout)： - IT用語辞典バイナリ
リキッドレイアウトは、各列の幅をパーセンテージ（％）で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法である。リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるので、多様な環境でユーザビリティが損なわれないWebページを作成することができる。

実際スマートフォン用のサイトを見てみると1カラムのリキッドレイアウトが多いですね。

reqid-layout.jpg

ただ、私もそうですが、あまりリキッドレイアウトを作ったことがない、という方も多いのではないでしょうか？

pやh1といったブロック要素（HTML5からブロック要素という定義はなくなりましたが、イメージしやすいと思うのでここでは使わせていただきます）の場合は、特にwidthを指定しなければ横幅いっぱいに表示されます。

ここで注意したいのはこんな場合です。 ※ 関係ない部分のコードは省略しています。

CSS

h2 { width:100%; border-left:20px solid red; padding-left:20px }

このようにすると要素全体の幅が、横幅100%（320px） + ボーダー20px + パディング20pxとなり40px分はみ出してしまいます。

width-border-padding.png

横いっぱいに表示したいと、ついついwidth:100%;に設定してしまいがちですが、こんな場合もありますので気をつけましょう。

横いっぱいに表示したいときは、何も指定しないか、width:auto;（初期値）と指定しておきましょう。

4. box-sizingプロパティ

1カラムの場合は、何も指定しないか、width:auto;（初期値）でいいのですが、2カラムなど横並びに２つの要素を並べる場合は、widthをちゃんと指定する必要があります。

実際スマートフォンの場合、画面サイズも小さいですので、2カラムはあまり実用的でないですが、横に並んだメニューなんかだと結構便利ですね。

以下のような2列になったメニューを作るときに、「box-sizing」というプロパティが結構便利です。

sp-menu-sakusei.png

2列ですので幅を50％にするわけですが、横に線やパディングを入れるとその分50%より広くなってしまいます。

入れ子にしてもいいのですが、せっかくですしbox-sizingを使ってみます。

box-sizing.png

ピクセル単位など絶対値で横幅を指定する場合は、あまり必要ないですが、パーセントで指定する場合box-sizingはとても便利です。

横幅を50%と一緒に**box-sizing : border-box ;**を指定すると、ボーダーがあろうとパディングがあろうと、要素全体の横幅は50%になります。

まさにIE6ですね。

2列になったメニューを作ってみる

では先ほどのメニューを作ってみます。

box-sizingとCSS3セレクタを使うと、htmlはこんなにシンプルになります。リストを使うべき、というツッコミもあるかもしれませんが。。

HTML

CSSはこんな感じになります。

CSS

#menu a { width:50%; padding:10px 0; background:#eee; text-align:center; float:left; box-sizing: border-box; border-top:1px solid #555; } #menu a:nth-child(2n+1){ border-right:1px solid #555; } #menu a:nth-last-child(1),#menu a:nth-last-child(2){ border-bottom:1px solid #555; }

1つ目ですべてのリンクの上に線をつけて、2つ目で奇数番目のリンクの右に線をつけて、3つ目で最後の2つのリンクの下に線をつけています。

5. 幅は5パーセント刻みで指定しよう

例えば、横幅100%のリキッドレイアウトで同じサイズのボックスを横に3つ並べる場合、1つ33.33333･･･パーセントになり割り切れません。

仕方がないので、33%、34%、33%と並べてみます。真ん中は両端にボーダーを付けるので1%多くすることにします。

HTML

CSS

#sample a { width:33%; padding:10px 0; background:#eee; text-align:center; float:left; box-sizing: border-box; border-top:1px solid #555; border-bottom:1px solid #555; } #sample a:nth-child(3n+2){ width:34%; border-right:1px solid #555; border-left:1px solid #555; }

このようにすれば、合計100％になるのですがブラウザで見てみると、少し隙間ができます。

33-34-33box.png

iPhoneの場合、縦にすると320pxですので、33%だと105.6px、34%だと108.8pxになります。

ですが、小数点以下は切り捨てられて、33%は105px、34%は108pxになると思われます。

ということで、33%（105px） + 34%（108px） + 33%（105px） = 318px となり、2px分スペースができてしまいます。

iPhoneは横で320px、縦で480pxですので、5の倍数にすれば、小数点以下になりません。

androidは機種によって違いますが10の倍数にすれば間違いないです。5の倍数でも大丈夫だと思います。

6. 見出しをCSS3で作ってみる

スマートフォンだとCSS3も自由に使えます。

一般的にスマートフォンはパソコンより回線速度が遅い場合が多いですので、画像はできるだけ使わず、積極的にCSS3を使いましょう。

画像を使わなくても、こんな見出しも作れます。

smartphone-headline.png

テキストシャドウと背景のグラデーションを使うときれいな見出しが作れます。

HTML

見出しサンプル1

見出しサンプル2

まず、上の方のCSSはこんな感じです。

CSS

.headline1 { width:auto; padding:3px 0 3px 10px; color:#fff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.48, #337fcc), color-stop(0.52, #225588)); text-shadow:0px -1px 1px #000; }

次は下の方のCSSです。

CSS

.headline2 { width:auto; padding:3px 0 3px 10px; border-top:1px solid #bbb; border-bottom:1px solid #999; background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#fff), to(#bbb)); text-shadow:1px 1px 1px #fff; }

テキストシャドウは使いやすいですが、グラデーションはジェネレータを使った方が手っ取り早いかと思います。

7. Media Queriesについて

iPhoneの場合、画面を横にすると横幅が1.5倍になります。

そんなに違うならレイアウトを変えたい、と思うかもしれません。そんなときに役立つのは、Media Queriesです。

Media Queriesを使えば、画面の幅によってCSSを変えることができます。

Media Queries

sp-mediaquer.png

Media Queriesを使ったサイトを紹介しているギャラリーサイトです。4種類の画面サイズでのキャプチャが並べて表示されているので、どのようなものかイメージしやすいと思います。

具体的な使い方はこんな感じになります。

CSS

body { color:green; font-size:14px; } @media screen and (max-width: 480px) { body { color:blue; font-size:12px; } } @media screen and (max-width: 320px) { body { color:red; } }

この場合、普段のフォントカラーが「緑」でフォントサイズが「14px」に、画面サイズが480px以下の場合は「青」で「12px」に、320px以下の場合「赤」で「12px」になります。

画面サイズ320px以下の場合のフォントサイズは記述していませんが、480px以下の場合で定義されていますので、320pxの画面だとフォントサイズは12pxとなります。

次のように、画面サイズによって違う外部CSSファイルを適用することもできます。

HTML

画面サイズが320pxの場合、320px以下の場合のCSSだけを読み込むのではなく、480px以下の場合のCSSを読み込んでから、320px以下の場合のCSSを読み込みます。

以下のようにすれば、画面サイズが321px～480pxの場合に適用されますが、その画面サイズに該当しなくても、すべてのCSSファイルを読み込むみたいです。

HTML

ですので、読み込み速度を考えると、外部ファイルを複数用意するより、1つのCSS内に記述した方がいいと思います。

8. 横向きにしたときに文字が大きくならないように

iPhoneで縦から横にしたとき、文字が大きくなります。

それはそれでいいという人もいるかもしれませんが、個人的にはなんか気持ち悪いので、横にしてもフォントサイズが変わらないようにしようと思います。

最初、Media Queriesを使ってフォントサイズを変えていたのですが、そんな面倒なことは必要ありません

HTML

body{ -webkit-text-size-adjust : none; }

この1行だけで解決します。

9. 数字がリンクになってしまう

iPhoneだと数字を電話番号だと思い込んで、勝手にリンクになってしまいます。

電話番号をウェブ上に載せるなんて、個人レベルではないのに、勝手に電話番号と認識されたら困ります。

HTML

これで解決です。

10. スマートフォン用ページの表示確認について

サイトを作ったら、正しく表示されるか確認する必要があります。

実機を持っていたらいいのですが、iPhoneもandroidスマートフォンの両方を持っている人は少ないと思います。

そこで、PC上で動くエミュレータが必要となってきます。

説明すると長くなるので、役立つサイトをご紹介します。

Android用エミュレータ

私はiPhoneを持っているので、Android SDKを使って、Androidでの表示を確認しました。

Android SDKのインストールについては、これらのサイトをご参考に。

iPhone用エミュレータ

iPhoneは実機を持っているので、ほとんど使っていないですが、役立ちそうなものを紹介します。

まずが、オンライン上で表示確認できるサイトです。ユーザーエージェントは使っているブラウザになりますので、後で紹介するユーザーエージェントによるリダイレクトは使えません。

CSS3の適応状況なんかも、使っているブラウザに依存します。

これらは手軽ですのでレイアウトの確認なんかに使えます。

Apple公式のシミュレータもあるのですが、Macでないとインストールできません。

11. スマートフォン専用ページにリダイレクトさせる

スマートフォン専用ページを作ったら、スマートフォンでアクセスしてきたユーザーをどうやってスマートフォン専用ページに誘導するかを考える必要があります。

ここでは、リダイレクトさせる方法を紹介します。

ここはiPhone4の実機に加え、androidのエミュレータでも確認しています。

画面サイズで判別する

ちょっと無理やりな感じもしますが、画面サイズによってリダイレクトさせるかどうかを判別する方法です。

js

画面サイズが699px以下の場合に、spディレクトリのindex.htmlにリダイレクトされます。

ユーザーエージェントで判別する（javascript）

続いては、javascriptを使ったユーザーエージェントによって判別する方法です。

js

ユーザーエージェントで判別する（PHP）

今度はPHPバージョンです。コードは一番上に挿入した方がいいと思います。

PHP

ユーザーエージェントで判別する（.htaccess）

一番便利そうなのですが、どれを試してもエラーが出てしまった（こちらのサーバーの問題だと思います）ので、便利そうなサイトを紹介します。

ということで、スマートフォン専用サイトにリダイレクトさせる方法を紹介しました。

どれも一長一短ありますし、サーバーによってできない場合もあるので、色々試してみるといいと思います。

12. 最後に

ということで、自分の経験を元にスマートフォン専用ページを作る際に知っておきたいポイントをまとめてみました。

Viewpointなど使い慣れないものもありますが、基本的には1カラムのリキッドレイアウトですので、慣れている人には問題ないかもしれません。

とはいうものの、私の場合は勉強不足な分野が多く、記事を書くのにかなりの時間を費やしました。

今までで一番時間がかかった記事かも知れません。

けど、スマーフォン専用サイトは、PC用と違ってIEを意識しなくてもいいので、CSS3も自由に使えて楽しいです。

初めて作ったということもあり、まだまだ内容的に不十分かもしれませんが、皆さんのお役に立てたなら幸いです。