• RSS
[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 で対応することが可能ですので紹介させていただきます。
続きを読む

[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 の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む