ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

テキスト入力欄の内側にアイコンを表示する

無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

テキスト入力フォームの内側にアイコンを表示

無味乾燥なテキスト入力欄の内側を、アイコンを使って装飾してみましょう。 アイコンで機能を表現すれば、入力欄の目的を明確にする役にも立ちます。

例えば、以下のように検索機能を示すアイコン「虫眼鏡アイコン」を表示すれば、 検索語を入力するためのテキスト入力欄であることが分かりやすくなるでしょう。

そのほか、サイト内検索用のテキスト入力欄を作るなら、そのウェブサイトのアイコン(例えば「レッドボール」)を表示させても分かりやすいでしょう。

実際に入力してみると分かりますが、テキスト入力フォーム内の文字は、アイコンのある領域を避けて少し右側から表示されます。

アイコンを加えるついでに、入力フォームの枠線や背景色などもいろいろカスタマイズしてみましょう。



今回は、上記に示したサンプルのように、テキスト入力フォームの内側にアイコン( , , など)を表示させる方法をご紹介いたします。

これらの装飾には、スタイルシートを使います。 表示させるアイコンは、GIF形式やJPEG形式などの一般的な形式の画像が何でも使えます。 好きな画像を用意して試してみて下さい。

アイコン付きテキスト入力欄の作り方へ >>

  • 1
  • 2
  • 3
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます