検索窓をおしゃれにするCSSスニペット9選。デザイン性に優れた検索ボックスまとめ

スタイリッシュなデザインの検索窓(検索ボックス)のCSSサンプルをまとめました。

デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインは利用者の興味を引き付けます。

ウェブサイトにコンテンツが増えると必ず必要になってくるのが検索窓(検索ボックス)。利用者がコンテンツを探すのに必須だからです。

最も使用頻度が高いテキストボックスと言っても過言ではなく、検索窓の虫メガネアイコンを見れば誰もが「これは検索ボックスだ！」とわかるくらい共通認識化しています。

本記事ではフォームの中でも「検索窓」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。

 

検索窓(検索ボックス)の基本デザイン。シンプルでわかりやすいCSSデザイン例。

Bootstrapを利用した検索窓

See the Pen
Bootstrap 4 text input with search icon by Güngör Budak (@gungorbudak)
on CodePen.

Bootstrapデザインのテキストボックスに虫メガネアイコンを付けただけのシンプル検索窓です。

単純＋基本的ですので、どんなウェブサイトにも馴染むかと思います。

 

検索ボタンを少しだけ工夫したシンプル検索ボックス

See the Pen
Search Box Practice #3 by nikhil (@nikhil)
on CodePen.

赤い検索ボタンが目立つシンプルな検索ボックスです。ボタンの形を少しだけ工夫していますね。

ボタンの色をサイトカラーや背景色に合わせるだけで、すっきりまとまったデザインになりそうです。

 

楕円形タイプの検索窓

See the Pen
Search Box Practice #1 by nikhil (@nikhil)
on CodePen.

四角形ではなく楕円形の形をしたSearch Box。

テキストボックス部分に入力しようとすると、ボックスの幅が伸びるちょっとしたアニメーションもついています。

背景色・ボックス内の色・アイコンの色・Search…の文字色を、同系統色＋反対色で上手く揃えれば、どんなウェブサイトにも使えそうですね。

 

アイコンのみのシンプル検索窓

See the Pen
Expanding text box/button by Sam Daitzman (@sdaitzman)
on CodePen.

デフォルトの状態では虫眼鏡アイコンしか表示されていません。虫眼鏡アイコンをタップすると、検索窓が現れて入力することができます。

ウェブサイトのスペースが限られていたり、コンテンツの右上やメニュー部分などで、さりげなく検索ボックスを設置したい場合に非常に役に立つデザインサンプルです。

 

 

アニメーションが秀逸なカッコいいデザインの検索窓(検索ボックス)CSSサンプル

アニメーションにこだわったアイコンのみ検索窓①

See the Pen
Animated Search Box by Alex Tkachev (@alexpopovich)
on CodePen.

アイコンのみ検索窓ですが、クリック時のアニメーションが秀逸なデザインサンプル。

アイコンが形を変えながら検索テキストボックスが広がります。コロっと転がるように出てくる×アイコンが可愛いですね。

検索するのが楽しくなりそうなカッコいい検索窓です。

 

アニメーションにこだわったアイコンのみ検索窓②

See the Pen
CSS Search Box by Jamie Coulter (@jcoulterdesign)
on CodePen.

こちらもアイコンのみ検索窓です。

色遣いはシンプルなのですが、アイコンから検索ボックスに変化するときの動きが面白いサンプルです。

 

アニメーションにこだわったアイコンのみ検索窓③

See the Pen
Search box animation by Denis Pasko (@faustdp)
on CodePen.

こちらもアイコンのみ検索窓です。

変化時の線の動きや、テキストボックスの形成が非常にスタイリッシュです。

 

枠が動く楕円検索窓

See the Pen
Fancy Search Box // SVG + CSS + jQuery by Tommy Small (@tommysmall92)
on CodePen.

一見は普通の楕円形タイプの検索窓ですが、入力しようとすると入力フォームタイプの検索ボックスに変化します。

虫眼鏡アイコンの向きが変わったり、細かいところに遊び心があるスタイリッシュなデザインサンプルですね。

 

検索ボックスのデザイン一覧

See the Pen
CSS Animated Search Box Concepts by Brandon Kennedy (@brandonkennedy)
on CodePen.

非常に多くの検索窓の実装サンプルのまとめです。

自分のサイトにあった検索ボックスを考える上で、参考になりますね。

 

 

ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧

フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。















 

 

DesignCSS

Posted by KodoCode