jQuery

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

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

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

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

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

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

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

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

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

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

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

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