個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)

検索フォームはサイトに欠かせない重要な要素の1つになっています。
最近では、アニメーションを用いた検索フォームもよく見かけますよね。
自分でもいつか実装してみたいなあと思っていたので、無料で利用できるコード&スクリプトを集めてみました。
これからサイト制作して検索フォームを実装するときに、何らかの参考になれば幸いです。

How to Create an Expanding Search Box with CSS

How-to-Create-an-Expanding-Search-Box-with-CSS
検索アイコンをクリックすると、検索フォームの窓がびよーんと伸びるタイプです。
CSSだけで実装します。
How to Create an Expanding Search Box with CSS

Create a Drop Down Menu with Search Box in CSS3 and HTML

Create-a-Drop-Down-Menu-with-Search-Box-in-CSS3-and-HTML
ドロップダウンメニューのなかに検索ボックスを組み込んでいます。
CSSだけで実装しています。
DemoCreate a Drop Down Menu with Search Box in CSS3 and HTML

How to Code an Expanding HTML5/CSS3 Search Input Field

Untitled
検索フォームにカーソルを置くと、検索ボックスが左にビヨーンと伸びます。
CSSだけのタイプと、jsを使用したものの2つがあります。
DemoHow to Code an Expanding HTML5/CSS3 Search Input Field

Fancy Search Box

Fancy-Search-Box
親要素のサイズに合わせて大きさが変わる、フラットデザインの検索フォーム。
CSSだけで実装しています。
fancy search box

Search Bar Animation

Search-Bar-Animation
検索アイコンをクリックすると、検索ボックスが右に伸びて現れてきます。
Search Bar Animation

Expanding Search Bar Using CSS Transitions

Expanding-Search-Bar-Using-CSS-Transitions
こちらも検索アイコンをクリックすると、検索ボックスが右に伸びて現れるタイプ。
CSSだけで実装しています。
DemoExpanding Search Bar Using CSS Transitions

Super Cool Search Input Bar Using CSS3 and JS

Super-Cool-Search-Input-Bar
こちらも検索アイコンをクリックすると、検索ボックスが伸びて現れるタイプですが、今回は左に伸びていきます。
Super Cool Search Input Bar Using CSS3 and JS

jQuery and CSS3 “Next Level” animation Search Form

Cube-Animation
こちらは3タイプ。
1つは、検索アイコンをクリックすると、検索ボックスが伸びて現れるタイプ。
2つめは、検索アイコンをクリックすると、ボックスが3Dアニメーションで回転し、検索ボックスが現れるタイプ。
3つめは、上記2つを組み合わせたタイプです。
DemojQuery and CSS3 “Next Level” animation Search Form

Mini-search filter

Basic-jQuery-search-filter
検索ボックスにキーワードを入力すると、下に表示されているカテゴリーがヒットするカテゴリーだけに精査されていく、珍しいタイプの検索ボックス。
Mini-search filter

Flexible Search Box

Flexible-Search-Box
画面サイズに合わせて左右の幅が可変するタイプの検索ボックス。
Flexible Search Box

Pulsating CSS3 Input Search Box

Pulsating-CSS3-Input-Search-Box
検索ボックスが点滅を繰り返します。
Pulsating CSS3 Input Search Box

WP Advanced Search: Easy advanced search forms for WordPress

WP-Advanced-Search
WordPress用検索フォームのフレームワーク。
簡単に設置することができるうえに、豊富なカスタマイズが特長です。
YouTubeによる簡単な紹介動画もあります(19分)。

DemoWP Advanced Search: Easy advanced search forms for WordPress

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 4
  • 10

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

Joomla!の無料テンプレート123 レスポンシブWEBデザイン対応もあり

Joomla!(ジュームラ)は高機能で使いやすいと評判のCMSです。 ドメイン、サーバー込みで無料

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む