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

[渡辺忍，KSK フレックスファームビジネスユニット エバンジェリスト]

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

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

PCの画面。テキストボックスの説明はテキストボックスの外側に

スマートフォンの画面。placeholderを使ってスペースを節約している

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

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

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

スマートフォンでのHTMLフォームプレースホルダ表示は、機種によってかなり挙動が異なる | x-fit - クロスフィット - via kwout

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

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

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

「スマホ向けサイト制作で泣かないための秘伝ノウハウ」バックナンバー

• HTML5のスマホ対応の基礎知識とハマリどころ3選
• スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選

著者プロフィール

渡辺忍（わたなべしのぶ）

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

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