スマートフォンサイト作成時に気をつけることはいろいろあるのですが今回はセレクトボックス（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（アイシップ）』 河野　）