0

検索フォームをCSSでカスタマイズする

検索フォームをCSSでカスタマイズする

サイト内検索フォームなどを実装する際に、画像ボタンを配置したり、アイコンを添えてシンプルに見せたりとCSSでちょっとしたデザイン変更をする方法をメモしておきます。

検索フォームは、「テキストを入力し送信する」というだけのパーツ部分ですが、作りがシンプルなだけにオリジナリティーを表現できる場でもあります。手を抜かずにこういったところもキチンと考えて配置していくことが大切ですね。

▼今回は、以下の4パターンを作成します。

1.テキストエリア内に検索マークを配置(画像)

f1

1-1.HTMLを記述

1-2.CSSを記述

2.テキストエリア内に検索マークを配置(画像)

f2

2-1.HTMLを記述

2-2.CSSを記述

3.テキストエリア内に検索マークを配置(画像)

f3

3-1.HTMLを記述

3-2.CSSを記述

4.テキストエリア内に検索マークを配置(画像)

f4

4-1.HTMLを記述

4-2.CSSを記述

 色々なWebサイトを見ていくと、わかりやすいデザインとそうでないものがあることに気が付きます。何となく見ていると見落としてしまうような細部に、ささやかな配慮をしているサイトを見ると作成者の“こだわり”を強く感じることがあります。そういった、さりげない主張というものが好きな方は今回の検索フォームのようなパーツにこだわってみるのもいいかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 検索フォームをCSSでカスタマイズする