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

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

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

セキュリティー/プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

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

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

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

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

ファイルのウイルス感染を無料でチェックできるオンラインセキュリティー

ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9

ファイルのウイルスやマルウエアを無料でスキャンできるオンラインサービスセキュリティーサービスをご紹介

記事を読む