CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
73

Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。

とっても当たり前なんですけど、Webサイトは基本的にHTMLで書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。

私は Javascript が苦手で、jQuery もどちらかというと苦手です …。なので、過去記事：クライアントワークでよくお世話になっているjQueryプラグインいろいろ で紹介したようなプラグインをよく使います。でもプラグインを使うにしても、少しくらいは jQuery について知らなければ、カスタマイズしたりできないし、Web制作をしていると、どうしても自分でコードを書かなくてはならない事はたくさんあります。

jQuery についてよく質問をいただくので、私の知っている範囲でまとめてみました。HTML と CSS は分かるけど、jQuery っていまいちよく分からない … という人向けの記事です。

Webデザイナーさん向けの jQuery 目次

  1. jQuery って何？
  2. jQuery を使うには？
  3. CSSと似ている jQuery の書き方
  4. いろんなセレクタの書き方
  5. いろんな jQuery のメソッド
    1. CSS、Attributes（属性）のメソッド
    2. 補足：jQuery CSS メソッドの書き方
    3. メソッドチェーン
    4. Effects エフェクト系のメソッド
    5. Travaersing トラバース系のメソッド
    6. HTML、DOM … Manipulation（マニュピレーション）系のメソッド
  6. Events（イベント）系のメソッド
  7. $(document).ready(function(){ …
  8. $() と jQuery() は同じ
  9. サンプル：背景画像をアニメーションにする
  10. サンプル：ボックスを丸ごとリンクにして、画像もついでにバブルアップ
  11. サンプル：スクロールすると現れる、TOP へ戻る
  12. エラーの原因は HTML にあることも …

1. jQuery って何？

まず、そもそも jQuery とは何でしょう？jQuery は Javascript のライブラリのひとつです。ではライブラリとは何でしょう？

ライブラリとは、あるスクリプトのよく使われる機能などを部品化して、簡単に使えるようにまとめたもの。Javascript のライブラリである jQuery を使えば、複雑になりがちな Javascript のコードを書かかなくても、もっと簡単なコードで Javascript を実行することができるようになります！

例えば、CSS で warning というクラスをつけた <p> タグ。その中のテキストカラーを赤くしたいとします。もちろん CSS で書けばいいんですけど、ここはガマンして読んでみてくださいね … Javascript の記事なので w 純粋なというか、ネイティブな Javascript でコードを書くと、以下のようになると思います。

Javascript

<script type="text/javascript">
var targets = document.getElementsByTagName("p");
for(var i=0; targets.length; i++){
  if(targets[i].className === "warning"){
    target.style.color = "red";
  }
}
</script>

上記のコードでは、まず、HTML内に記述されている<p>タグを、document.getElementsByTagName(“p”) で取得して、見つかった<p>タグの数だけ for 文でループ、その後 if 文でクラス名が warning の時だけ、カラーを red に …。結構めんどくさいです X(
（最近では getElementsByClassName って使えるのかな？）

でも jQuery を使うと、上記のような事がたった1行でできてしまいます！

Javascript

$("p.warning").css( "color", "red" ); /* この1行だけ！ */

jQuery を使えば、複雑な Javascript のコードを書かなくても、簡単なコードで同じ事ができてしまうんです。イメージでいうと以下のような感じですね。

jQueryのイメージ

jQueryは通訳のようなイメージ

jQuery は、Javascript とコードを書く人の間に立って、通訳してくれる感じでしょうか（あくまでもイメージです）。もちろん jQuery でコードを書く上でも、Javascript の知識は必要になりますが、コーディングの部分で随分楽ができますね！

↑ Webデザイナーさん向けの jQuery 目次へ

2. jQuery を使うには？

それでは実際に jQuery を使うにはどうしたらいいでしょう？jQuery はオープンソースのライブラリ。jQuery のサイトからダウンロードすれば、誰でも簡単に利用する事ができます。ライセンスは MIT と GPL のデュアルライセンスなので、クライアントワークなどにももちろん利用できます。

また jQuery には、圧縮版の Minified と、非圧縮版の Uncompressed があって、一般的には読み込みの早い圧縮版を使います。圧縮版は改行などが排除されていて、ファイル名が jquery-1.6.4.min.js のように min がついてるのがそうです。数字はバージョンを表しています。

ダウンロードしたら、下記のように <head> 内などで jQuery を読み込むだけで使えるようになります！

HTML

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
↑ Webデザイナーさん向けの jQuery 目次へ

2.1. CDN を利用する方法も

また、ダウンロードしなくても CDN（Contents Delivery Network）、コンテンツデリバリーネットワークを使う方法もあります。jQuery は以下の CDN で配信されているので、リンクを貼るだけで利用することができます。嬉しいですねー！

Google CDN と Microsoft CDN は SSL（https://）にも対応しています。jQuery CDN へのリンクは、バージョン 1.6.4 のものです。

CDN 利用時の一例（Google CDN の場合）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

上記の例は、Google CDN で、バージョン 1.6.4 の圧縮版を使った例です。

↑ Webデザイナーさん向けの jQuery 目次へ

3. CSSと似ている jQuery の書き方

それでは実際に、jQuery のコードを見てみます。下記のコードは先ほど紹介した、1行のコードと基本的には同じです。

jQuery

$("p").css( "color", "red" );

では、コードを分解して見てみましょう！まず (“p”) の部分は、要素を指定するところ。上記のコードでは、HTML 上の全ての <p>タグが対象となります。CSS でも要素を指定して装飾していきますよね。そんな感覚で、まずは対象の要素を指定します。CSS のセレクタと感覚は同じです！

それに続く .css(“color”, “red”) の部分では、先ほど指定した要素に対して、何らかの処理を加える部分です。メソッド（と引数）と呼ばれています。要素に対して、何かの処理を加える。この書き方は、CSS と似ていますよね！

なので CSS を書くのに慣れている Webデザイナーさんなら、ちょっと親しみやすいんじゃないかなーと思います。

3.1. jQuery の基本的な書き方

jQuery の基本的な書き方

  • $(“p”).css( “color”, “red” );
  • $(“セレクタ”) . メソッド(パラメータ);

jQuery の基本的な書き方は、セレクタを指定して、メソッドをドット（.）でつなげます。メソッドにはパラメータ（引数）を記述する事もあります。これが jQuery のコードの書き方の基本形です。上記のコードでは、セレクタに <p> タグを使いましたが、セレクタで指定できる書き方は、CSS で馴染みのあるものばかりです！

↑ Webデザイナーさん向けの jQuery 目次へ

4. いろんなセレクタの書き方

前述した通り、jQuery で指定できるセレクタは、CSS のセレクタで馴染みのあるものばかりです。jQuery には CSS のセレクタエンジンがついてるので、当然と言えば当然ですけど … Javascript が苦手な私にとっては、とっても嬉しい仕様です。

セレクタの例

  • $(“#navi”) … idセレクタ
  • $(“.navi”) … クラスセレクタ
  • $(“a img”) … 子孫セレクタ
  • $(“p.warnig, p.attention”) … グループセレクタ

みんな CSS で馴染みのあるものばかりですねー。これならそんなに難しくなさそうです。標準の Javascript では、getElementsByTagName や、getElementById で取得していたセレクタも、上記のように簡単に指定することができます。

他にも CSS で利用しているセレクタがたくさん使えます。IE6では使用できなかった、隣接セレクタや属性セレクタも、jQuery では利用できるんです。

セレクタの例

  • $(“ul>li”) … チャイルドセレクタ
  • $(“ul+li”) … 隣接セレクタ
  • $(“h3~h3″) … 間接セレクタ
  • $(“a[target='_blank']“) … 属性セレクタ
↑ Webデザイナーさん向けの jQuery 目次へ

4.1. フィルタ

ざーっとセレクタを見てきましたけど、要素をさらに簡単に指定する為の、フィルタという仕組みも jQuery では用意されています。便利ですねー。

フィルタの例

  • $(“li:first”) … 一番始めの要素
    （この場合は <li> タグが複数、たくさんある … と仮定しています。）
  • $(“li:last”) … 一番最後の要素
  • $(“li:even”) … 偶数番目の要素
  • $(“li:odd”) … 奇数番目の要素

一番最初のリストだけボーダートップをなくすとか、奇数番目の li タグの背景色だけ変える … など、アイデア次第で CSS 的な使い方もできちゃいます。IE6でもOKなので、jQueryを使ってクロスブラウザ … という使いかもありなんですねー。もちろんフィルタはもっとたくさんありますので、下記リンクを参照してみてください！

↑ Webデザイナーさん向けの jQuery 目次へ

5. いろんな jQuery のメソッド

  • $(“p”).css( “color”, “red” );
  • $(“セレクタ”).メソッド(パラメータ)

今度は基本的な書き方の後半部分、メソッドの部分を見ていきます。上記のコード、.css の部分がメソッド、それに続く()内がパラメータ（引数）です。メソッドは、セレクタで指定した要素に対して、何らかの処理を加える部分でしたね！

また、パタメータは必ずしも必要 … というわけではありません。上記の例では css というメソッド（要素のスタイルシートを変更するメソッド）にパラメータを書き加えていますが、パラメータがなくてもOKのメソッドもあります。

このメソッドも jQuery ではたくさん用意されています。まずは CSS に慣れている人なら馴染みの深い、CSSメソッド、属性メソッドから見ていきます。

5.1. CSS、Attributes（属性）のメソッド

jQuery CSS、AttributesCSS、Attributes のメソッドは、CSS や属性を取得、変更することができるメソッドです。

そんなことをしなくても、CSS に直接記述すれば、jQuery を使わなくてもいいのでは？という声も聞こえてきますが、動的にに CSS のスタイルを変更することができれば、Webサイトをもっと魅力的にすることができるはず！

補足

Atteributes、属性っていうのは、CSSでいう所の以下のようなものでしたよね！

  • aタグの target 属性 <a target=”_blank” … とか
  • input タグの type 属性 <input type=”text” … とかのことです。

例えばクリックをきっかけ（イベントといいます … 後述しますね！）に、あるブロック要素の display プロパティを none から block に切り替えることができれば、ページを移動せずとも新しいコンテンツを表示させることができますよね！（タブによる切り替えみたいな …）

それでは CSS、Attributes のメソッドをいくつか見てみましょう。

CSS、Attributes メゾッドの例

  • css()
    $("#navi a").css("color");
    カラーを取得します。
  • css()
    $("#navi a").css("color", "red");
    カラーをセットします。上記は #navi 内にあるリンクの色を、赤にする … というコードですね！
  • css()
    $("#navi a").css({"color": "red", "text-decoration": "none" });
    さっきの例では color を変更しているだけでしたけど、もちろんスタイルは複数指定することができます。
    書き方が若干変わるので、あとで補足しますね。
  • width()
    $("a img").width();
    幅を取得します。
  • width()
    $("a img").width("150px");
    画像の幅に150px をセットしています。
  • addClass()
    $("#navi a").addClass("current");
    クラスを追加します。例では current というクラスをつけます。
  • attr()
    $("a").attr("target","_blank");
    アンカー（<a>タグ）にtarget属性を追加します。

こうやって見てみると、そんなに難しくない気がしませんか？CSS で馴染み深いものが多いので、すーっと頭に入ってきますね！もちろん他にもたくさんのメソッドがあるので、下記リンクなどを参照してください。

補足

また、最近 attr() メソッドに仕様変更がありました。詳しくは、Ginpen.com さんの記事が参考になると思います！

追記

Ginpen.com さんが、attr() メソッドと prop() メソッドについて、詳しく書いてくださいました！

↑ Webデザイナーさん向けの jQuery 目次へ

5.2. 補足：jQuery CSS メソッドの書き方

CSS のスタイルを指定する CSS メソッド … 手軽に CSS を変更できるので、使用頻度も高いかもですね。でも CSS の指定の仕方に、ちょっとクセ … というか、複数の書き方があるので補足しておきます。

CSS のプロパティーがひとつの場合

簡単な例で説明しますね！まずはプロパティーがひとつの場合。下記は<a> タグ、リンクの色を赤にするコードです。

  1. $("a").css("color","red");
  2. $("a").css({ color: "red" });
  3. $("a").css({ "color": "red" });

上記はどれを書いても、リンクの色が赤くなります。3つどれで書いても、ブラウザで表示される結果は同じですし、問題なく動きます。でも公式サイトのドキュメントを見ると、1番の書き方を推奨しているので、1番の書き方を覚えた方がいいのかなーと思っています。

$(“a”).css(“color”,”red”);
プロパティーと値（color と red）をダブルクォーテーション（“）、またはシングルクォーテーション（‘）で囲んで、カンマ（,）で区切ります。

CSS のプロパティーが複数ある場合

今度はプロパティーが複数ある場合を見てみます。下記はリンクの色を赤にして、テキストの下線をなくすコードです。

  1. $("a").css({ "color": "red", "text-decoration": "none" });
  2. $("a").css({ "color": "red", "textDecoration": "none" });
  3. $("a").css({ color: "red", textDecoration: "none" });

まず、複数指定する場合は、プロパティーと値はコロン（:）で分けます。CSS の書き方と同じですね！それをカンマ（,）で分けて、複数指定する事ができます。基本的に、ブレース（{}）で囲みます。

また、上記の例では、text-decoration プロパティーを使っていますが、その書き方も引用符で囲んであるものもあれば、ハイフン(-)を使わずに、キャメルスタイル（大文字を使う：ラクダのコブみたいにそこだけ出っ張るから、キャメルスタイルって呼んでます。）を使っているものもあります。

プロパティーを引用符で囲まない場合（3番目）は、キャメルスタイルでないと動きませんが、引用符で囲めばどちらでも動きます。書き方が数種類あるので、混乱してしまいますが、公式ページでは 1番の書き方をしているので、1番の書き方がいいのかなーと思ってます。

$(“a”).css({ “color”: “red”, “text-decoration”: “none” });
まずはブレース（{}）で囲み、プロパティー、値とも引用符で囲む。キャメルスタイルは使わないで、いつも通りの CSS の書き方をする。CSS でいつも書いてるものを、引用符で囲むだけですね！

こういう書き方は css メソッドに限った事ではないので、常に意識しておきたい感じですね！

↑ Webデザイナーさん向けの jQuery 目次へ

5.3. メソッドチェーン

ここでちょっと寄り道です。さっき css メソッドとか、attr メソッドとか出てきましたね！ jQuery のメソッドは、メソッドチェーン（くさり）といって、ドット（.）でつなげて、複数指定することができます。例えば同じ要素にふたつのメソッドを使いたいとき、別々に書かずに、一度に書く事ができるんです。

メソッドチェーンの一例

/* ふたつのメソッド */
$("a img").addClass("selected");
$("a img").width("150px");

/* メソッドチェーンで一度に書ける！ */
$("a img").addClass("selected").width("150px");

上記の例では、クラスを追加する addClass メソッドと、幅を指定（または取得）する width メソッドを、メソッドチェーンで一度に複数指定しています！

メソッドチェーンを使うと、要素を検索する処理が 1度で済むので、高速化に繋がりますし、何よりコードが見やすいですよね！

↑ Webデザイナーさん向けの jQuery 目次へ

5.4. Effects エフェクト系のメソッド

jQuery Effectsエフェクト系メソッドを使えば、コンテンツをフェードさせて表示させたり、スライドさせたり … HTML と CSS だけではなかなかできなかった動きをつける事ができますね！

Webデザインでは、とってもよく使われるメソッドのひとつです。スライダーやドロップダウンメニュー、アコーディオンなど、とにかくいろんなところでエフェクトは見かけますよねー。

エフェクトメソッドの例

  • toggle()
    $(".hidden").toggle();
    表示されてるものを隠したり、非表示のもを表示します。
  • fadeIn()
    $(".fade").fadeIn();
    フェードインさせて表示します。
  • fadeOut()
    $(".fade").fadeOut();
    フェードインの逆ですねー。フォードアウトさせて非表示にします。
  • show()
    $(".hidden").show();
    要素を表示します。
  • hide()
    $(".hidden").hide();
    これは逆に要素を隠します。
  • animate()
    $("img").animate({ "height" : "0px" });
    アニメーションしながら、高さを 0 にしています。

今回はメソッドにキャメルスタイルが使われているのもが出てきましたね。fadeIn、fadeOut など、Javascript ならではの書き方（Javascript では、よくキャメルスタイルが使われています。）にも慣れが必要ですねー。

もちろん上記以外にも、たくさんのエフェクト系メソッドがあります。詳しくは下記リンクなどを参照してくださいねー！

ちょっと先を急ぎます …。

↑ Webデザイナーさん向けの jQuery 目次へ

5.5. Traversing トラバース系のメソッド

jQuery Traversingトラバース系メソッドは、HTML の DOMツリー内から、指定条件に合うものを選択したり、検索するのに使います。ちょっと分かり難いですね …。

言葉だけだと難しいので、例を使って見てみましょう。例えば以下のような HTMLがあった場合、トラバース系のメソッドを使って、どういう事ができるのか見てみます。

HTML

<div id="header">
  <div id="logo">
  ロゴ
  </div><!-- /logo -->
  <div id="navi">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  </div><!-- /navi -->
</div><!-- /header -->

ヘッダー内にロゴとナビゲーションがある、簡単な HTML です。上記の HTML に対して、下記のようなコードを実行したとすると …

  • find()
    $("#navi").find("li");
    上記のHTML内、#navi 内のすべての li を返します。返す … っていう言い方が難しいかもしれませんが、指定するっていう感じですねー。
  • first()
    $("#navi li").first();
    #navi liの中の最初の li を返します。
  • last()
    $("#navi li").last();
    さっきと逆ですねー。#navi li の中の最後の li を返します。
  • next()
    $("#logo").next();
    #logo の次の要素、上記の例では <div id=”navi”> を返します。

必要な要素を検索して取得したりするのがトラバース系のメソッドです！他のメソッド、例えば CSS 系のメソッドと組み合わせて使う事が多いです。もちろん上記以外にも、たくさんのメソッドが用意されています！

↑ Webデザイナーさん向けの jQuery 目次へ

5.6. HTML、DOM … Manipulation（マニュピレーション）系のメソッド

jQuery ManipurationHTML、DOM … Manipulation（マニュピレーション）系のメソッドは、HTML に要素を追加したり、削除したりすることができます。

例えばスライダーのプラグインなどを使うと、自分では HTML に記述してないのに「次へ」「前へ」ボタンが表示されたりしますよね！あんな感じで、jQuery を使って自動的に要素を作ったりするのに使います。先ほどの例と同じ HTML を例にして見てみましょう。

HTML

<div id="header">
  <div id="logo">
  ロゴ
  </div><!-- /logo -->
  <div id="navi">
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  </div><!-- /navi -->
</div><!-- /header -->

上記の HTML に対して、下記のようなコードを実行したとすると …

  • prepend()
    $("#navi ul").prepend('<li><a href="#">Home</a></li>');
    指定した要素の一番最初に、HTML を追加します。上記の HTML 内のナビゲーションの一番最初に Home というリンク付きリストを追加しています。
  • append()
    $("#navi ul").append('<li><a href="#">Blog</a></li>');
    指定した要素の一番最後に HTML を追加します。ナビの最後に Blog を追加しています。
  • after()
    $("#logo").after("<h1>Web Design</h1>");
    指定した要素の後ろに HTML を追加します。#logo の後に、<h1>タグを追加してます。
  • before()
    $("#logo").before("<h1>Web Design</h1>");
    指定した要素の前に HTML を追加します。さっきと逆ですね！
  • wrap()
    $("#header").wrap('<div id="wrapper"></div>');
    指定した要素を包んで HTML を追加します。#header を #wrapper で包みます。
  • remove()
    $(#navi").remove();
    指定した要素を削除します。

マニュピレーション系のメソッドでは、見てきたように動的にHTMLを追加したり削除したりすることができます！もちろんまだまだたくさんのメソッドがあります。

↑ Webデザイナーさん向けの jQuery 目次へ

6. Events（イベント）系のメソッド

イベント系メソッド

今までいろいろなメソッドを見てきましたが、これらを実行するタイミング、きっかけを与えてあげる必要があることがほとんどです。例えばクリックしたときとか、マウスを乗せたときとか …。そのようなきっかけの事をイベントと言います。jQuery には、イベント系のメソッドも多数用意されています！

例えばロゴ（テキストリンク）にマウスを乗せた時をきっかけ（イベント）にして、リンクの色を変更するコードは以下のようになります。

hover() メソッドの一例

$("#logo").hover(function(){
 	$(this).css("color","red");
});

ちょっと今までと書き方が違いますよねー。基本的にイベント系のメソッドは、他のメソッドと組み合わせて使います。イベント系メソッドの基本的な書き方は以下の通りです。

function というのは、関数を定義するという意味。なので、イベントが発生したときに、以下の関数を実行してください！ … という感じになります。

$(セレクタ).イベント(function(){
/* ここに処理 */
});

もう一度さっきのコードを1行ずつ見てみると …

  1. $(“#logo”).hover(function(){
    #logo にマウスが乗った時に
  2. $(this).css(“color”,”red”);
    this（これ）… つまり #logo に対して、css メソッドを実行する。
  3. });
    最後に忘れずに閉じましょう。

別の例を見てみましょう。ナビのリンク上にマウスを乗せたときに色を赤に、マウスが外れたときに色を青にするには、どうやって書けばいいでしょう？

hover() メソッドの例

$("#navi a").hover(
  function(){ /* マウスを乗せたとき */
    $(this).css("color","red");
  },
  function(){ /* マウスが外れたとき */
    $(this).css("color","blue");
  }
);

イベントメソッドの中には、上記の様に続けて書くと、反対の動き（マウスが乗ったとき、マウスが外れた時）をイベントとしてくれるものがあるので、コーディングもとっても楽ですね！

他にもたくさんのイベント系のメソッドがあります。詳しくは下記リンクなどを参照してみてくださいね！

また、イベントの書き方について、jQuery 1.4 からは、メソッドチェーンを使わないで bind() を使ってまとめて記述する事もできます。5509さんの以下の記事が参考になります！

↑ Webデザイナーさん向けの jQuery 目次へ

7. $(document).ready(function(){ …

いろんな jQuery のコードをよく見てみると、コードの書き出しの部分に $(document).ready(function(){ … というコードをよく見かけます。これはどういう意味でしょう …。

Javascript では、よく window.onload() なんて書き方をしました。これは window がロードされたら … というような意味。つまり HTML や画像が読み込まれたら、Javascript を実行する … という感じですね！

どうしてこんな条件をつけなければならないか … という事を簡単に説明します。例えば下記の Javascript のコードを例にして見てみましょう。

Javascript

<script type="text/javascript">
var targets = document.getElementsByTagName("p");
for(var i=0; targets.length; i++){
    target.style.color = "red";
}
</script>

これは HTML 内の <p> タグに対して、テキストの色を赤にするというコードですね！でも、もしこのコードが <head> 内に書かれていて、すぐに実行できる状態になったらどうでしょう？

まだ <p> タグはおろか、<body>すら読み込んでない状態では実行できませんよね …。そういった意味で、HTML や画像が読み込まれた後に実行する … という条件が必要になる訳ですね！

↑ Webデザイナーさん向けの jQuery 目次へ

7.1. $(document).ready(function(){ … はどこいったの？

そーでした w では、$(document).ready() はどういう意味でしょう …。window.onload() の場合は、HTML や画像が読み込まれるまでは、Javascript を実行しない … という意味でした。でも仮に、javascript の読み込みが終了する前に、ユーザーが何らかの操作（クリックとか、そういう操作）をした時は、やっぱりエラーが起こってしまう可能性があります。

jQuery の場合は、それを防ぐ為に ready() メソッドが用意されているんです。これは HTML が読み込まれ、画像がまだ読み込まれていなくても、スクリプトが実行できる状態になったら … という意味です！画像が読み込まれてなくても、実行可能になった段階で実行してくれるので、実行タイミングが早くなりますし、読み込み中の意図しないユーザーの操作によるエラーを無くす事ができるんですねー！

また、$(document).ready(function(){ … は、省略して書く事もできます！

  • $(document).ready(function(){ …});
  • $(function(){ … });

上記のふたつは同じ意味です。コードを簡単に書けるのが jQuery のいい所ですねー。

↑ Webデザイナーさん向けの jQuery 目次へ

7.2. 何でもかんでも $(function(){ … にしない

ready() は、準備ができたら実行 … という意味でした。それなら、全部上記のように書けば問題ないんじゃない？って思いがちですが、そんなことはありません。

例えば、画像を使ったイメージスライダーなどを実行する場合は、画像が読み込まれてなければエラーになってしまう可能性がありますよね。なのでそのような場合は、やっぱり ready() メソッドではなくて、load()メソッドを使った方がいいですよね。

  • $(window).load(function(){ … });

なので何でもかんでも ready() を使うのではなく、ちゃんと実行タイミングを考えて指定しなくちゃならないっていうことを覚えておきましょう。

↑ Webデザイナーさん向けの jQuery 目次へ

8. $() と jQuery() は同じ

ずーっと色んなコードを大雑把にみてきましたけど、jQuery のコードの頭には $ がついてますよね。でもこれは jQuery と書く事もできます。ちょっと混乱しますね w

もちろん $() で書く方が一般的ですが、jQuery() と書かないといけない場合もあるので、jQuery() という風にも書ける！ということは覚えておきましょう。

  • $(“p”).css( “color”, “red” );
  • jQuery(“p”).css( “color”, “red” );

上記のふたつは同じです！

ではどんな時に jQuery() で書かないといけないのか … というと、prototype.js など、他の Javascript ライプラリなどを jQuery と一緒に使う場合です。例えば prototype.js には、getElementById に似た $() 関数というものがあります。

Javascript

var target = $('navi');

こんな風に $() を prototype.js で使っているので、jQuery では $() を使わないで jQuery() を使う … という感じです。

私は WordPress をよく使うので（このブログも WordPress を使っています！）、$() を使わずに、jQuey() を使うようにしています。WordPress には、もともと prototype.js がインストールされて、$() 関数が使われているからです。

ここでは $() の代わりに、jQuery() も使える（同じ意味）ということだけ覚えておきましょう！

補足

他の Javascript ライブラリとの競合（コンフリクト）を避ける為に、jQuery() を使ったりします。でも他にも方法があるので、下記の記事を参考にしてみてください。

また、全部の $ を jQuery に置き換えてしまえばいい … ということではありません。$ という記号は、正規表現などにも使われています。変えちゃいけない $ もあるので、テキストエディタで一括変換！ということはしないのが基本です。

↑ Webデザイナーさん向けの jQuery 目次へ

9. サンプル：背景画像をアニメーションにする

ここまでざーっと jQuery の基本的な使い方、セレクタやメソッドを見てきました。でも実際に Webデザインで jQuery を使えるようになるには、いろんなサンプルコードを見て、触って覚えるのが一番だと思います。なので、簡単なサンプルを使って、どんな風にコードを書けばいいかを見ていくことにします。

もう十分長い記事になってしまったのですが、3つほどサンプルを作りました。まずは背景画像をアニメーションで動かすサンプルです！

9.1. アニメーションで出てくる背景画像

アニメーションで出てくる背景画像

サンプルはナビゲーションをイメージして作りました。マウスを乗せると、上からするするーっとリボン（ … のつもり）が降りてきます。まずは HTML と CSS を見てみますが、CSS などはかなり省略して掲載しています。

jQuery サンプル

HTML

<ul id="navi">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS

#navi a{
  display: block;
  background: url(images/ribbon.png) no-repeat 50% -80px;
}

リボンの画像を、<a>タグの背景画像に指定しますが、注意したいのは background-position です。サンプルの場合、水平位置はセンターになるように 50% を指定して、垂直の位置にネガティブな値（-80px）を指定しています。

それでは jQuery のコードを見てみましょう！

Javascript

<script type="text/javascript">
$(function(){
  $('#navi a').hover(
    function() {
      $(this).stop().animate({ "background-position-y" : "0px" }, 500);
    },
    function() {
      $(this).stop().animate({ "background-position-y" : "-80px" }, 100);
    }
  );
});
</script>
  • 2行目：
    $(function(){
    これはさっき出てきたばっかりですね！$(document).ready(function(){ … の省略形です！
  • 3行目：
    $(‘#navi a’).hover(
    この行は、#navi a（リンク）に対してのイベントメソッドの部分です。マウスを乗せた時に動かしたいので、hover() を使います。
  • 4行目：
    function() {
    マウスを乗せたときに実行することを関数として定義します。なので function を宣言？します。
  • 5行目：
    $(this).stop().animate({ “background-position-y” : “0px” }, 500);
    ちょっと長いですけど … 実際に実行される部分です。アニメーションは animate() メソッドで、背景の垂直位置を 0px にして表現します。background-position-y は背景の縦の位置を指定するプロパティーですよね！その後に続く 500 という数字は、アニメーションのスピードです。

    また、animate() の前に、メソッドチェーン（前に出てきましたねー！）で stop() というメソッドがついてます。これはアニメーションを途中で止めるメソッドです。なくても動きますけど、アニメーションの途中で他のリンクに移ったときなどは、いちばん下まで下がらないで途中で中止します。

これ以降は逆のアニメーションをしているだけです。背景の位置を、CSSで指定した元の位置（-80px）に戻しているだけです。戻るときのスピードは、100 にして速くしています。

↑ Webデザイナーさん向けの jQuery 目次へ

9.2. 補足：animate() と background-postion

animate() メソッドと background-positon を使うときは、実はちょっと注意が必要です。というのも、jQuery 1.4 のときには、以下のように書いても動いていました。

Javascript

$(this).stop().animate({ "background-position" : "50% 0" }, 500);

background-position で、x軸、y軸の両方を、同時に指定できていたんです。でも、jQuery 1.5 以降では、値にはひとつしか指定できなくなりました …。なので、上記のように、50% と 0 というように、ふたつ値がある場合には動きません。

こんな風に、時々仕様変更も行われる jQuery。冒頭でも触れましたけど、コードを覚えるなら最新の jQuery を使うことをお勧めします！

追記：重要

上記のサンプルでは、background-position-y を利用してみましたが、Firefox、Opera では利用できないみたいです（公開前にチェックしてませんでした … すいません）。

なので、やっぱりプラグインを使って、従来の書き方、“background-position” : “50% 0″ とするのが簡単かも …。混乱させてしまってすいません。

サンプルもこのプラグインも利用して作り直しました。

また、上記のコードを書いて動かなくてハマってるとき、5509 の Kazunori Tokuda さん（@5509）に、大変お世話になりました！ありがとうございました！

↑ Webデザイナーさん向けの jQuery 目次へ

10. サンプル：ボックスを丸ごとリンクにして、画像もついでにバブルアップ

マウスを乗せると、画像がちょっとだけ拡大します。リンクである事が分かりやすいように動きを付けるのは、よく使われてるデザインですよね！それと同時に、リンクテキストだけではなくて、ボックス全体をクリックできるようにもしています。

jQuery サンプル

HTML

HTML は少し省略しています。

<div class="box-link">
  <h4><a href="#">cake</a></h4>
  <p>I love cake</p>
  <img src="images/cake.jpg" alt="" />
</div>

リンクは <h4> タグだけに指定しています。

CSS

CSS も省略していますが、特に難しい事はしてません。

.box-link {
  cursor: pointer;
}
.box-link img {
  width: 100px;
  height: 60px;
}
.rollover {
  background: #ddd;
}

ボックスにマウスを乗せたときに、カーソルをポインタに変えています。また、HTML に記述のない、rollover というクラスがありますが、これは後述しますね！

それでは jQuery のコードを見てみましょう。

Javascript

$(window).load(function(){
  $(".box-link").click(function(){
      window.location=$(this).find("a").attr("href");
    }).hover(
    function() {
      $(this).addClass("rollover").find('img').stop().animate({
        "margin-top": '-10px',
        "margin-left": '-10px',
        "width": '110px',
        "height": '70px'
      }, 100);
    },
    function() {
      $(this).removeClass("rollover").find('img').stop().animate({
        "margin-top": '0',
       	"margin-left": '0',
       	"width": '100px',
       	"height": '60px'
      }, 400);
  });
});

ちょっと長くなりましたけど、上から順を追って見ていきましょう。

  • 1行目：
    $(window).load(function(){
    前述しましたね！今回は画像に対して処理をくわえるので、load() を使ってみました。
  • 2行目：
    $(“.box-link”).click(function(){
    まずはクリックイベント時の関数を宣言します。
  • 3行目：
    window.location = $(this).find(“a”).attr(“href”);
    wondow.location で、指定した URL に移動させますが、URL 自体は find メソッド、attr メソッドを使って検索しています。
  • 4行目：
    }).hover(
    今度はマウスを乗せたときの処理を加えるので、メソッドチェーンで hover() を繋いでいます。
  • 6行目：
    $(this).addClass(“rollover”).find(‘img’).stop().animate({
    ちょっと長いですけど、ここもメソッドチェーンでいろんなメソッドが繋がってます。まず addClass() で rollover というクラスを付けています。その後、find() で画像を検索して、stop()、anmate() でアニメーションを加えています。

これ以降は、animate() のパラメータ。そして逆の動きを記述しているだけですね！

今回は、マウスを乗せたときに rollover というクラスを付けてみました。なので CSS で rollover というクラスの記述があったんですね！

ん？jQuery を使わなくても、最初から CSSで .box-link:hover 疑似クラスを使えばいいのでは？という声も聞こえそうですが w IE6 では a要素以外には :hover 疑似クラスが使えませんでした …。なので、こんな風に jQuery を使って、クロスブラウザ対策をする事もあったんですね！

↑ Webデザイナーさん向けの jQuery 目次へ

11. サンプル：スクロールすると現れる、TOP へ戻る

最後に、下にスクロールしていくと現れる、「TOP へ戻る」を見てみます。これが最後のサンプルです！

サンプルといっても、これは WebDesignerWall さんで公開されているので、そちらのコードを覗いてみましょう。

HTML と CSS は WebDesignerWall さんを参考にしていただいて、ここでは jQuery のコードを見てみます。

Javascript

$(document).ready(function(){

  $("#back-top").hide();

  $(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
        $('#back-top').fadeIn();
      } else {
        $('#back-top').fadeOut();
      }
    });

    $('#back-top a').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800);
      return false;
    });
  });
});

それでは今回も、上から順に見ていきましょう。

  • 3行目：
    $(“#back-top”).hide();
    まずは hide() で非表示にしています。
  • 6行目：
    $(window).scroll(function () {
    ここは、Window をスクロールしたとき … というイベントメソッドの部分ですね！
  • 7行目：
    if ($(this).scrollTop() > 100) {
    if 文を使っての条件分岐です。scrollTop() で、スクロールの位置を取得して、100px を境に fadeIn、fadeOut を切り替えます。
  • 14行目：
    $(‘#back-top a’).click(function () {
    今度はクリックした時のイベントメソッドですね。
  • 15行目：
    $(‘body,html’).animate({
    セレクタは、body と html の両方指定してありますねー。animate() メソッドで、スクロールをアニメーションさせます。
  • 16行目、17行目
    scrollTop: 0 }, 800);
    ページ上部である scrollTop: 0 の位置に 800 のスピードでアニメーション！
  • 18行目：
    return false;
    最後に return false しておしまい。
↑ Webデザイナーさん向けの jQuery 目次へ

12. エラーの原因は HTML にあることも …

jQuery もプログラムのひとつなので、当然書き方を間違えればエラーになってしまします。でも jQuery、Javascript の場合は、HTML の要素をセレクタで指定して何らかの処理をする事が多いですよね。なので DOM の階層が違ったり、id やクラスの名前が違ったりしても、当然エラーになります。

CSS と一緒ですね！HTML で書いた id やクラス名に、間違いがないかを確認するのも jQuery でのプログラミングでは大切です。初心者の頃は、意外にこのエラーが多かったです w id じゃなくてクラスだったじゃない … みたいな w

また、所々で補足したように、仕様変更によって動かなくなってしまう … ということもあります。過去のバージョンで動いていたのに、新しくすると動かなくなるというこもあるので、注意が必要です。

↑ Webデザイナーさん向けの jQuery 目次へ

13. 最後に …

いろいろ jQuery について、大雑把に見てきました。この記事では触れていませんが、jQuery には Ajax や ユーティリティー系（ユーザーエージェントを取得したりとか、配列やオブジェクトを操作したりとか）のメソッドもあります。

また、jQuery UI というユーザーインターフェース系をまとめたものや、タブレットやスマートフォン向けの jQuery Mobile なんていうフレームワークも登場しています。

ここで紹介したものは、jQuery の基本のほんの一部ですし、私は javascript、jQuery のプログラミングが苦手な方です。

なのでこの記事は、jQuery プログラミングのチュートリアルという感じじゃなくて（間違った説明もあるかもしれないし …）、CSS や HTML は分かるんだけど、何となく jQuery って分からないよねー … という Webデザイナーさんにとって、Javascript や jQuery を触り始めるきっかけにでもなればいいなーと思って書きました。

また、jQuery の公式サイトは英語ですし、ブログ内でリンクで紹介している jQuery 日本語リファレンスさんも、jQuery 1.4 以降は更新されていないみたいなので、jQuery を学ぶのには、書籍を買うのもアリだなーって思います。私は下記の本を読みました！リンクはアマゾンに飛びます。

最後まで読んでくれて、ありがとうございました！
P.S. 彩佳さん、Webデザインがんばろうね！

follow me on twitterfollow me on twitter RSS feedStay up to date via RSS