スマートフォンサイト作成時に気をつけること（select編）

スマートフォンサイト作成時に気をつけることはいろいろあるのですが今回はセレクトボックス（select）についてです。スマホサイトを作成する際にはPCとも従来型携帯電話とも違う「タップ」「フリック」などの操作を意識する必要があります。「タップをし易く」というところでボタンやリンクを大きくするというのはもはや常識となっています。

ボタンをいつもより大きめに作ったりリンクをブロック要素に変更したりといったことはどのノウハウ集にも書いてあり簡単に導入が可能です。ところが、このセレクトボックス（select）の場合はちょっとだけ注意が必要となります。

セレクトボックス（select）はスマートフォンではタップすることで選択肢一覧がポップアップのように表示されて選択することができるようになっています。選択肢を選択する際にはスマホのブラウザ側でタップしやすいようにしてくれているのですが、最初のセレクトボックス（select）をタップする部分はサイト作成者のレイアウトに依存します。

画像を見る

画像を見る

必要なのはセレクトボックス（select）を大きくタップし易くすることです。これを実現するのには2つあります。1つは文字を大きくする。2つ目は文字以外を大きくするです。この際に気をつけなればならないのは1つ目の「文字を大きくする」です。実は Android2.1 以前の端末では文字だけ大きくなってセレクトボックス（select）の『枠』は大きくなってくれません。その為文字がはみ出すということになってしまいます。

画像を見る

なのでセレクトボックス（select）を大きくタップし易くするためには「文字以外を大きくする」ことで対応しましょう。では具体的にどのように文字以外を大きくするのか。ここは単純にセレクトボックス（select）の高さを指定します。高さは44pxがタップし易いといった説があります。セレクトボックス（select）の高さを44pxくらいに設定しましょう。

画像を見る

実は、この場合も気をつけることがあります。セレクトボックス（select）の高さの指定は Android2.1 以下の端末では無効となります。従って大きくすることができません。文字を大きくしてしまえば文字がはみ出て不自然なので、残念ながら Andorid2.1 以下の機種ではセレクトボックス（select）を大きくすることは諦めます。今後発売される Andorid 端末は4.0が主流になるので（2012年5月現在）下位機種は切り捨ててもそれほど影響がありません。

画像を見る

画像を見る

余談ですが、セレクトボックス（select）の高さの指定は Android, iOS, ie, Chrome などそれぞれのブラウザで挙動が微妙に異なります。スマホ対応だけであれば height 指定だけで構いませんが、クロスブラウザを意識した場合はline-height も同時に指定しておくとよいかもしれません。

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』 河野　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/2099
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝