もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第1回 jQueryにふれる

この記事を読むのに必要な時間:およそ 3.5 分

はじめに

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

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

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

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

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

使用ツール

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

用意するツール

jQueryの読み込み

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

※執筆時の最新バージョンは1.3.2です。

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

早速使ってみる

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

サンプル HTML

<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>

サンプル CSS

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

サンプル jQueryを使用したソース

$(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の適応されていない状態のリスト

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

jQueryの適応された状態のリスト

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

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入