タグ "jQuery" を含む投稿を表示中:97件
-
【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】画像のリンク切れに備えるための簡単なjQueryコード。 画像の引用が多いサイトで使える便利なコードを紹介します。 たった1行で、画像のリンク切れを回避できる jQuery のコードです。 画像が読み込まれないときに代替画像を表示 <head>〜</head> 内に以下を記… 【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。続きを読む →
-
【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。 ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する[Masonry]は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理… 【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。続きを読む →
-
【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法 jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。 実装したサンプルは以下。 ボックス・スクロール:サンプル・デモ HTML の記述サンプルは… 【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法続きを読む →
-
【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。 jQuery を使って、画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショーを紹介します。 簡単に設置できることはもちろん、JavaScript、HTML、CSS がすべて短いコードで書かれているのが特徴です。 百聞は一見… 【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。続きを読む →
-
【jQuery】背景いっぱいにYouTube動画を表示させる[jQuery Tubular]を紹介します。 ウェブサイトにアクセスしたとき、背景全面に大きく動画が流れていると大変インパクトが強く、印象に残ります。 そこで今日は、サイトの背景にYouTubeの動画を表示・再生させることができるjQueryプラグイン[jQuery tubular]を… 【jQuery】背景いっぱいにYouTube動画を表示させる[jQuery Tubular]を紹介します。続きを読む →
-
【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」までの要素の中から3つだけランダムに抽出して表示させたい場合があります。 この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか? 今日は、そんなときに重宝する便利な… 【jQuery】重複しない複数の要素をランダムに表示する方法。(jQuery編)続きを読む →
-
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。(改訂版) ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ!」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から… 【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。(改訂版)続きを読む →
-
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 今日紹介するのは jQuery プラグインの[FlexSlider]です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもOK、画像にリンクを貼ることはもちろん、キャプションも表示可能、… 【jQuery】超万能スライダー FlexSlider の使い方をマスターする。続きを読む →
-
【jQuery】フォームへの再入力時にペーストを禁止する方法。 入力フォームでメールアドレスを記述してもらう際に、間違いを防止するため、確認用に2度入力させることが良くあリます。 そんなとき、1つ目に入力したものをコピーして2つ目にペーストされてしまうと、瞬間的には入力の手間が減ったかのように感じますが… 【jQuery】フォームへの再入力時にペーストを禁止する方法。続きを読む →