スマートフォンでも使いやすいテキスト入力欄を作る(3ページ目)

テキスト入力欄を全体的に大きくする

テキスト入力欄は、そのままでは文字とほぼ同じくらいの大きさでしか表示されません。スマートフォンのように小さい端末では、狭い入力欄はタップしにくいでしょう。また、右図のようにPC用ブラウザでも、用途によっては大きめに表示しておく方が使いやすい場合もあります。

CSSを使ってテキスト入力欄を全体的に大きくするには、widthやheightプロパティではなく、font-sizeプロパティを使います。font-sizeプロパティに、値「150%」や「200%」などの値を指定しておくと、文字サイズに合わせて入力欄も大きくなります。その結果、見やすくかつクリック（タップ）しやすくなります。

font-size: 200%;

例えば上記のように値「200%」を指定すると、文字サイズが2倍になり、それに合わせて入力欄も大きくなります。

■属性セレクタを活用する
input要素は、テキスト入力欄以外にも、チェックボックスやボタンなど様々なフォームを作るために使います。ですから、input要素全体に対して装飾を施すと、他のフォームまで同じように装飾されてしまう不都合があります。そこで便利なのが、ある要素のうち「特定の属性が使われている要素」だけを対象に装飾できる、CSSの「属性セレクタ」という記述方法です。

属性セレクタの記述方法に関しては、記事「属性セレクタで、スタイルシートを柔軟に！」でも解説していますが、例えば、

要素名[属性名="属性値"] {
   ……スタイル……
}

というように記述します。例えば以下のように記述すると、

input[type="text"] {
   font-size: 150%;
}

type属性値が「text」であるinput要素だけを対象に装飾できます。この方法を使えば、テキスト入力欄だけに限定した装飾が簡単に記述できるでしょう。

PCでもスマートフォンでも使いやすいテキスト入力欄

今回は、既存のページを大きく改修することなく、テキスト入力欄をスマートフォンやタブレット端末でも使いやすくする方法をご紹介致しました。PC用ブラウザで閲覧する場合にも役立ちます。ぜひ、実践してみて下さい。

【関連記事】

• 入力フォームが空のときに入力案内を表示
• テキスト入力欄の内側にアイコンを表示する
• テキスト入力欄の文字数をリアルタイム表示
• 長さを変更できるテキスト入力欄を作る
• スマートフォンで押しやすいボタン型リンクを作るCSS