タグ "jQuery" を含む投稿を表示中:97件
-
【jQuery】ホワイトスペースを有効活用して遊び場に変える[Cube.js]が素敵です。 ウェブサイトのホワイトスペースを有効活用して、ちょっと楽しい雰囲気にしてしまう jQuery プラグイン「Cube.js」を紹介します。 製作者は日本国内のクリエイター「nejimaki act」様。プラグインのライセンスはフリーだそうで「… 【jQuery】ホワイトスペースを有効活用して遊び場に変える[Cube.js]が素敵です。続きを読む →
-
【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。 グリッドに沿って要素をタイル状に並べる jQueryプラグインとして、これまでにも[Masonry]や[Isotope]を紹介してきました。 今日紹介する[Freetile.js]も、前者2つと同じような機能を備えたプラグインです。 まずは… 【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。続きを読む →
-
【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。 各種スマートフォンやタブレット端末でのウェブ観覧時に、スワイプやフリック等のタッチコントロールによるウィンドウのスクロールを禁止する方法を紹介します。 パソコンの場合、CSSで「overflow:hidden;」を効かせれば、スクロールさせ… 【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。続きを読む →
-
【jQuery】縦長のサイトを読み込んだときの表示位置をページトップにする 特にスマートフォン対応サイトなどで、縦スクロールが発生する縦長のサイトを読み込むと、初期表示の位置がページトップではなくページの途中から表示されてしまうケースがあります。 これはブラウザの仕様で、ウェブページをリロードした際に以前読み込んだ… 【jQuery】縦長のサイトを読み込んだときの表示位置をページトップにする続きを読む →
-
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。 グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは[jQuery Masonry]が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多い… 【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン[Isotope]の使い方。続きを読む →
-
【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める![jQuery3.0以降対応] jQuery を扱うとき、多くは下記のようなコードで実装していると思います。 $(function() { // ここに処理内容を書く }); ここで使われる「$(function(){〜});」は略式で、展開すると $(document)… 【jQuery】「$(document).ready()」と「$(window).load()」の違いを極める![jQuery3.0以降対応]続きを読む →
-
【jQuery】間違えやすい「$(this)」と「this」の使い方とは? jQuery でプログラムを書いている際に「$(this)」と「this」の使い方で一瞬戸惑うことがありませんか? 基本的に「this」のほうは[DOMエレメント]で、イベントハンドラの「this」はそのイベントが発生した要素になり、「ea… 【jQuery】間違えやすい「$(this)」と「this」の使い方とは?続きを読む →
-
【jQuery】レスポンシブ対応の[Skippr.]でシンプルなスライドショーを実装。 レスポンシブ対応のスライドショーを実装するためのプラグイン[Skippr]は、ファイルの容量も小さく動作も軽快なので、特にシングルページのウェブデザインを構築する際にオススメです。 導入方法も簡単なので初心者の方でもハードルはそれほど高くな… 【jQuery】レスポンシブ対応の[Skippr.]でシンプルなスライドショーを実装。続きを読む →
-
【jQuery】特定の[div 要素]で囲んだ箇所全体をリンクとして機能させる方法。 HTML5 以降では、インライン要素とブロック要素の区別がなくなったことで、[a 要素]で[div 要素]を囲うことが可能になっています。 しかし HTML5 未満では非推奨。 そこで、jQuery を利用して、特定の[div 要素]の中に… 【jQuery】特定の[div 要素]で囲んだ箇所全体をリンクとして機能させる方法。続きを読む →
-
【jQuery】スクリプトによってHTMLに書き加えられたstyle属性を削除する方法 JavaScript や jQuery を使って HTML に動的な処理を施していくと、HTML の各要素に[style属性]が書き加えられていきます。 この追加された[style属性]を削除する方法を紹介します。 使用するのは jQuer… 【jQuery】スクリプトによってHTMLに書き加えられたstyle属性を削除する方法続きを読む →
-
【jQuery】alert() メソッドで表示される警告ウィンドウのデザインを変更する[SweetAlert]スクリプト。 通常、jQuery メソッドの[alert()]で表示される警告ウィンドウにはスタイルシートが適応されないため、デザインを施すことが不可能ですが、今回紹介する jQuery スクリプト[SweetAlert]を利用するとオシャレな感じにカス… 【jQuery】alert() メソッドで表示される警告ウィンドウのデザインを変更する[SweetAlert]スクリプト。続きを読む →
-
【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。 一時期、多くのサイトで導入され大流行した jQuery プラグイン[Lightbox]の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定さ… 【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。続きを読む →
-
【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。 初心者には難しい印象の JavaScript ですが、より簡単に使いこなすために[jQuery]や[Prototype JS]などのライブラリが開発されています。 また、同様のフレームワークとして、最近では[angular.js]、[bac… 【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。続きを読む →
-
【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。 今日紹介する jQuery プラグイン[bxSlider]はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider:サンプル・デモ 特徴は初心者でも簡単に設置で… 【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。続きを読む →
-
【jQuery】Manipulation API リファレンス 今日は備忘録を兼ねて[jQuery Manipulation API]のリファレンス一覧を紹介します。 [jQuery Manipulation API]とは DOM を操作する関数のこと。 [DOM]とは「Document Object … 【jQuery】Manipulation API リファレンス続きを読む →
-
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。 スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。 その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。 タッチイベントとは、その名のとおりスマ… 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。続きを読む →