セレクトボックスをシンプルに見やすくしてくれる「jQuery Styled Select Box」 – bl6.jp
jQuery Styled Select Boxは、セレクトボックスをシンプルにスタイリングして見やすい形にしてくれるjQueryプラグインです。デフォルトのセレクトボックスのデザインはどうも見づらいと感じている人は、こういったプラグインを活用するのも一つの手ですね。 以下のページからjQuery Styled Select Boxの実際のデモやHTML・JSコードの記述例をチェックできます。 デモ デモでは「One」と表示されたセレクトボックスが設置されており、ここをクリックするとメニューリストが開かれます。リストにはOne、Two、Threeという項目が用意されています。 メニューリストが閉じられている時は、Oneの横の三角が下矢印になっていますが、メニューリストが開かれると上矢印になります。ちょっとした細部のアクセントにも気を配っているところがいいですね。 マークアップもこのようにス
シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」 – bl6.jp
parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクトを実装できるJavaScript・jQueryプラグインです。画面を上下にスクロールすることで視差効果を演出できるので、サイトがリッチな感じになりますね。 スピードや高さをオプションから設定可能 以下のページからparlx.jsの詳しい使い方やダウンロードが可能です。ダウンロードしたファイルから実際のデモ動作もチェックできます。 parlx.js デモでは各オプションによるセッティングが異なるさまざまなタイプのサンプルが設置されています。どれも画面をスクロールすることで滑らかなパララックスエフェクトを確認できるかと思います。 ちなみにオプションには、speed、height、mobileが用意されており、デフォルト値はそれぞれspeedが0.3、heightが’400px’、mobileがtrueに設定されています。 例
タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」 – bl6.jp
simplelightboxはレスポンシブ対応でタッチフレンドリーなlightboxを実装できるjQueryプラグインです。スワイプジェスチャーで前後の画像を快適に切り替えていくことができます。パソコンからの閲覧だけでなくスマホなどでも快適に動作するのがいいですね。 以下のページからsimplelightboxの実際のデモ動作をチェックできます。 デモ デモではいくつかのサムネイル画像が並べられており、いずれかの画像をクリックすると拡大画像が表示されます。左右の両端には矢印アイコンが設置されています。ここから前後の画像に切り替えることが可能です。モバイル版ではスワイプジェスチャーでサクサクと前後の画像へ切り替えられます。さらにキーボードもサポートされていることから、キーボードの左右矢印キーからでも画像の切り替えが可能です。 また、左上には画像の総数と現在表示されている画像の番号が記載されて
HTMLフォームの検証を簡単に実装できる「JS Form Validator」 – bl6.jp
JS Form ValidatorはHTMLフォームの検証を簡単に実装することができます。JQueryを必要とせず、純粋なJavaScriptを使ったバリデーションになります。ユーザーによって入力されたデータの正当性をチェックできる機能をサクッと取り入れたい人には最適です。 以下のページから、JS Form Validatorの実際のデモンストレーションをチェックできます。 デモ デモでは1〜3の全部で3つのサンプルが用意されています。例えば、1のSIMPLE FORMでは、名前、メールアドレス、パスワードの項目を検証してくれます。全てを正しく入力しないと、下にある「Create account」ボタンをクリックできない仕組みです。 データを送信する前に入力されたデータの正当性をしっかり検証してくれるので、入力ミスも軽減できますね。ユーザーとサイト運営者の双方にとって便利な機能といえます。
カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」 – bl6.jp
Zoom SlideShowは、カルーセルによるスライドショーとズーム機能を備えたjQueryプラグインです。メインエリアに表示された画像にマウスオーバーすると、その部分が虫眼鏡のようになり細部を拡大して見ることができます。スライドショーを楽しみつつ、気になる部分があれば拡大してチェックできるのでとても便利ですね。 以下、Zoom SlideShowの実際のデモページになります。 デモ デモではメインエリアに選択されている画像が大きく表示されています。この画像の上にマウスオーバーすることで、その部分を拡大して見ることが可能です。虫眼鏡のようなカーソルを動かすことで、好きな部分を瞬時に拡大することができます。 メインエリアの下にはサムネイル画像が並べられており、ここから選択した画像がメインエリアに表示されます。 また、サムネイル画像はカルーセルになっており、左右には前後移動する矢印ボタンが設
カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」 – bl6.jp
Reshaderは、カラーの濃淡を得ることができる便利なJavaScriptライブラリです。指定した任意のカラー値を基準にして、そのカラーより薄い色から濃い色までのカラー値を取得することが可能です。オプションも用意されているので、カスタマイズ性も高いライブラリに仕上がっています。 以下のページからReshaderの実際のデモ動作をチェックできます。 デモ Usageという項目がある場所に、カラーコード（hex）を入力するボックスが用意されています。デモページ読み込み時には「#6EEB83」という値が指定されていて、その下には指定したカラーコードを基準にして作られた濃淡の異なるカラーとカラーコードのリストが表示されています。 ボックス内に好きなカラーコードを入力すると、リアルタイムで反映されます。特定の色を元に濃淡の異なるカラーコードを取得したい場合にはとても役立つ機能ですね。 また、API
サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」 – bl6.jp
Tag-itはサジェスト機能を搭載したjQuery UIプラグインによるタグ編集ウィジェットです。シンプルな設定で使用できるほか、数多くのオプション項目が用意されているのでカスタマイズしたい場合にも最適です。 Tag-itの実際のデモ動作は以下のページからチェックできます。 デモ Demoというところにタグを入力するボックスが設置されていて、ここに好きなキーワードを入力してタグを登録することが可能です。サジェスト機能が搭載されているので、例えばaという文字を入力すると、その下に「asp」と「apl」というタグの候補が表示されます。 入力を補助してくれるサジェスト機能は、ユーザーにとっては便利な機能ですね。 また、オプションもかなり豊富でさまざまなカスタマイズを施すことができます。主なオプションは、fieldName、availableTags、autocomplete、showAutoco
テーブルにソート（並べ替え）機能を実装できる「tsorter」 – bl6.jp
tsorterは、JavaScriptを用いてHTMLテーブルにソート（並べ替え）機能を実装することができます。たくさんのデータを任意の順番通りにクイックに並べ替えることが可能です。テーブルに付加価値をつけたい人にはピッタリの機能ですね。 tsorterの実際のデモ動作は以下のページからチェックできます。 デモ デモページには10エントリーあるテーブルと100エントリーあるテーブルが用意されています。テーブルの上部には、ID、NAME、PRICE、LATITUDE、LONGITUDE、ADDRESSという項目が並べられていて、ここのいずれかの項目をクリックすることで、その項目を基準にした順番に並べ替えられます。 ちなみにデモページ読み込み時はID順になっています。各項目のクリックを繰り返す度に、昇順や降順に切り替えることが可能です。 たくさんのデータが並べられたテーブルでは、このように任意
カスタマイズしたコンテキストメニューを実装できる「jQuery contextMenu plugin & polyfill」 – bl6.jp
jQuery contextMenu plugin & polyfillは、カスタマイズ可能なコンテキストメニューを実装することができるjQueryプラグインです。独自のコンテキストメニューを表示したいアプリケーションなどにはピッタリですね。 以下のページから、jQuery contextMenu plugin & polyfillの実際のデモ動作を確認できます。 デモ デモページには、「right click me」と書かれたボタンが設置されており、ここに右クリックするとコンテキストメニューが表示されます。 メニューには、Edit、Cut、Copy、Paste、Delete、Quitといった項目が用意されています。各項目の左側にはアイコンも表示されているので、シンプルながらもとても見やすいコンテキストメニューに仕上がっています。 これらのメニュー項目は、JS側のセッティング内で「item
タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」 – bl6.jp
Amigo Sorter Pluginは、タッチ対応で直感的にリスト項目を並べ替えすることができるjQueryプラグインです。タッチやドラッグで簡単にソートできるので、ユーザーにとってはとても便利な機能ですね。 以下、Amigo Sorter Pluginの実際のデモページになります。 デモ デモページでは、いくつかの親要素の下にネストされた項目がいろいろ並んでいます。この子リストをタッチやドラッグすることで上下好きな位置に移動させることが可能です。 また、親要素をタッチやドラッグすることで、子リストを含む親要素ごと移動させることもできます。 使い方やマークアップもシンプルなので、手軽に実装できるのがいいですね。 そのほか、コールバック関数もいくつか用意されています。主なコールバック関数は、onTouchStart、onTouchMove、onTouchEndです。タッチ開始時、タッチ移動
チェックボックスをアニメーショントグルにする「jquery-simpletoggler」 – bl6.jp
jquery-simpletogglerは、デフォルトのチェックボックスをアニメーショントグルにすることができるjQueryプラグインです。アニメーション付きのトグルスイッチなので、オン・オフを切り替える時にとてもわかりやすいですね。 jquery-simpletogglerのダウンロードや詳細は以下のページからどうぞ。ダウンロードしたファイルから実際のデモ動作を確認できます。 jquery-simpletoggler デモではシンプルなトグルスイッチが2つ設置されています。どちらも、スイッチをクリックすることで簡単にオン・オフ切り替えることが可能です。シンプルな操作性とアニメーションで、現在オンになっているかオフになっているかを認識しやすいのがいいですね。 サイズもコンパクトなので、余計なスペースを必要とせず、いろんなところに設置できると思います。また、この手のスイッチはパソコンだけでは
ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込める「jQuery Responsive Image Plugin」 – bl6.jp
jQuery Responsive Image Pluginは、ビューポートやコンテナ幅をベースに、サイズの異なる画像を読み込むことができるjQueryプラグインです。それぞれの環境に合わせた最適なサイズの画像を設定することが可能です。 以下のページから、jQuery Responsive Image Pluginのダウンロードや具体的な実装方法をチェックできます。ダウンロードしたファイルから実際のデモを見ることもできます。 デモ デモでは、ビューポートをベースにしたものやコンテナの幅をベースにしたものなどが用意されています。ブラウザ幅を縮小・拡大すると、それに合わせて読み込む（表示される）画像が切り替わるのを確認できるかと思います。 無駄に容量の大きい画像を読み込んだりしなくても済むので、画像をたくさん使ったサイトなんかにはとても最適な機能ですね。data-min-widthという属性を
スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」 – bl6.jp
bsc-sliderは、シンプルでスタイリッシュなスライダーを実装することができるjQueryプラグインです。実用的なオプションもいろいろ揃っているほか、多彩なアニメーションエフェクトが用意されています。 bsc-sliderのダウンロードや具体的な使い方は、以下のページからチェックできます。ファイルをダウンロードすれば実際のデモ動作も見ることが可能です。 bsc-slider デモではフェードで切り替わる優雅なスライダーが設置されています。複雑な機能や装飾がなく、とてもスタイリッシュな印象です。 マークアップ、使い方ともにとてもシンプルなので、簡単に実装することができます。 主なオプションは、autoplay、navigation、duration、effect、effect_speed、easing、heightです。オプションから、自動再生のオン・オフやナビゲーションの有無、エフェク
カスタマイズ性に優れたレーティング（星評価）実装「star-rating-svg」 – bl6.jp
star-rating-svgは、SVGを使用したカスタマイズ性に優れたレーティング（星評価）機能を実装することができるjQueryプラグインです。画像を用意する必要がないので手軽にレーティング機能を取り入れれるのがいいですね。 以下、star-rating-svgの実際のデモページです。 デモ デモページでは、ベーシックなタイプものからラウンド型スターのもの、グラデーションを取り入れたもの、ホバーイベントを実装したものなど、いろんなタイプのデモが用意されています。 スターのサイズ、カラー、シェイプなどをオプションから簡単にカスタマイズできるので、自サイトに合わせたレーティングデザインに仕上げることが可能です。 また、レーティングをつけるだけではなく、読み込み専用（あらかじめ評価を固定）として表示させることもできます。ほかにも、レーティングをつけた後に発生させるコールバックや、ホバー時にレ
シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」 – bl6.jp
offcanvas-mobile-menuは、シンプルでモバイルフレンドリーなナビゲーションメニューを実装することができるjQueryプラグインです。横からスライドアニメーションでメニューが表示・非表示されます。 offcanvas-mobile-menuのダウンロードや詳細な使い方は、以下のページからチェックできます。ダウンロードしたファイルから実際のデモ動作も確認できます。 デモ デモでは画面右上に「trigger menu」と書かれたボタンが設置されていて、ここをクリックすると右側からナビゲーションメニューがスライドアニメーションとともに表示されます。 再度、trigger menuボタンをクリックすると、今度はメニューがスライドアニメーションとともに非表示になる仕組みです。 ユーザーによるアクションがないとメニューが表示されないので、通常時は画面全体がスッキリしますね。アニメーショ
ローディングアニメーションを手軽に実装できる「EasyLoading」 – bl6.jp
EasyLoadingは、ローディングアニメーションを手軽に実装することができるjQueryプラグインです。HTMLのタグを追加することなく、ローディングアニメーションを設置できるのがいいですね。アニメーションのタイプも豊富に用意されているので、好みに合わせたローディングアニメーションが実装可能です。 以下、EasyLoadingの実際のデモページになります。 デモ デモページでは、BALL_PULSE、BALL_CLIP_ROTATE、BALL_CLIP_ROTATE_PULSE、SQUARE_SPIN、BALL_CLIP_ROTATE_MULTIPLE、BALL_PULSE_RISE、BALL_ROTATE、CUBE_TRANSITION……など、たくさんのタイプのローディングアニメーションを実行することができます。 任意のボタンをクリックすると、それに対応したローディングアニメーショ
手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」 – bl6.jp
simpleParallaxは、手軽にパララックス効果を画像に実装することができるシンプルで軽量なjQueryプラグインです。複雑な機能などを必要とせず、サクッとパララックス効果を画像に適用したいという人にオススメです。 simpleParallaxの実際のデモ動作は、以下のページからチェックできます。 デモ デモページでは、下へスクロールしていくと画像に視差効果が加えられているのを確認できるかと思います。それほど大げさなものではなく、さりげないパララックスに仕上がっている印象です。 派手さはないものの、シンプルな分いろんなサイトに合わせやすいプラグインといえるのではないでしょうか？ 使い方もかなりシンプルで、手軽に使用できるはず。セッティング可能な項目には、orientationとscaleが用意されています。orientationにはupかdownのいずれかを指定できます。デフォルト値
スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」 – bl6.jp
scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。 以下、scrollama.jsの実際のデモページになります。 デモ デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。スクロールした時に要素がこの位置を通過してから通りすぎるまでの間、要素のカラーが変化します。 スクロールにより、特定の位置をトリガーとして要素に何かしらの変化を施したい場合に便利ですね。応用次第でさまざまなシーンに役立つ機能といえるのではないしょうか？ オプションには、step、container、graphic、offset、progress、debugがあります。デフォルト値は、offsetが
スクエアなグリッドレイアウトを実装できる「jquery.square.js」 – bl6.jp
jquery.square.jsは、スクエアなグリッドレイアウトを実装することができるjQueryプラグインです。レスポンシブに対応し、いろんなデバイスから最適なレイアウトで閲覧できます。シンプルで美しいグリッドレイアウトを実装したい人は要チェックです。 以下、jquery.square.jsの実際のデモページになります。 デモ デモページでは、スクエアなアイテムがグリッドレイアウトで綺麗に並べられています。レスポンシブにも対応していることから、ブラウザ幅を縮小・拡大していくとそれに合わせて最適化されます。 アイテムはほとんどが同じサイズのものが多いですが、いくつか異なるサイズのアイテムも表示されています。異なるサイズでも綺麗なグリッドレイアウトになるように配置されています。 ブログのトップページや企業の新着情報など、応用次第で使いどころはいろいろありそうですね。 各アイテムはこんな感じで
入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」 – bl6.jp
AJAX Live Searchは、Google Autocomplete機能と同様に入力された結果を検索して表示するjQueryプラグイン・PHP検索フォームです。ボックス内に何かテキストを入力すると、それに合う結果を検索して表示してくれます。 以下、AJAX Live Searchの実際のデモページになります。 デモ デモページには「Type to start searching …」と表示されたテキストボックスが設置されていて、ここに何か文字を打ち込むとそれに合うデータを検索してきて表示してくれます。 例えば、「a」という文字を入力してみるとたくさんの候補が出てくるのを確認できるかと思います。 デモでは候補が5件ずつ表示されるようになっていますが、左下から表示件数を変更することができます。All、5、10の3つから選択可能で、全部表示させたい場合はAllに設定すればOKです。 また、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
