スマートフォンサイト作成時に気をつけること(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
=============================

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

GTA
社会調査などにおける質的調査データなどの分析手法の1つ。インタビューなどによって ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

data-sprite-position-y="250" data-image-original-width="200" data-image-original-height="125">株式会社ブレインパッド株式会社サイバーエージェント株式会社フレームワークスソフトウェア
[SPONSOR]
株式会社キノトロープ株式会社アイレップユーザーグラム富士通株式会社Sitecore株式会社ミツエーリンクス