お洒落で動的なWebを製作するには「Java script」が必要になります。
しかし、Java scriptはコードの量が多く、実装するには時間が掛かります。
そこで使用するのが「jQuery」です。
jQueryはJava scriptを手軽に扱えるようにしたライブラリのことです。
Java scriptであれば何十行という大量のコードを記述する必要がありますが、jQueryだとわずか数行で機能を実装することができます。
jQueryを使用すればプログラミング初心者でも簡単に動的なWebサイトを製作することができます。
今回はjQueryを使うための準備やオススメの機能など紹介します。
jQueryについて全く知識のない方でも、すぐにjQueryを使うことができるようになります。
jQueryの基本的な使い方からオススメのプラグインまで紹介します。
最後まで読んでいただければ簡単にjQueryを使うことができるようになります。
jQueryができること
jQueryができることは「動きをだす」ことです。
・画像がスライド式で入れ替える
・マウスオーバーしたらアニメーションのように動く
・マウスオーバーすると吹き出しが現れる
・スクロールするとデザインが変わる
・クリックするとボタンの色が変わる
などWebサイトに躍動感をだすことができます。
今のWebサイトにはjQueryがよく使われています。
jQueryを使用する準備
jQueryを使用する前段階としては2つ方法があります。
・Web上のjQueryのソースを読み込む方法
・ダウンロードして読み込む方法
HTMLの記述する場所としては<head>〜</head>の間にjQueryを読み込むコードを記述します。
Web上のjQueryのソースを読み込む方法
Web上のjQueryのソースを読み込む方法はとても簡単です。
〜の間に以下のコードを記述するだけです。
これを記述するだけでjQueryを使うことができます。
ダウンロードして読み込む方法
jQueryの公式ページからjQueryのライブラリをダウンロードします。
http://jquery.com/download/（公式ページ）
公式ページにアクセスすると英語で記載された文章が並んでいます。
この中でダウンロードするファイルは以下のファイルです。
「Download the compressed, production jQuery 3.2.1」
現在の最新バージョンは3.2.1になります。（2017年9月11日時点）
時間が経過するとバージョンが更新されますので、
時々、公式Webサイトを訪れて新しいバージョンがリリースされていないか確認しましょう。
ダウンロードが完了すると、ルートの階層に「js」フォルダを作ります。
そこに先ほどダウンロードしたファイルを格納すればjQueryを読み込むことができます。
プログラムの書き方
jQueryを使える環境が整ったら、実際にjs（Java script）を書いていきましょう。
jsを書く方法としては2種類あります。
・HTMLファイルに直接記述する方法
・「◯◯.js」という別ファイルを作成して、そのファイルを読み込む方法
Web製作の現場環境では「◯◯.js」ファイルを作成して、そのファイルを読み込む方法を採用するのが一般的。
理由はHTMLのファイルに直接記述すると後でコードを見返したときに見にくくなるからです。
後で修正する必要があるときのためにも別ファイルでjsを読み込むことをオススメします。
HTML内にプログラムを書く方法
以下のコードをHTML内に記述するだけで大丈夫です。
<script type=”text/javascript”>〜</script>の間にjsのコードを記述します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> <!-- この部分にプログラムの内容を記述 --> </script>
別ファイルで読み込む
以下のコードを記述することで別ファイルから読み込むことができます。
注意して欲しいことはコード書く順番を間違えないことです。
HTMLは上から順番にコード読み込みます。
先にjQueryの読み込むコードを記述し、その次にプログラムを読み込ませる必要があります。
この順番を逆にするとプログラムは実行されません。
なので、コードを記述する順番は間違わないように気をつけましょう。
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="格納場所/プログラム用.js"></script> </head>
ここまでがプログラムを実行するための下準備です。
今ようやくスタートラインに立つことができました。
次はjQueryの書き方や機能について紹介します。
jQueryの基本形
準備が整ったら実際にコードを記述します。
jQueryの基本的な形は以下のようになります。
$(function(){
// ここにプログラムを記述
});
基本的にはこの形の中にコードを記述します。
jQueryの解説
$(function(){
$("A").B(C)
});
「A」の部分はセレクタとよばれ、ここに要素を記述します。
「B」の部分はメソッドとよばれ、ここに実行するタイミングを記述します。
「C」の部分はパラメーターとよばれ、ここに実行したい処理を記述します。
パラメーターは必ず必要な訳ではなく、パラメーターを必要としないメソッドもあります。
文章だけで見てもイメージできないと思いますので、例を用いて説明します。
要素を選択
変化を加えたい要素を選びます。
要素とはCSSコードを書いたことのある人はわかると思います.
例を挙げると「div」、「class」などです。
要素を選ぶ記述を「セレクタ」とよびます。
セレクタには「idセレクタ」「classセレクタ」「要素セレクタ」「子孫セレクタ」と4つの種類があります。
idセレクタ
$(function(){
$("#text").css("color","blue")
});
classセレクタ
$(function(){
$(".text").css("color","blue")
});
要素セレクタ
$(function(){
$("p").css("color","blue")
});
子孫セレクタ
$(function(){
$("div p").css("color","blue")
});
実行するタイミングを選択
実行タイミングを選ぶ記述を「イベント」とよびます。
イベントも無数にあるので、使用頻度の高いイベントだけを紹介します。
初心者の方はここに紹介されているものだけを覚えれば十分です。
クリックイベント
$('#button').click(function() {
alert("クリックされました");
});
ダブルクリックイベント
$('#button').dbclick(function() {
alert("ダブルクリックされました");
});
マウスオーバー
$('#button').mouseover(function() {
alert("マウスオーバーされました");
});
マウスダウン
$('#button').mousedown(function() {
alert("マウスボタンが離れました");
});
このようにイベントを指定することができます。
応用として、onメソッドを使用すれば複数のイベントを指定できます。
$('#button').on({
//一つ目のイベントハンドラ
'mouseenter': function() {
alert("マウスオーバーされました");
},
//二つ目のイベントハンドラ
'mouseleave': function() {
alert("マウスアウトされました");
}
});
コードを書く
jQueryを使う準備、書き方がわかったところで実際にコードを書いていきます。
最初は理解することは難しいかもしれませんが、手を使って書くことで理解できるようになります。
jQueryをマスターする一番の近道は手を動かすことです。
Toggle
toggleはアコーディオンやタブメニューなどを実装するときに使用するメソッドです。
大きく分けて3つの種類があります。
slideToggle
クリックすると隠れていたメニューが表示されます。
アコーディオンメニューとよばれるものです。
おそらく皆さんも一度は目にしたことがあると思います。
JSコード
<script>
$(function(){
$("button").click(function () {
$("p").slideToggle();
});
});
</script>
HTMLコード
<button>トグルボタン</button>
メニューが開きます
JSコードはわずか5行記述するだけで実装できます。
jQueryはコード量がとても少ないのがメリットです。
fadeToggle
タブメニューを実現するときに使用します。
Yahooのトップページはタブメニューを採用しています。
JSコード
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs();
});
</script>
HTMLコード
<div id="ui-tab"> <ul> <li><a href="#tab-1"><span>タブ1</span></a></li> <li><a href="#tab-2"><span>タブ2</span></a></li> <li><a href="#tab-3"><span>タブ3</span></a></li> </ul> <div id="tab-1"> <p>タブ1の内容</p> </div> <div id="tab-2"> <p>タブ2の内容</p> </div> <div id="tab-3"> <p>タブ3の内容</p> </div> </div>
タブの実装も簡単にできます。
トップページにタブメニューがあるだけで本格的なWebサイトに見えます。
toggleClass
スイッチのようにON/OFFの切り替えができます。
実装されているWebサイトはあまり見かけませんが、簡単に実装できるので覚えておくと便利です。
JSコード
<script type="text/javascript">
$('div').click(function(){
$(this).toggleClass('active');
});
</script>
HTMLコード
<div id="click">クリック</div>
CSSコード
#click{
margin: 10px;
text-align: center;
width: 100px;
height: 100px;
line-height: 50px;
background: #ccc;
border: solid 2px #ccc;
}
ドロップダウンメニュー
メニューにマウスをあわせるとメニューが下に並んで表示されるのがドロップダウンメニューです。
グローバルメニューなどでよく使われています。
JSコード
<script>
$(function(){
$('#navi').dropdown();
});
</script>
HTMLコード
<ul id="navi">
<li><a href="">menu</a>
<ul>
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
<li><a href="">menu5</a></li>
</ul>
</li>
</ul>
クロスフェード
複数の画像を透過させてスライドのようにみせる機能です。
画像の切り替えがスライダーとは違いゆっくり変わっていきます。
結婚式場のWebサイトなどで使用されていることが多いです。
コードを書くだけで簡単に実装することができます。
HTMLコード
<ul id="crossfade"> <li><img src="image1.jpg" alt="" ></li> <li><img src="image2.jpg" alt=""></li> <li><img src="image3.jpg" alt=""></li> </ul>
JSコード
<script>
$(function(){
$("#crossfade").find("li").hide();
$("#crossfade").find("li:first").stop().fadeIn(2000);
setInterval(function(){
$("#crossfade").find("li:first-child").fadeOut(2000)
.next("li").fadeIn(1000)
.end().appendTo("#crossfade");
}, 3000);
});
</script>
アニメーション
アニメーションメソッドを使うことで要素を動かすことができます。
Webサイトで見かけることはほとんどありませんが、面白い機能なので覚えておいて損はありません。
HTMLコード
<div id="boxwrap"> <div id="box">ここのボックスが移動します。</div> </div>
JSコード
<script>
$(function(){
$('#box').click(function(){
$(this).animate({'top':'200px','left':'200px'},3000);
});
});
</script>
CSSコード
#boxwrap{
position:relative;
width:300px;
height:300px;
background:#CCC;
}
#box{
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
background:gray;
}
jQueryのプラグインを使用する
プラグインとはjQueryの拡張機能です。
様々な種類のプライグインが公開されています。
導入はとてもシンプルなので初心者でも使うことができます。
カルーセル・スライダー（スリック）
jQueryには様々な種類のスライダーがありますが、
レスポンシブにも対応し、動作も早く、人気を集めているのがカルーセル・スライダーです。
使い方は公式サイトからファイルをダウンロードしてコードを記述すれば完成です。
公式サイトからダウンロードするとファイルがいくつも展開されます。
その中でも必要なものは以下の3つのファイルです。
・slick-theme.css
・slick.css
・slick.min.js
この3つのファイルでデフォルトの状態で使うことができます。
カスタマイズする場合は他のファイルも使用する必要があります。
実装方法
HTMLの<head>〜</head>の間にslickのファイルを読み込むコードを記述します。
<head> <link rel="stylesheet" href="slick.css"> <link rel="stylesheet" href="slick-theme.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="slick.min.js"></script> </head>
HTMLの<head>〜</head>の間に記述するコード
<ul class="slider"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> </ul>
JSコード
<script>
$(function(){
$('.slider').slick({
autoplay:true,
autoplaySpeed:3000,
dots:true,
pauseOnHover:true
});
});
</script>
これでスライダーは完成です。
スライドする間隔は3秒に設定しています。
画像にマウスオーバーすると再生が一時停止します。
オプション設定
カルーセル・スライダーには様々なオプションがあります。
オプションはたくさん種類がありますが、その中でもよく使うものだけを紹介します。
・accessibility
キーボードの左右ボタンで画像の切り替えを可能/不可能にする
・autoplay
自動再生をする/しない
・arrows
スライダーの左右に「進む」「戻る」ボタンを表示/非表示
・centerMode
スライドを中央寄せにする/しない
・draggable
ドラッグ可能/不可能
・fade
スライド切り替え時はフェード処理する/しない
・infinite
最後のスライドの次に最初のスライドを表示することで、
無限にループする/しない
・pauseOnHover
スライダーにマウスオンすると、スライダーが一時停止する/しない
・responsive
レスポンシブの設定
・speed
スライドを切り替える時間間隔を設定
ライトボックス
数多くのWebサイトで導入されて大流行したライトボックス。
写真をクリックするとその画像がモーダルで拡大表示されます。
使い方は公式サイトからファイルをダウンロードしてコードを記述すれば完成です。
ダウンロードしたファイルを解凍するといくつかファイルが展開されます。
その中で使用するものは以下の6つになります。
・lightbox.js
・lightbox.css
・close.png
・loading.gif
・next.png
・prev.png
HTMLの<head>〜</head>の間にファイルを読み込むコードを記述します。
<head> <link rel="stylesheet" href="css/lightbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head>
<body>〜</body>の間にライトボックスを組み込みたい箇所のアンカー要素に「rel=”lightbox”」を追加します。
「href」プロパティでは拡大表示させたい画像を指定。
具体的には以下のような記述になります。
<a href="画像のパス"><img src="画像のパス" /></a>
これだけでライトボックスを適応することができます。
吹き出し
jqueryでは吹き出しをつくることもできます。
公式ページからダウンロードしてコードを記述すれば実装できます。
titleの属性にした文章が吹き出しに表示されます。
HTMLの<head>〜</head>の間にライトボックスのファイルを読み込むコードを記述します。
<head> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.balloon.js"></script> </head>
JSコード
<script>
$(function() {
$("a").balloon();
});
</script>
HTMLコード
<a title="ここに吹き出しが表示されます" href="#">ここにマウスをあわせてください。</a>
まとめ
HTMLとCSSだけでもWebサイトを制作することはできますが、jQueryを使うことで簡単にかっこいいサイトを制作できます。
jQueryのプラグインは数えきれないほど無数にあります。
Java scriptが理解できれば、jQueryのプラグインをアレンジすることもできます。
jQueryを使えるだけで簡単にスキルアップすることができ、同じプラグインでもオプションや時間間隔などを変えるだけで印象が全く変わります。
jQueryを使うときはWeb上のソースを読み込むのではなく、ファイルをダウンロードした方が読み込みや、表示速度が早くなるので、ダウンロードするやり方がオススメです。
jQueryのファイルをダウンロードして使う方が早く表示することができま、表示速度が遅くなると、Webサイトを訪れたユーザーの離脱率も上がります。
表示速度はデザインと同じぐらい重要です。
ユーザーに少しでも長く滞在してもらえるように努力しましょう。