はじめに

ここ数年，JavaScriptライブラリを使ってサイトを製作するという機会がどんどん増えてきました。今まででであれば，JavaScriptのライブラリを使う・使わないに関わらず，その製作の多くはプログラマーの方が行っていたと思います。しかし近年，そのJavaScriptライブラリも種類が増えてきて，プログラミングの知識がなくても簡単に導入できるようなライブラリも出てきました。そのため，それらの使い手はプログラマーからWebデザイナーやマークアップエンジニア側へとシフトしつつしている部分もあります。

そんな数多くあるJavaScriptライブラリの中でも，Webデザイナーなどのプログラミング知識がない人でも比較的導入のしやすいのが『jQuery』です。このjQueryの魅力は，その使いやすさとプラグインの豊富さにあり，プラグインだけでも，すでに使ったことがあるという方も多いと思います。

しかし，まだまだ使ったことがないというWebデザイナーもいるでしょうし，使ったことがある方でも，プラグイン導入でくらいでしか使ったことがないという方も多くいると思います。

この連載では，そんな方の為に，jQueryでできることの紹介や使い方，自作プラグインの作り方などを紹介していきます。少しでも実際の製作現場で役立てられるような，そんなサンプルや使い方をご紹介していきます。

第1回ではjQueryの基本的な使い方と，jQueryを使った製作に欠かすことのできないFirefoxのアドオン『Firebug』での動作確認方法をご紹介いたします。

使用ツール

jQueryを使う製作を行う前に，その製作を行う環境を準備します。この連載では，基本的にFirefoxとそのアドオンのFirebug，そしてFirebugの拡張でFireQueryを使いサンプルの紹介をしてきます。

用意するツール

• Firefox
• Firebug
• FireQuery

jQueryの読み込み

ツールの準備ができたら，次にjQuery本体を使う準備をします。jQuery本体となるファイルをjQueryサイトからダウンロードしてきたら，head内で読み込ませます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

早速使ってみる

早速ですが簡単なサンプルを見てみましょう。

<ul id="samp1">
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
    <li>サンプルリスト3</li>
    <li>サンプルリスト4</li>
    <li>サンプルリスト5</li>
    <li>サンプルリスト6</li>
    <li>サンプルリスト7</li>
    <li>サンプルリスト8</li>
    <li>サンプルリスト9</li>
    <li>サンプルリスト10</li>
</ul>

.txtBold{
    font-weight: bold;
}
.txtRed{
    color: #ff0000;
}
.txtBlue{
    color: #0000ff;
}
.txtUnder{
    text-decoration: underline;
}
.txtBig{
    font-size:122%;
}

$(function(){
    $('li').addClass('txtBold');
    $('li:first-child').addClass('txtRed');
    $('li:gt(5)').addClass('txtBlue');
    $('li:lt(3)').addClass('txtUnder');
    $('li:contains("5")').addClass('txtBig');
    $('li:last-child').removeClass();
});

サンプルについて

サンプルのHTMLを見ていただけたらわかるように，1から10までのリストです。HTML中のリストにはclassも何もついていない状態なのがわかると思います。

特にCSSを設定していないので，jQueryが適応されていない場合は，変化のないリストが表示されるようになります。

今回のサンプルのjQueryは，自動的にclassをつけるスクリプトで(詳しくは後ほど)CSSを設定しておき，そしてサンプルのjQueryを適応すると，表示も変化します。

これはHTMLに自動的にclassが付されたために，そのclassに設定をしておいたCSSが適応されて表示されるようになったのです。classを自動的につけても，CSSの設定がなければ表示の変化はありませんので，自動で表示を変化させる場合はCSSの設定を忘れずにしておきましょう。