記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

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

  • 2012.05.18
  • 2012.05.17
  • 技術
スマートフォンサイト作成時に気をつけること(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(アイシップ)』 河野 )



                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

技術カテゴリの最新記事