jQueryプラグイン・ライブラリ [jQuery]マウスオーバーでカラー画像を白黒にできるプラグインjQuery.BlackAndWhite
カラーの画像をマウスオーバーで白黒に切り替えることができるjQueryプラグインjQuery.BlackAndWhiteについて、設置方法と簡単なデモをご紹介します。 jQuery.BlackAndWhite のダウンロード 以下のページよ...
Javascript・jQuery
jQueryプラグイン・ライブラリ 
Javascript・jQuery [Javascript]IE8でもvideoタグが使えるライブラリhtml5media.js
videoタグでmp4動画をサイトに埋め込む方法の記事でも紹介させていただきましたが、 videoタグによる動画の埋め込みはWindowsのIE8だと非対応なので、今回はhtml5media.jsというJavascriptライブラリを使って...
Javascriptスニペット [JS]JavaScriptによる確認アラートの表示方法
メールフォームなどのページで、「入力内容を確認する」ボタンをクリックしたらアラートを立ち上げて、「OK」か「キャンセル」ボタンをクリックさせる方法のご紹介です。 ※今回はjavascript によるアラートウィンドウの表示方法ですが、jQu...
Javascriptスニペット [JS]replace()を使って複数組の文字列を置換する方法
以前にjQueryでreplace()を使って特定の文字列を置換する方法 で紹介させていただいた記事の追記です。 今回は、同じ要素内で複数のテキストを変換したい場合の処理に加え、指定のテキストにタグやクラスを付与して、CSSで（強引に）デザ...
jQueryプラグイン・ライブラリ [JS]Bxsliderでクリックではなくhover（マウスオーバー）で画像をスライドさせる方法
レスポンシブWEBデザイン対応で、カルーセルやサムネイルページャー（サムネイル付きスライド）などが可能な高機能スライドプラグインBxsliderですが、 サムネイルやページングのリンクを「クリック（click）」するのではなく、「マウスオー...
CSS [JS]jQueryとCSSで画像をトリミングしてセンタリング表示する方法
jQueryとCSSで画像をトリミングしてセンタリング表示する方法のご紹介です。 横＊高さ180pxの正方形で画像をトリミング 横長（長方形）の画像をjQueryとCSSで横*高さ180pxの正方形にトリミングして表示するサンプルです。 j...
Javascriptスニペット [JS]ウィンドウの高さを取得して要素の高さを100%にする方法
jQueryでウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。 ウィンドウの高さを取得して高さを調整 今回は例として#container という要素の高さを100%にしてみます。 <head>タグ内で、jq...
Javascriptスニペット [jQuery]フォームの入力選択情報をリセットするボタンの作り方
テキストフィールドに入力した文字や、プルダウンメニュー（select）で選択した項目などを、ボタン1クリックでリセットして初期状態に戻す方法のご紹介です。 jQueryを使って実装できますので、企業サイトのお問い合わせメールフォームでも使え...
jQueryプラグイン・ライブラリ [JS]jQueryで高さの異なる要素を最大値で揃える方法
floatで横並びにした要素の高さを最大値で揃えるためには、以前に紹介させていただいたCSS を使う方法以外に、jQueryでも対応することが可能ですので紹介させていただきます。 jQueryで高さの異なる要素を最大値で揃える 今回、flo...
jQueryプラグイン・ライブラリ [jQuery]文字量に応じてテキストエリアが自動でリサイズするプラグインjQuery Autosize
フォームのテキストエリアtextareaの高さを、テキスト量に応じて可変にできるjQueryプラグインjQuery Autosizeのご紹介です。 テキストエリアに文字をどんどん打って行くと、文字量に応じてテキストが下へ下へと広がって行きま...
jQueryプラグイン・ライブラリ [JS]Lightboxのように画像を拡大表示してスワイプ操作でスライドできるjQueryプラグインSwipebox
スマホやiPadなどのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightboxのような画像の見せ方を実装したい場合に便利なプラグインSwipeboxのご紹介です。 Swipeboxは単体画像をLightbox ...
Javascript・jQuery [jQuery]マウスの右クリックを禁止する方法
jQueryでマウスの右クリック動作を無効化する方法のご紹介です。 body要素全体にマウスの右クリック禁止を適用 <head>内にjqueryファイルと一緒に以下の記述を追加します。 特定の要素でマウスの右クリック禁止を適用 以下のように...
Javascriptスニペット [JS]placeholderのテキストにアニメーション効果を追加できるスクリプトPlaceholdem
<input type=text>や<extarea>でplaceholderのテキストにアニメーション効果を追加できるPlaceholdemのご紹介です。 jQuery不要で簡単に使うことができますので、企業向けのお問い合わせフォームなど...
jQueryプラグイン・ライブラリ [jQuery]複数並んだブロック要素の高さを最大値で揃えるプラグインjQueryAutoHeight
floatなどで横に並べたブロック要素の高さを揃えることができるjQueryプラグインjQueryAutoHeightのご紹介です。 jQueryAutoHeightは、複数並んだブロック要素を高さの最大値で揃えて表示できるだけでなく、ブロ...
Javascriptスニペット [jQuery]attrを使って指定した要素にクラスなどの属性を追加する方法
jQueryのattrメソッドを利用して、imgタグやul、liタグにクラスやIDなどの属性を付与する方法のまとめです。 要素に属性を付与する まず最初に、imgタグに「class=thumb」を付与する方法です。 要素に複数の属性を付与す...
jQueryプラグイン・ライブラリ [jQuery]SWFやWMPなどの動画ファイルもLightbox風に表示できるプラグインShadowbox
画像をLightbox風に表示させるプラグインの中でも、個人的に最近お気に入りなのが今回紹介させていただくShadowboxです。 Shadowboxは、画像単体のオーバレイ表示や複数画像のスライド表示ができるだけでなく、インラインコンテン...
jQueryプラグイン・ライブラリ [JS]jQueryのanimateによるアニメーションのサンプルまとめ
jQueryのanimateを使うことで、要素を横に動かしたり縦に動かしたりとアニメーションさせることができます。 また、jQuery Easing Pluginと併用することで、エフェクト付きの面白いアニメーションも実装することができます...
CSSプロパティ [jQuery]IE7、8でもbackground-size:containが利用できるプラグインjquery.backgroundSize
IE7、IE8のブラウザでもCSS3のbackground-size:containとbackground-size:coverを使用するためのjQuery プラグインがjquery.backgroundSizeです。 そこまでしてIE対応...
Javascript・jQuery [jQuery]fadeIn()でページ読込み時にフェードインで要素を表示する
サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。 jQueryのfadeIn()を使うだけの簡単な処理ですし、フェードインの微調整（時間調整）次第で効果的な演出も可能になるかと思います。 fadeIn(...
jQueryプラグイン・ライブラリ [JS]レスポンシブ対応で画像や動画をLightbox風に表示できるMagnific Popup
レスポンシブWEBデザイン対応のLightbox系プラグインMagnific Popupのご紹介です。 Magnific Popup>はIE 7、8にも対応していて、画像や動画、Modalやメールフォーム、Ajax Popupなどオーバーレ...
jQueryプラグイン・ライブラリ [jQuery]背景いっぱいの画像を表示できるプラグインjQuery Fullscreenr
<img>タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQueryプラグインがjQuery Fullscreenrです。 以前紹介したプラグインjQuery Backstretch とほぼ同じコトが出来ますが、jQuery ...
Javascript・jQuery [JS]jQueryでreplace() を使って特定の文字列を置換する方法
ページ内の文字列を削除、置換したい場合に、jQueryでreplace()を使えば便利です。 要素を指定すれば特定の箇所のテキストを削除、もしくは別の文字列に変換、なんてことも出来ますし、カスタマイズ次第では「ブラウザの幅が320px以下で...
jQueryプラグイン・ライブラリ [jQuery]背景全体に画像を固定させランダム表示もできるプラグインjQuery Backstretch
ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQueryプラグインjQuery Backstretch。 1枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎...
WordPress WordPressに同梱されたjQueryを使う場合とCDN を利用する場合の処理のまとめ
WordPressにはjquery本体が同梱されていて、header.phpに<?php wp_head(); ?>を書けばjqueryファイルが呼び出されます。 ただ、「最新版のjQueryを使いたい！」なんて場合に同梱のjqueryファ...
jQueryプラグイン・ライブラリ [jQuery]スマホアプリのように左右からメニューをスライド表示できるプラグインmmenu
スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグインmmenuのご紹介です。 オプションで色々カスタマイズができますが、まずは今回はmmenuの基本的な設置方法から使い方までをご紹介し...