株式会社オンズのブログ記事一覧
タグ "jQuery" を含む投稿を表示中：98件
-
-
【jQuery】特定の［div 要素］で囲んだ箇所全体をリンクとして機能させる方法。 HTML5 以降では、インライン要素とブロック要素の区別がなくなったことで、［a 要素］で［div 要素］を囲うことが可能になっています。 しかし HTML5 未満では非推奨。 そこで、jQuery を利用して、特定の［div 要素］の中に... 【jQuery】特定の［div 要素］で囲んだ箇所全体をリンクとして機能させる方法。続きを読む →
-
-
【jQuery】alert() メソッドで表示される警告ウィンドウのデザインを変更する［SweetAlert］スクリプト。 通常、jQuery メソッドの［alert()］で表示される警告ウィンドウにはスタイルシートが適応されないため、デザインを施すことが不可能ですが、今回紹介する jQuery スクリプト［SweetAlert］を利用するとオシャレな感じにカス... 【jQuery】alert() メソッドで表示される警告ウィンドウのデザインを変更する［SweetAlert］スクリプト。続きを読む →
-
【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。 一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定さ... 【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。続きを読む →
-
-
-
【jQuery】Manipulation API リファレンス 今日は備忘録を兼ねて［jQuery Manipulation API］のリファレンス一覧を紹介します。 ［jQuery Manipulation API］とは DOM を操作する関数のこと。 ［DOM］とは「Document Object ... 【jQuery】Manipulation API リファレンス続きを読む →
-
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。 スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。 その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。 タッチイベントとは、その名のとおりスマ... 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。続きを読む →
-
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。 ［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「&... 【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。続きを読む →
-
【jQuery】郵便番号を入力すると住所を自動補完する［jquery.jpostal.js］が便利です。 郵便番号を入力すると住所を自動補完して表示してくれる jQuery ライブラリ［jquery.jpostal.js］が非常に便利だったのでご紹介します。 同機能の他の jQuery プラグインは大容量のデータファイルをサーバーにアップする必... 【jQuery】郵便番号を入力すると住所を自動補完する［jquery.jpostal.js］が便利です。続きを読む →
-
-
【jQuery】可変グリッド・レイアウトの超有名プラグイン［Masonry］を紹介します。 ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する［Masonry］は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理... 【jQuery】可変グリッド・レイアウトの超有名プラグイン［Masonry］を紹介します。続きを読む →
-
【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法 jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。 実装したサンプルは以下。 ボックス・スクロール：サンプル・デモ HTML の記述サンプルは... 【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法続きを読む →
-
【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。 jQuery を使って、画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショーを紹介します。 簡単に設置できることはもちろん、JavaScript、HTML、CSS がすべて短いコードで書かれているのが特徴です。 百聞は一見... 【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。続きを読む →
-
-
【jQuery】超高機能ギャラリー［MixItUp］の使い方。 フィルターをかけられたり、ソートもできる超高機能jQueryギャラリー［MixItUp］の紹介です。 まずは公式サイトからプラグイン本体をダウンロードしてきましょう。 https://www.kunkalabs.com/mixitup/ ダ... 【jQuery】超高機能ギャラリー［MixItUp］の使い方。続きを読む →
-
【jQuery】背景画像をブラウザのウィンドウサイズに最適化！ 便利なjQueryプラグイン［jQuery BackStretch］を使うと、背景に指定した画像をブラウザのウィンドウサイズに最適化してくれて、さらにスライドショーにも対応し、複数の画像を順番に表示してくれます。 簡単に設定できることはもち... 【jQuery】背景画像をブラウザのウィンドウサイズに最適化！続きを読む →
-
【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方 ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。 これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。 そこで、同様のことを jQuery で実現... 【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方続きを読む →
-
【jQuery】Simple News Ticker の使い方。 シンプルな News Ticker を探していたところ、条件にピッタリ合ったプラグインを見つけたので紹介します。 「Webサイト上の限られたスペースを有効活用できる」ことがウリの News Ticker は、複数にわたる情報を表示させたいと... 【jQuery】Simple News Ticker の使い方。続きを読む →
-
【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。 タッチデバイスのフリック入力にも対応したシンプルなスライドショーを実装できる jQuery プラグイン［Swipeshow］を紹介します。 このプラグインは jQuery 1.8 以上に対応。容量も軽く、サクサク動きます。 まずは Swip... 【jQuery】超軽量フリック対応スライダー［Swipeshow］を紹介します。続きを読む →
-
【jQuery】重複しない複数の要素をランダムに表示する方法。（jQuery編） 例えば「1」〜「10」までの要素の中から３つだけランダムに抽出して表示させたい場合があります。 この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか？ 今日は、そんなときに重宝する便利な... 【jQuery】重複しない複数の要素をランダムに表示する方法。（jQuery編）続きを読む →
-
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から... 【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）続きを読む →
-
