• RSS
[JS]文字量に応じてテキストエリアが自動でリサイズするjQueryプラグイン「jQuery Autosize」

フォームのテキストエリアtextarea の高さを、テキスト量に応じて可変にできるjQuery プラグイン「jQuery Autosize」のご紹介です。

テキストエリアに文字をどんどん打って行くと、文字量に応じてテキストが下へ下へと広がって行きますので、特にスマートフォンサイトのような限られた表示領域でテキストエリアを使う場には必須のプラグインではないかと思います。
続きを読む

[JS]Lightbox のように画像を拡大表示して、スワイプ操作でスライドできるjQuery プラグイン「Swipebox」

スマホやiPad などのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightbox のような画像の見せ方を実装したい場合に便利なプラグイン「Swipebox」のご紹介です。

Swipebox は単体画像をLightbox 風に表示できるのはもちろん、複数枚の画像の切り替え表示をスワイプ操作で出来る点が秀逸です。
続きを読む

[JS]jQuery でマウスの右クリックを禁止する方法

jQuery でマウスの右クリック動作を無効化する方法のご紹介です。
続きを読む

[JS]placeholderのテキストにアニメーション効果を追加できるスクリプト「Placeholdem」

input type=text やtextarea で、placeholder のテキストにアニメーション効果を追加できる「Placeholdem」のご紹介です。

jQuery 不要で簡単に設置することができますので、企業向けのお問い合わせフォームなどにも使えるのではないかと思います。
続きを読む

[JS]複数並んだブロック要素の高さを最大値で揃えるjQuery プラグイン「jQueryAutoHeight」

float などで横に並べたブロック要素の高さを揃えることができるjQuery プラグイン「jQueryAutoHeight」のご紹介です。

jQueryAutoHeight は、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロック要素を横に何個並べるか?というカラムの指定もできますので、レイアウトの自由度も高くて非常に便利なプラグインです。
続きを読む

[jQuery]attr を使って指定した要素にクラスなどの属性を追加する方法

jQuery の attr メソッドを利用して、img タグやul、li タグにクラスやID などの属性を付与する方法のまとめです。
続きを読む

[JS]SWF や WMP などの動画ファイルもLightbox 風に表示できるjQueryプラグイン「Shadowbox」

画像をLightbox 風に表示させるプラグインの中でも、個人的に最近お気に入りなのが今回紹介させていただくShadowbox です。

Shadowbox は、画像単体のオーバレイ表示や複数画像のスライド表示ができるだけでなく、インラインコンテンツやWMP、SWF、FLV、QuickTime などの動画ファイル、Flashにも対応しているという、かなり高機能なプラグインです。

しかもレスポンシブWEBデザイン対応なので、今や必要不可欠とも言えるスマートフォンやiPad 向けのサイトにも使えます。
続きを読む

[JS]jQuery の animate によるアニメーションのサンプルまとめ

jQuery の animate を使うことで、要素を横に動かしたり縦に動かしたりとアニメーションさせることができます。

また、jQuery Easing Plugin と併用することで、エフェクト付きの面白いアニメーションも実装することができますので、サイトの見せ方にひと工夫加えたい場合などには効果的だと思います。
続きを読む

[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」

IE7、IE8 のブラウザでもCSS3 の background-size:containbackground-size:cover を使用するためのjQuery プラグインが jquery.backgroundSize です。

そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む

[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する

サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。

jQuery の fadeIn() を使うだけの簡単な処理ですし、フェードインの微調整(時間調整)次第で効果的な演出も可能になるかと思います。
続きを読む

[JS]レスポンシブWEB対応で、画像や動画をLightbox 風に表示できる「Magnific Popup」

レスポンシブWEBデザイン対応のLightbox 系プラグイン Magnific Popup のご紹介です。

Magnific Popup はIE 7、8 にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popup などオーバーレイで表示できるコンテンツもかなり豊富ですが、

なんと言っても「レスポンシブWEBデザイン」対応で、ブラウザ伸縮の表示及び、スマホやiPad での閲覧時でも最適なサイズで画像を拡大表示してくれるので、使い勝手の良いプラグインだと思います。
続きを読む

[JS]背景いっぱいの画像を表示できるjQuery プラグイン「jQuery Fullscreenr」

<img> タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQuery プラグインが jQuery Fullscreenr です。

以前紹介したプラグイン jQuery Backstretch とほぼ同じコトが出来ますが、jQuery Fullscreenr はCSS の background-image ではなく <img> タグに画像を指定するタイプになりますので扱い方が異なります。

また jQuery Backstretch 同様、カスタマイズ次第では複数枚の画像の中からランダムで1 枚の画像を表示させることも可能ですので、今回は jQuery Fullscreenr の基本的な使い方から画像のランダム出力方法まで紹介致します。
続きを読む

[JS]jQueryで replace() を使って特定の文字列を置換する方法

ページ内の文字列を削除、置換したい場合に、jQueryで replace() を使えば便利です。

要素を指定すれば特定の箇所のテキストを削除、もしくは別の文字列に変換、なんてことも出来ますし、カスタマイズ次第では「ブラウザの幅が320px 以下でのアクセス時には 特定の要素を削除する」という具合に色々な場面で利用できると思います。
続きを読む

[JS]背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」

ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQuery プラグイン jQuery Backstretch

1 枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。
続きを読む