jQuery

ギャラリーや商品カタログページなどで画像を並べて一覧表示する際に、異なるサイズの画像でもきちんと揃えて表示させたい時に利用できるjQueryプラグイン「ImageFit」をご紹介します。まずは、サンプ...

一昔前にオールフラッシュサイトにおいて、ページを開いた際に横から線が伸びてきて、読み込み完了の割合を表現するというビジュアルが良く見られましたが、そのようなイントロ画面をjQueryで再現することがで...

バナー画像を作る際など、単色でのっぺりとした印象を少し高級感を加えたくて、ザラつき感を入れることってありますよね。画像などの作成時にもそういった効果を利用したりしますが、サイトのページ背景で実現したい...

画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎて...

フルスクリーン画面でスクロールによるコンテンツ遷移と併せて、横にスライドする形式を実装できる「fullPage.js」をご紹介します。まずは、サンプルをご確認ください。DEMOそれでは見ていきましょう...

至極シンプルなドロップダウンメニューをjQueryを利用して作ってみます。ウィンドウサイズに対応するように横幅いっぱいにナビゲーションを配置したい時に使えるかもしれません。それでは、見ていきましょう。...

jQueryを使って「slideToggle関数」を呼び出すスライド式のメニューを作成してみましょう。今回は「slideToggle()」関数を使用します。主な仕組みついてはリファレンスをご確認くださ...

目新しいものではありませんが、スマホサイトなどでよく見かける「左側からスルッっと現れるメニューリスト」を簡単に実現することができるjQueryプラグイン「sidr.js」の使い方を、初めて利用しようと...

Webサイトの規模にもよりますが、カテゴリーリストが通常より多くなってしまうような場合、ナビゲーションにすべてを表示しようとするとゴチャゴチャとして見た目がかなり悪くなってしまいます。例えば旅行サイト...

スマートフォンなど、様々なデバイス幅に対応したフォトギャラリーを、またひとつご紹介致します。今回は、ポップアップではなくダウンスライドでページの先頭に「写真とテキスト」を表示させることが出来るものにな...

jQueryを扱う上で、よく使用するイベントを簡単にまとめておきます。イベントって何？イベントとは、サイトを閲覧しているユーザーが、マウスボタンをクリックしたりスクロールをしたり、Webページ自体を開...

PC・タブレット・スマートフォンなど、マルチデバイスに最適化する軽量なjQueryプラグイン「Easy responsive tabs」をご紹介します。スクリーンサイズが小さくなる際に、タブ表示からア...