• RSS
[JS]特定の要素にブラー効果(ぼかし)を与えるjQueryプラグイン「Foggy」

スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、

特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグイン「Foggy」のご紹介です。
続きを読む

[JS]高さの異なるコンテンツでもブロックレベル要素で揃える「jquery.heightLine.js」

レスポンシブWEBデザイン対応で、コンテンツの中身が変わっても、ブロックレベル要素の高さを揃えることができるjQueryプラグイン「jquery.heightLine.js」のご紹介です。
続きを読む

[JS]jQuery で複数の要素に同じ処理をする方法

セレクタで複数の要素を指定するには、HTML要素やID、クラス属性などをカンマ(,)でつなぎます。
続きを読む

[JS]jQuery による全角・半角文字列の変換について

以前に jQueryで replace() を使って特定の文字列を置換する方法 で紹介させていただいた記事の関連になりますが、フォーム周りでもよく利用される「jQueryによる全角と半角の置換」についてのメモです。
続きを読む

[JS]video タグの埋め込み動画をColorbox を使って再生する方法

前回の video タグでmp4 動画をサイトに埋め込む の方法で、video タグでmp4 動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorbox のインラインで表示(再生)させるカスタマイズのご紹介です。
続きを読む

[JS]マウスオーバーでカラー画像を白黒にできるjQueryプラグイン「jQuery.BlackAndWhite」

カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグイン「jQuery.BlackAndWhite」について、設置方法と簡単なデモをご紹介します。
続きを読む

[JS]IE8 でもvideo タグが使えるJSライブラリ「html5media.js」

video タグでmp4 動画をサイトに埋め込む方法 の記事でも紹介させていただきましたが、

video タグによる動画の埋め込みはWindows のIE8 だと非対応なので、今回は html5media.js というJavascript ライブラリを使ってIE6〜8 のブラウザでもvideo タグに対応させる方法を紹介させていただきます。
続きを読む

[JS]JavaScript による確認アラートの表示方法

メールフォームなどのページで、「入力内容を確認する」ボタンをクリックしたらアラートを立ち上げて、「OK」か「キャンセル」ボタンをクリックさせる方法のご紹介です。
続きを読む

[JS]replace() を使って複数組の文字列を置換する方法

以前に jQueryで replace() を使って特定の文字列を置換する方法 で紹介させていただいた記事の追記です。

今回は、同じ要素内で複数のテキストを変換したい場合の処理に加え、指定のテキストにタグやクラスを付与して、CSS で(強引に)デザイン変更させる方法も合わせて紹介させていただきます。
続きを読む

[JS]Bxslider でマウスオーバーで画像をスライドさせる方法

レスポンシブWEBデザイン対応で、カルーセルやサムネイルページャー(サムネイル付きスライド)などが可能な高機能スライドプラグイン「Bxslider」ですが、

サムネイルやページングのリンクを「クリック(click)」するのではなく、「マウスオーバー(hover)」で画像をスライドさせるというカスタマイズが必要になったので、今回はその方法をまとめました。
続きを読む

[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法

jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。
続きを読む

[JS]ウィンドウの高さを取得して要素の高さを100%にする方法

jQuery でウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。
続きを読む

[JS]jQuery でフォームの入力選択情報をリセットするボタンの作り方

テキストフィールドに入力した文字や、プルダウンメニュー(select)で選択した項目などを、ボタン1クリックでリセットして初期状態に戻す方法のご紹介です。

jQuery を使って実装できますので、企業サイトのお問い合わせメールフォームでも使えると思います。
続きを読む

[JS]jQuery で高さの異なる要素を最大値で揃える方法

float に横並びにした要素の高さを最大値で揃えるためには、以前に紹介させていただいたCSS を使う方法 以外にも、jQuery で対応することが可能ですので紹介させていただきます。
続きを読む