jQueryプラグイン・ライブラリ [JS]jQuery Datepickerの日付フォーマットをyy/mm/ddに変更する方法
以前紹介させていただいたjQuery Datepickerですが、カレンダーの日付をクリックして表示される日付のフォーマットをyy/mm/ddに変更する方法のご紹介です。 Datepickerの日付フォーマットをyy/mm/ddに変更 前回...
Javascript・jQuery
jQueryプラグイン・ライブラリ 
jQuery [jQuery]カレンダーアイコン付きDatepicker
カレンダーアイコン付き jQuery Datepicker>
jQueryプラグイン・ライブラリ [JS]jQuery fatNavの拡大縮小アニメーションを停止する方法
以前にシンプルなフルスクリーンメニューのjQueryプラグインjQuery fatNavの記事で紹介させていただいたjQuery fatNavで、ドロワーメニューの拡大縮小アニメーションをやめる方法のご紹介です。 制作案件でjQuery f...
Javascript・jQuery [JS]jQuery不要のコンテンツスライダーSwiperの使い方（デモあり）
このブログでもbxsliderなど、いくつか便利なスライダープラグインを紹介させていただいておりますが、今回はjQuery不要の高機能スライダーSwiperの使い方をデモ付きで紹介しようと思います。 SwiperはIMG画像ファイルだけでな...
jQuery [JS]aタグからリンクを無効にする
aタグからリンクを無効にする
Javascript・jQuery [JS]テキストを縦書きにできるJavascript「h2vR.js」の使い方
テキストを縦書きにできるJavascripth2vR.jsのご紹介です。 ファイルも軽量でjQuery不要で使えますし、ちょっと縦書きにして表示したいテキストにピンポイントでクラスを付与するだけなので、CSSでも縦書きの指定ができますが個人...
Javascriptスニペット [JS]特定の要素の<a>タグを除外してスムーススクロールをする方法
jQueryのスムーススクロールを使うことはよくあるのではないかと思いますが、今回は指定したクラスの<a>タグをスムーススクロールから除外する方法を紹介させていただきます。 特定の要素の<a>タグを除外してスムーススクロール まずはスムース...
jQueryプラグイン・ライブラリ [JS]シンプルなフルスクリーンメニューのjQueryプラグインjQuery fatNav
ハンバーガーメニューをクリックして、フルスクリーンでナビゲーションメニューを表示できるjQueryプラグインjQuery fatNavのご紹介です。 jQuery fatNav のダウンロード 以下のページからjQuery fatNavのフ...
Javascript・jQuery [JS]AjaxZip3をGoogle Code版からGithub版へ移行する手順（2016年1月までに要移行）
以前に郵便番号から住所を自動入力できるjavascript「ajaxzip3」の記事でも紹介させていただいたAjaxZip3ですが、2016年1月に「Google Code」が閉鎖される影響により、Google Code 版からGithub...
jQueryプラグイン・ライブラリ [jQuerys]フォームの入力値を数字や整数のみに制御できるプラグインjQuery Plugin – Numeric
メールフォームなどテキストボックスへ文字を入力する際に、半角数字のみに制限してくれるjQueryプラグインjQuery Plugin – Numericのご紹介です。 jQuery Plugin – Numeric のダウンロード 以下のペ...
Javascriptスニペット [JS]一定量スクロールしてから「ページの先頭へ」ボタンを表示する方法
jQueryでページをスクロールしたら「ページの先頭へ」のリンクを表示/非表示する方法のご紹介です。 「ページへ先頭へ」リンクは、ページを開いた時には表示されませんが、少しスクロールする（今回の例ではページ上部から100px）とフェードイン...
jQueryプラグイン・ライブラリ [JS]テキストをクリップボードにコピーさせることができるプラグイン「clipboard.js」
ソースコードやテキストをクリップボードにコピーしてもらうのに便利なjQueryプラグインclipboard.jsのご紹介です。 clipboard.js ファイルのダウンロード 以下のページからclipboard.js-masterのファイ...
Javascriptスニペット [JS]jQueryでフォームへテキストのペーストを禁止する方法
<input type="text">などのフォームへテキストをペーストさせないようにjQueryで制御する方法のご紹介です。 フォームのサンプル HTML側のフォーム部分は以下のようにします。 formタグのクラスにnotpastを指定し...
jQueryプラグイン・ライブラリ [JS]アニメーションの種類も豊富なローディング用プラグインfakeLoader.js
ページ読み込み時のローディングを簡単に実装できるjQueryプラグインfakeLoader.jsのご紹介です。 fakeLoader.jsにはローディングのアニメーションが最初から7種類用意されており、またローディング画面の表示時間や背景色...
jQueryプラグイン・ライブラリ [JS]メールの二重送信を防止するjQueryプラグインjQuerty Form disable on submit
フォームで送信ボタンがダブルクリックされ、メールが二重送信されてしまうことを防ぐためのjQueryプラグイン「jQuery Form disable on submitのご紹介です。 ※jQueryを使うため、サーバーサイドではなくクライア...
CSS [JS]Google Maps APIの地図をレスポンシブ対応する方法
Google Maps APIの地図をレスポンシブWEBデザイン対応にする方法のご紹介です。 PCでブラウザを伸縮しても、スマートフォン端末を縦横に回転しても、Google Maps のピンを常に中央に表示させることができます。 Javas...
Javascriptスニペット [JS]背景画像にスライドやフェードの動きを付与できるプラグインjQuery.BgSwitcher
複数の背景画像をスライドで横に動かしたり、フェードイン、フェードアウトで切り替えたりすることができるjQueryプラグインjQuery.BgSwitcherのご紹介です。 jQuery.BgSwitcher ファイルのダウンロード 以下のペ...
Javascriptスニペット [JS]jQueryでローディング画面を実装する方法
ページを読み込む際に、jQueryでローディング画面を実装する方法のご紹介です。 jQueryとCSSでローディング 今回は以下のようなCSSとHTMLを用意しました。 CSS .loaderの要素のtopとleftの値（ローディング画像の...
jQueryプラグイン・ライブラリ [jQuery]ブラウザに合わせて背景画像を拡大縮小表示できるプラグインmaxImage
ブラウザのサイズに合わせて背景画像を伸縮できるjQueryプラグイン「maxImage」のご紹介です。 1枚の背景画像を置く以外にも、複数枚の画像をフェードイン・フェードアウトで切り替え表示させることもできますので、非常に便利なプラグインで...
Javascriptスニペット [JS]jQueryのアラートで「OK」ボタンクリック時に指定のページへ遷移させる方法
以前にJavaScriptによる確認アラートの表示方法 で紹介させていただいた記事の関連になりますが、 今度はjQueryでフォームなどで「入力内容を確認する」ボタンをクリックした際に、アラートを立ち上げて「OK」ボタンか「キャンセル」ボタ...
jQueryプラグイン・ライブラリ [JS]特定の要素にブラー効果（ぼかし）を与えるjQueryプラグインFoggy
スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、 特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグインFoggyのご紹介です。 Foggy のダウンロード 以下のページより...
jQueryプラグイン・ライブラリ [JS]高さの異なるコンテンツでもブロックレベル要素で揃えるjquery.heightLine.js
レスポンシブWEBデザイン対応で、コンテンツの中身が変わっても、ブロックレベル要素の高さを揃えることができるjQueryプラグインjquery.heightLine.jsのご紹介です。 jquery.heightLine.js のダウンロー...
Javascriptスニペット [JS]jQueryで複数の要素に同じ処理をする方法
セレクタで複数の要素を指定するには、HTML要素やID、クラス属性などをカンマ（,）でつなぎます。 jQueryで複数の要素に同じ処理を当てる例 複数のID、クラス属性に同じ処理を当てる例
Javascriptスニペット [JS]jQueryによる全角・半角文字列の変換について
以前にjQueryでreplace()を使って特定の文字列を置換する方法で紹介させていただいた記事の関連になりますが、フォーム周りでもよく利用される「jQueryによる全角と半角の置換」についてのメモです。 div要素の半角文字列を全角に変...
Javascriptスニペット [JS]videoタグの埋め込み動画をColorboxを使って再生する方法
前回のvideo タグでmp4 動画をサイトに埋め込むの方法で、videoタグでmp4動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorboxのインラインで表示（再生）させるカスタマイズのご紹介です。 Colo...