連載
» 2012年11月22日 18時00分 公開

スマホ向けサイト制作で泣かないための秘伝ノウハウ(2):HTML5のスマホ対応の基礎知識とハマリどころ3選 (3/3)

[渡辺忍,KSK フレックスファームビジネスユニット エバンジェリスト]
前のページへ 1|2|3       

【3】<input>タグplaceholder属性の挙動の違い

 PC用など大きなスクリーンサイズのWebサイトでは、入力を促すテキストボックスが、何を意味するものかを説明するために、テキストボックスの左側などに文字列で説明をつけることが一般的です。スマートフォンの場合、小さい画面を有効に使うために、その説明をテキストボックスの中に表示させることがあります。このときに使うのが<input>タグのplaceholder属性です。

PCの画面。テキストボックスの説明はテキストボックスの外側に
スマートフォンの画面。placeholderを使ってスペースを節約している

 このplaceholder属性はOSやそのバージョン、機種によって動作がさまざまです。Windows PhoneやAndroidの古いバージョンでは、そもそもplaceholder属性がサポートされていません。サポートされている場合でも、フォーカスを当てるとplaceholderで指定した内容が消えてしまう場合が多く、入力ルールのような情報をplaceholderに指定している場合は、フォーカスを当てるとルールが分からなくなるなど、ユーザーの使い勝手に影響することが多くあります。

placeholderが消えて何を入力するか分からなくなってしまう場合もある

 詳細は、x-fit(クロスフィット)製品ブログで調査結果を載せているので参考にしてください。

次回は、JavaScriptのハマリどころ

 今回は、HTML5に関するOS/機種依存事象を紹介しました。スマートフォンのOSや新端末が出るたびに、こういった情報はどんどん出てきています。こうした情報は、前述の製品ブログなどでも紹介していきますので、ぜひチェックしてみてください。

 次回は、JavaScriptのハマリどころをテーマに、いろいろな依存事例を紹介していこうと思います。

著者プロフィール

渡辺忍(わたなべしのぶ)


株式会社KSKの自社製品サービス部門「フレックスファームビジネスユニット」所属、スマホサイト開発支援のProxy製品『x-fit』エバンジェリスト。

スマートフォンの機種依存事象やその回避策が、スマホサイトに取り組む皆さまのお役に立てば幸いです。感想やコメントはTwitterにどうぞ(@xfit_jp)。


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。