文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 入力部品のデザイン > 検索窓デザイン

検索窓をデザインする

検索窓は検索用のテキスト入力とボタンが1対で出来ているため、テキストとボタンを繋げたり、テキスト内にボタンを配置するなど色々なデザインが利用されています。

当ページは、テキストとボタンを一体化したデザインを作成することが出来ます。また、サンプルも掲載していますので、ぜひご活用ください。

検索窓デザインするを変更して見よう!

色々試してみて、生成されたCSSをコピーしてご利用ください。

ボタンの表示
検索窓の形
大きさ
角丸
検索窓の枠線・ボタン色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
検索
使用したhtml
<div class="searchArea" id="makeImg">
  <input type="text" id="inText" class="searchText">
  <div class="searchButton">
    <span>検索</span>
  </div>
</div>

虫眼鏡などの検索アイコンは以下よりダウンロードできます。
【フリーアイコン】検索

生成したCSS
<style type="text/css">
 /* --- 検索全体のBOX (サンプル用)--- */
.searchArea{
  width          : 290px;              /* BOXの幅               */
  height         : 24px;               /* BOXの高さ             */
  margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  line-height    : 0;                  /* 標準の行高さ          */
}
 
 /* --- テキスト入力欄のSTYLE設定 --- */
.searchArea .searchText {
  display        : block;              /* ブロック化            */
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 24px;               /* 入力の高さ            */
  width          : 170px;              /* 入力の幅              */
  margin         : 0;                  /* 外余白                */
  padding        : 0 12px;             /* 内余白                */
  border         : 2px solid #007fff;  /* 枠線 幅,実践,色      */
  border-radius  : 12px 0 0 12px;      /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  font-size      : 12px;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄のSTYLE設定 --- */
.searchArea .searchButton {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 24px;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 6px 10px;           /* 内余白                */
  border         : none;               /* 枠線 幅,実践,色      */
  border-radius  : 0 12px 12px 0;      /* 右上下の角丸          */
  background     : #007fff;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
  line-height    : 12px;               /* 1行の高さ             */
  font-size      : 12px;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄にフォーカスか来たとき --- */
.searchArea .searchText:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
}
 
 /* --- IEの入力エリア右側×消し -------------------------*/
.searchArea .searchText::-ms-clear {
  display        : none;               /* ×を消す              */
}</style>
ページTOP
広告
広告

色々な検索窓デザイン

デザインで使用している画像は、直接リンクで使用しないでください。
虫眼鏡などの検索アイコンは以下よりダウンロードできます。
【フリーアイコン】検索

入力時に横幅を広げる

入力テキストにフォーカスが来た時に横幅を広げます。サンプルは親要素を溢れて右側に広がる検索窓となります。検索窓が狭い場所にしか配置できない場合は有効な手段となります。

HTML
CSS
表示

虫眼鏡マークと付けてENTERで検索実行

テキスト内に虫眼鏡マークを背景画像として付けています。formを使用することでENTERで実行可能として検索ボタンが無いサンプルです。

HTML
CSS
表示

検索テキスト内にボタンを配置する

検索テキスト内にボタンを配置するサンプルです。

HTML
CSS
表示

検索ボタンの画像が変化する

検索用の虫眼鏡ボタンにマウスが乗った時に「GO」の画像に変化するサンプルです。画像の入れ替えと合わせて背景色の変更も行っています。

HTML
CSS
表示

検索ボタンが回転する

検索用の虫眼鏡ボタンにマウスが乗った時に、ボタンが回転するサンプルです。回転と合わせて背景色の変更も行っています。

HTML
CSS
表示
ページTOP

注意事項

デザインで使用している画像は、直接リンクで使用しないでください。
虫眼鏡などの検索アイコンは以下よりダウンロードできます。
【フリーアイコン】検索

「Google カスタム検索」や「Yahoo!カスタムサーチ」を利用する場合は、それぞれのサービスで検索窓が決まっており、自由にデザインすることはできません。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン