Javascript・jQuery の記事一覧
![[JS]IE下位バージョンでも透過画像を使えるようにするjQueryプラグイン「jquery.belatedPNG」](https://www.webantena.net/wp-content/uploads/2012/12/belatedpng.png)
以前にも紹介させていただいた DD_belatedPNG_0.0.8a.js ですが、
IE6、IE7 には対応していますがIE8 では動いてくれない…
ですので、がっつりIE下位バージョンに対応させようとなると、今回紹介させていただくjQueryベースのスクリプト jquery.belatedPNG.js を利用します。
続きを読む
Lightboxの ように画像をオーバーレイで拡大表示できるjQuery プラグイン Fancybox。
この手のプラグインは他にも色々ありますが、Fancybox の魅力は画像以外にもYoutube 動画もLightbox風に表示できるという「汎用性の高さ」と、画像拡大時のエフェクトを調整できたり、サムネイル付きのイメージギャラリーができるなどの「カスタマイズのしやすさ」かなと思います。
続きを読む
![[JS]IE6 でも :hover 疑似クラスが使えるなど、IE の HTML/CSS 表示を調整するライブラリ「IE7.js」](https://www.webantena.net/wp-content/uploads/2013/02/ie.png)
IE6 でも :hover や :first-child の一部擬似クラスを使えたり、透過PNGの画像が使えるなど、ちょっと便利かも知れないライブラリ「IE7.js」。
今回は IE7.js の設置方法から、IE7.js を使って何か出来るのか？を簡単にまとめました。
続きを読む
![[JS]IE6でも滑らかなロールオーバーを実現させるには「smoothRollOver.js」が便利](https://www.webantena.net/wp-content/uploads/2012/11/smoothrollover.png)
リンク画像にマウスを乗せると滑らかなロールオーバーを実現させることができるjavascript が smoothRollOver です。
ロールオーバー前と後の2種類の画像を用意して、smoothRollOver のファイルを<head> 内に読み込ませるだけで動きますし、IE6 にも対応しているので嬉しいです。
続きを読む
![[JS]手軽にブログの関連記事を表示できるjavascript「LinkWithin」](https://www.webantena.net/wp-content/uploads/2013/01/linkwithin.png)
ブログの関連記事を自動で取得してサムネイルとタイトル付きで表示してくれる LinkWithin。
LinkWithin のサイトでメールアドレスやブログURLなどを登録するだけでjavascriptのタグ（ソースコード）が発行されますので、それを自分のブログの関連記事を表示したい場所に貼付けるだけで動きます。
続きを読む
![[JS]Flashを埋め込む際の便利なJavascript「SWFObject」](https://www.webantena.net/wp-content/uploads/2012/11/flash.jpg)
サイトにSWFファイル（Flash）を埋め込む際の便利なJavascriptが「SWFObject」です。
設置が簡単な点はもちろんですが、Flash に対応していない環境（iPad とか iPhone とか）向けに、画像やテキストで代替表示できる点も、未だにSWFObject が手放せない要因です。
続きを読む
![[JS]レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」](https://www.webantena.net/wp-content/uploads/2012/10/bxslider.png)
jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。
また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。
続きを読む
![[JS]イメージマップでロールオーバー時の画像を変更する方法](https://www.webantena.net/wp-content/uploads/2012/10/imagemap.png)
<img> <map> <area> によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい！」という要望に応えるカスタマイズです。
Javascript を利用すれば、ロールオーバー時の画像を変更することが可能です。
続きを読む
![[JS]javascriptでユーザーエージェントを判定して、ブラウザ毎に振分処理を行う方法](https://www.webantena.net/wp-content/uploads/2012/10/useragentjudgmentjs.png)
個人的には、ブラウザ判定を行う場合はPHPで行うことが多いのですが、PHPが使えない（.htmlファイルなど）場合にjavascript でユーザーエージェントを調べて、ブラウザ別に処理を行う方法が使えます。
ブラウザ情報を返す処理だけでなく、IE6の時は body にie6 のクラスを振る、なんてこともできます。
続きを読む
![[JS]<table> をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」](https://www.webantena.net/wp-content/uploads/2012/10/footable.jpg)
ホームページやWEBサイトを作っていると、<table> を使った表組みというのはまだまだ健在です。
しかし、iPad やスマホでサイトを見る機会も増えたことで、今までのようなPCサイト向けに表示させていた <table> をレスポンシブWEBデザイン対応させることが多くなってきていると思います。
続きを読む
![[JS]jQuery でフッター要素をページ下部に固定する方法](https://www.webantena.net/wp-content/uploads/2012/09/footerbottomfixed.png)
フッター要素をページ下部に固定できるjavascriptr のライブラリ「footerFixed.js」です。
CSS でフッターを固定させる方法もありますが、こちらは固定させたい要素（フッター）に id="footer" を付ければ簡単に固定されますので便利です。
続きを読む
![[JS]画像をオーバーレイ表示できる「Lightbox」の新バージョン2.5 の使い方](https://www.webantena.net/wp-content/uploads/2012/09/lightbox25.png)
![[JS]jQuery を利用して、現在のページのメニューデザインを変更する方法](https://www.webantena.net/wp-content/uploads/2012/09/currentmenu.png)
jQuery を利用して、特定の要素にクラスを付けたり外したりする処理です。
例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ（カレントページ）であるメニューのデザインを変更して、「今このページにいます」という見せ方ができるようになります。
続きを読む
![[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」](https://www.webantena.net/wp-content/uploads/2013/04/jquerypageslide.png)
スマホアプリで「ボタンをタッチして画面の左や右からメニューがスライド表示される」みたいない動きをよく見ます。
ブラウザの見えない所からダイナミックにコンテンツをスライド表示させる動きを、PCサイトでも実装可能にしてくれるjQueryプラグインが「PageSlide」です。
続きを読む
