殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」
twitter facebook hatena google pocket ネタ的なやつですが、殺風景なフォームを華麗に装飾することができるjQueryプラグインfancyInputです。 もしかしたらコンバージョン率が上がるかもしれません。 sponsors 使用方法 fancyInputからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="fancyInput.js"></script> <script type="text/javascript"> $(function() { $('input').val('').fancyInput()[0].focus(); }); </script> inpu
意外に便利！？画像をグリッドに綺麗に散りばめてくれるjQueryプラグイン「Photoset Grid」
twitter facebook hatena google pocket 画像を配置する際に大きさ同じでグリッド形式にしてもつまらなくなりますよね。 jQueryプラグインのjQuery Photoset Grid - Style Hatchを利用すると大きさをバラバラにして綺麗に散りばめて配置してくれます。 これで一味違った画像の見せ方が簡単にできますね。 sponsors 使用方法 jQuery Photoset Grid - Style Hatchからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.photoset-grid.js"></script> <script type="tex
レスポンシブなメニューを導入！jQueryプラグイン「MeanMenu」
twitter facebook hatena google pocket 昨今流行っているレスポンシブ・ウェブデザインですが、メニューの扱いに悩むことがあるかもしれません。 jQueryプラグインのMeanMenuを利用すれば、ウィンドウサイズに応じてメニューを最小化してくれます。 よくあるスマホサイト風になり、お悩みが解消されるかもしれません。 sponsors 使用方法 下記のようなメニューがあるとします。 <nav> <ul id="nav"> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> </ul> </nav
Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」
twitter facebook hatena google pocket Google Mapを表示するJavaScriptはそこそこ簡単ですすが、ルート表示させるとなかなか厄介です。 jQueryプラグインのMaplace.js - A small Google Maps Javascript helper.を利用するとルートを簡単にプロットできたり、特定位置をつなぐ、塗りつぶすなど簡単に表示させられることが可能です。 sponsors 使用方法 Maplace.js - A small Google Maps Javascript helper.からファイルをダウンロード。 <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script> <script t
3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」
twitter facebook hatena google pocket MACでプレゼンをしている人を見ているとその動きに思わず自分もMACを欲しくなる人いませんか。 ちょっと待って、購入ボタンを押す前に、Windowsでもかっこ良く全画面をスライドさせられるJavaScript「hakimel/kontext」を試してみませんか。 スライド間の切り替えをかっこよく3Dぽくしてくれます。 sponsors 使用方法 hakimel/kontextからファイル一式をダウンロードし、JavaScriptとCSSを下記のように記述します。 <link rel="stylesheet" href="kontext.css"> <link rel="stylesheet" href="demo.css"> <script type="text/javascript" src="kontext.j
おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」
twitter facebook hatena google pocket フォームの入力は簡単にすることで離脱率を下げることが可能です。 日付を入力させるところもカレンダーで表示すると、簡易化できまたわかりやすいので、誤入力が減りそうです。 Pickadate.jsはこれを実現するjQueryプラグインです。 sponsors 使用方法 導入は非常に簡単です。 Pickadate.jsからファイル一式をダウンロード。 <link rel="stylesheet" href="pickadate.01.default.css"> //好きなテーマを選んでください <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="pickadate.mi
文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」
twitter facebook hatena google pocket 朝食ではカリッと焼きあがったベーコンが必要という方もいるかもしれません。 そんなベーコン好きにはたまらないプラグイン「It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.」はベーコンの形みたいに、文字を曲げて表示することが可能です。 sponsors 使用方法 hudsonfoo/jQuery-Bacon ? GitHubからファイル一式をダウンロード。 <link rel="stylesheet" href="bacon.jquery.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <scri
背景にmp4の動画を流せるjQueryプラグイン「BigVideo.js」
twitter facebook hatena google pocket 背景に動画を流せると印象的なサイトになります。 これを簡単に実現するのがBigVideo.js - The jQuery Plugin for Big Background Videoです。 インパクトのあるサイトにご利用ください。 sponsors 使用方法 BigVideo.js - The jQuery Plugin for Big Background Videoからファイル一式をダウンロード。 <link rel="stylesheet" href="bigvideo.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1
背景画像を生成するオンラインサービス8選
twitter facebook hatena google pocket ディスプレイサイズが大きくなっている昨今、背景が印象を左右します。 そこで、オンラインで簡単に生成できる背景画像サービスをピックアップしてみました。 sponsors 10,000s Cool FREE Seamless Patterns for Blogger and Twitter Backgrounds, Blog and Website Wallpapers パターンの中から選べるタイプです。 URL：http://www.patterncooler.com/ Stripe Generator - ajax diagonal stripes background designer 昔からあるストライブパターンのサイトです。 URL：http://www.stripegenerator.com/ Stripe
引用をモダンにするCSSの記述法
twitter facebook hatena google pocket ちょっと気になったので取り上げます。 Modern Block Quote Styles | Codropsで紹介されている引用のユニークで現代的なCSS記述法です。 sponsors 全部で6パターン紹介されていますが、どれも個性的すぎるところがあるので、一番利用できそうなものを取り上げます。 その他も参考にして、自分なりの引用を作ってみてはいかがでしょうか。 記述方法 まず、HTMLのマークアップです。 <div class="mb-wrap mb-style"> <blockquote cite="引用元URL"> <p>引用文</p> </blockquote> <div class="mb-attribution"> <p class="mb-author">引用元筆者</p> <cite><a href
要素をソートさせるjQueryプラグイン「TinySort」
twitter facebook hatena google pocket 画像やリスト、表組みなどソートできるようにしておくと便利です。 jQueryプラグインのTinySort 1.3.27はこれを簡単に実現可能です。 sponsors 使用方法 TinySort 1.3.27からファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.tinysort.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#id1 li').tsort(); //通常のソート $('#id2 li').tso
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
