携帯サイト制作の実践ノウハウ：CSSでiPhoneで操作しやすい携帯サイトを作るコツ

前回のエントリで、ラウンドアバウトの変換シートを使いiPhone専用の外部CSSファイルを使うことができると説明しました。

今回はiPhone向けにデザインや操作性を改善するCSSプロパティについて、少し詳しく説明していきます。

1. bodyの余白を作らない

まず下の画像を見てください。iPhoneでは左に余白ができてタブメニューに折り返しが発生しています。ラウンドアバウトは横幅320ピクセルのiPhoneの画面サイズに合わせ、画像を縮小している（大きさは正しい）のですが、iPhoneのMobile Safariではブラウザ表示領域とコンテンツの間に数ピクセルの余白ができるため、このように見えてしまっています。

この余白はbody要素の余白サイズを0にして調整できます。一口に「余白」といってもmarginとpaddingとありますが、Mobile Safariについてはmarginの設定で可能です（paddingでは改善できない）。marginかpaddingか、余白の解釈はブラウザによって異なるようなので、marginとpaddingの両方について値を指定しておきます。

body { margin: 0; padding: 0 }

2. 上下に配置した画像をくっつけるには

タブメニューにピンクの線画像がありますが、隙間が生じてしまいタブっぽく見えなくなっています。これもブラウザによるものです。これを調整するには、下側の画像に、縦方向の揃え位置を指定するCSSプロパティ「vertical-align」を設定します。上の画像に寄せたいので、値はtopにします。

ここで大事なポイントがあります。vertical-alignプロパティは、クラスセレクタでなく、タイプセレクタに指定してください。ブラウザに依存する挙動のようで、iPhoneではセレクタの違いによって上端揃えが効いたり効かなかったりします。

×クラスセレクタでの指定→上端揃えが効かない
（XHTML）

<img src="tab_bar.jpg" class="bar" />

（CSS)

img.bar  { vertical-align:top; }

○タイプセレクタでの指定→上端揃えが効く
※この例では上端揃えをする範囲を限定するために子孫セレクタを使用しています。
（XHTML）

<div class="bar">
<img src="tab_bar.jpg" />
</div>

（CSS）

div.bar img { vertical-align:top; }

3. テキストのサイズをデフォルトよりもやや大きめで調整する

前回、iPhoneのデフォルトテキストサイズが、画像とのバランスからして小さく、「画像でっかち」になるとお話しました。携帯で見えている大きさと同じ感覚で見えるようテキストサイズを調整するには、iPhone独自のCSSプロパティ「-webkit-text-size-adjust」を設定します。デフォルトどおりの大きさを100%として、180%程度に設定すると画像の大きさと釣り合いが取れます。

body { -webkit-text-size-adjust:180%; } 

・テキストリンクの部分は、行間を少し広げる

テキストリンクは行間が狭いと指でタッチしにくく、操作性が悪くなっていしまいます。爪でのタッチには反応しないので、細々としたリンクはiPhoneではNGです。

行間の調整は「line-height」プロパティを使います。どの部分の行間を広げるかどうかは、そのページの内容次第です。ページ全体に対してline-heightプロパティで広げると全体的に間延びする場合があるので、テキストリンクが密集しているところに設定するとよいでしょう。1.2～1.5くらいが間延びせずちょうどよい値だと思います。

div.smalltext {line-height:1.5;}

今回はCSSプロパティで対応できる、iPhoneでの視認性・操作性の改善方法を紹介しました。次回は、よりiPhone向けのデザインを意識したコンテンツ作成方法について紹介していきます。