個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

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

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

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

記事を読む

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル23

CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。 掲載され

記事を読む