ブログ

  1. トップ
  2. ブログ
  3. jQueryを使えばWEBサイトがガラリと変わる

jQuery

jQueryを使えばWEBサイトがガラリと変わる

jQueryという言語をご存知でしょうか。

jQueryは、WEBサイトのデザインをかっこよくおしゃれにする際に、よく使用される言語です。

jQueryを習得することで、WEBサイトにアニメーションなどを動きのあるデザインを実装することができます。

これまでHTML・CSSだけでサイト制作していた人は、jQueryを使用することでよりかっこよくておしゃれなWEBサイトを制作することが可能です。

ぜひ、この機会にjQueryを習得して表現の幅を広げてください。

jQueryとは

jQueryを簡単に説明すると、「javascript」とよばれるプログラミングを簡単に使えるようにしたプログラミング言語です。

このように特定の機能を扱いやすくしたモノをライブラリと呼びます。

jQueryはjavascriptのライブラリになります。

jQueryのメリットは簡単に素早く機能を実装できることです。

例えば、javascriptで何十行も記述しなければならないプログラムも、jQueryを使用することでわずか数行の記述で機能を実装することができます。

javascriptはHTML・CSSよりも習得難易度が高く、初心者には難しい言語です。

しかし、jQueryはjavascriptよりもシンプルで覚えやすく、プログラミング未経験者でも習得しやすくなっています。

また、javascriptをより詳しく知りたいという人は前回の記事「【完全網羅】Javascriptで可能性が広がる」を参考にしてください。

前回の記事URL:https://kumaweb-d.com/web/javascript/

jQueryを実装するための下準備

jQueryを実装するためには、jQueryを使用するための下準備が必要です。

jQueryを使用する方法は2種類あります。

・WEB上のソースを読み込む方法
・ファイルをダウンロードして読み込む方法

この2つの方法について順番に説明します。

WEB上のソースを読み込む方法

WEB上のソースを読み込む方法はコードを記述するだけなので、とても簡単に準備が完了します。

このようなコードを記述してください。

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

このように記述することでjQueryを読み込むことが可能です。

しかし、WEB上のソースを読み込みに時間がかかってしまうため、表示速度が遅くなってしまうのがデメリットになります。

次に、「ファイルをダウンロードして読み込む方法」を紹介します。

ファイルをダウンロードして読み込む方法

ファイルをダウンロードするために、jQueryの公式ホームページにアクセスします。

サイトURL:http://jquery.com/download/

現在(2018年5月)の最新バージョンである「Download the compressed, production jQuery 3.3.1」をダウンロードします。

「古いブラウザに対応させるために古いバージョンを使いたい」という要望がなければ公開されている最新バージョンを使用するのがおすすめです。

ダウンロードが完了したら、以下のコードを記述することでjQueryを使用することができます。

<script type="text/javascript" src="格納先/jquery.min.js"></script>

どちらの方法でjQueryを読み込んでも構いません。

なぜなら、表示される結果や実装される機能は同じだからです。

jQueryの記述場所

jQueryの記述場所も2つの方法があります。

・HTMLに直接記述する方法
・外部ファイルに記述して、読み込む方法

この2つの方法について説明します。

HTMLに直接記述する方法

このように記述することでHTML内に直接jQueryのコードを記述することが可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- script内にコードを記述します。 -->
</script>

基本的にHTML内に直接jQueryのコードを記述することはおすすめできません。

理由は、コードが冗長化してしまい、見直しにくく、メンテンスするのが難しくなるからです。

HTMLファイルの中にjQueryのコードが記述されていることは、あまり好ましくありません。

特別な理由がない場合は、外部ファイルからjQueryを読み込むようにしましょう。

外部ファイルに記述する方法

外部ファイルに記述したjQueryのコードを読み込むために、拡張子を「js」にしたファイルを作成します。

次に、以下のコードを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="格納先/ファイル名.js"></script>

このように記述すれば、jQueryのコードを外部ファイルに記述して読み込むことができます。

基本的には、CSSを外部ファイルから読み込む方法と同じ要領です。

注意するべきポイントは、jQueryの動作記述よりも先にjQueryを読み込むコードを記述する必要があります。

なぜなら、コードは上から順番に読み込まれていくからです。

jQueryの動作記述よりも先にjQueryを読み込むコードが記述されていなければ、正しく動作しません。

ここは、間違わないように注意しましょう。

次は実際にコードを記述していきます。

jQueryの基礎

ここまでの下準備ができたら次は、実際にjQueryのコードを記述しましょう。

jQueryの基本の形となるのが以下のコードです。

$(function(){
  //ここにjQueryのコードを記述
});

このコードはよく記述するので覚えておくのがおすすめです。

次にどのような要素にどのような処理を行うのかを指定します。

要素セレクタ
要素セレクタとは、「p」や「li」などタグと呼ばれるモノです。

以下のサンプルコードでは要素セレクタを指定して、文字色を変化させます。

$(function(){
  $("p").css("color","red");
  //pタグで囲っている文字が赤くなる。
});
$(function(){
  $("li").css("color","red");
  //liタグで囲っている文字が赤くなる。
});

idセレクタ
id属性を持つ要素を指定します。

$(function(){
  $("#sample").css("color","red");
  //sample要素の文字が赤くなる。
});

classセレクタ
class属性を持つ要素を指定します。

$(function(){
  $(".sample").css("color","red");
  //sample要素の文字が赤くなる。
});

子孫セレクタ
特定の要素を指定してスペースで区切ることで、特定の要素内にある要素を指定できます。

$(function(){
  $(".sample p").css("color","red");
  //sample要素のpタグで囲っている文字が赤くなる。
});

ユニバーサルセレクタ
「*」アスタリスクを使うことで全ての要素を指定できます。

$(function(){
  $("li *").css("color","red");
  //liタグの中にある全ての要素が赤くなる
});

このようにして、要素を指定することができます。

イベント

jQueryの中でもよく使用するのがイベントです。

イベントとは処理を実行するタイミングのことになります。

clickイベント

clickイベントとは、クリックされたときに処理をおこないます。

以下のコードがサンプルです。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココをクリックするとテキストが変化します。</a></p>

</body>
</html>

また、clickイベントとafterイベントを組み合わせることもできます。

以下のコードはクリックされるたびにテキストが追加されます。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').click(function () {
    $('p').after('追加されたテキストです。');
  });
});
</script>

<head>
<body>

<p><a href="#">ココをクリックすると新しいテキストが追加されます。</a></p>

</body>
</html>

dbclickイベント

dbclickイベントとは、ダブルクリックされたときに処理をおこないます。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').dbclick(function () {
    $(this).text("ダブルクリックされました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココをダブルクリックするとテキストが変化します。</a></p>

</body>
</html>

mouseoverイベント

mouseoverイベントは、マウスが上にのったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mouseover(function () {
    $(this).text("マウスオーバーしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

mousemoveイベント

mousemoveイベントは、マウスが移動したときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mousemove(function () {
    $(this).text("マウスアウトしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

mousedownイベント

mousedownイベントは、マウスの左右どちらかのボタンがクリックされたときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mousemove(function () {
    $(this).text("マウスアウトしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

focusイベント

focusイベントは、フォーカスが当たったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $("input").focus(function(){
    $("input").css('background-color', '#81BEF7')
  }).blur(function(){
    $("input").css('background-color', '#64FE2E')
  });
});
</script>

<style type="text/css">
input {
  width: 500px;
  height: 30px;
}
</style>

<head>
<body>

<input type="text" value="フォーカスすると背景色が変わります。">

</body>
</html>

mouseoverイベント

mouseoverイベントは、マウスが上にのったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){

  $('#sample').mouseover(function () {
    $(this).css("background-color","#81BEF7");
  });
});
</script>

<head>
<body>

<div id="sample">マウスを上にのせると背景色がかわります。</div>

</body>
</html>

また。mouseoverイベントとfadeOutイベントを組み合わせることもできます。

この両方のイベントを組み合わせると、文字の上にマウスをのせると、文字が消えてなくなります。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){

  $('#sample').mouseover(function () {
    $(this).fadeOut("slow");
  });

});
</script>

<head>
<body>

<div id="sample">マウスを上にのせると文字が消えてなくなります。</div>

</body>
</html>

このようにjQueryには、様々なイベントがあります。

イベントは、このようなモノがあります。

イベント名 処理のタイミング
click 指定した要素で左クリックしたときに処理がおこなわれる。
dblclick 指定した要素でダブルクリックときに処理がおこなわれる。
contextmenu 指定した要素で右クリックしたときに処理がおこなわれる。
mousedown 指定した要素で左もしくは右クリックしたときに処理がおこなわれる。
mouseup 指定した要素で左もしくは右ボタンが押してから離れたときに処理がおこなわれる。
mouseout 指定した要素からマウスが離れるときに処理がおこなわれる。
mouseover 指定した要素にマウスがオーバーしたときに処理がおこなわれる。
mousemove 指定した要素にマウスカーソルが動いたときに処理がおこなわれる。
scroll 画面がスクロールしたときに処理がおこなわれる。
resize ウィンドウの幅が変更したときに処理がおこなわれる。

jQueryのプラグイン

プラグインとは、拡張機能になります。

プラグインを導入することで、すぐに簡単に高機能なシステムを実装することが可能です。

ここでは、おすすめのプラグインを紹介します。

Masonry

Javascript・JQueryプラグイン
ウィンドウ幅に合わせてコンテンツが移動するプラグインです。

コンテンツをウィンドウいっぱいに敷き詰めたいという人におすすめのプラグイン。

海外風のおしゃれなデザインを実装したい人におすすめです。

サイトURL:https://masonry.desandro.com/

jQuery.heightLine.js

Javascript・JQueryプラグイン
レスポンシブサイトの要素の高さを自動的に調整してくれるプラグインです。

パソコン・スマホ・タブレットなどのデバイスに対応しています。

サイトURL:https://github.com/to-r/jquery.heightLine.js

Vegas

Javascript・JQueryプラグイン
背景に動画や画像を表示させ、スライドショーのように見せることができるプラグインです。

スライドの動きを自由に設定することもできます。

また、使用する画像や動画にエフェクトも適用できます。

様々な形でスライドを実装できるのがこのプラグインの魅力です。

サイトURL:http://vegas.jaysalvat.com/

ScrollMagic

Javascript・JQueryプラグイン
特定の位置までスクロールしたら、プログラムした動作するプラグインです。

汎用性が高く、このプラグインを利用している人も多くいます。

スクロール系のプラグインを使用したい人におすすめです。

サイトURL:http://scrollmagic.io/

smoothScroll

Javascript・JQueryプラグイン
リンクをクリックすると、そのリンク先までスクロールして移動するプラグインです。

最近はスマホに最適化したWEBサイトが増えてきており、レイアウトを1カラムにしているところが多くなっています。

1カラムのWEBサイトでよく使用されているのが、このプラグインです。

そのような、WEBサイトでリンクをクリックするとリンクの飛び先まで自動的にスクロールされるようになっていることが多くなっています。

おそらく、皆さんも1度は経験したことがあると思います。

そのような機能を実装したいときに、このプラグインを利用しましょう。

サイトURL:https://github.com/cferdinandi/smooth-scroll

Infinite Scroll

JQueryプラグイン
ページの一番最後までスクロールすると、次のページを自動的に読み込んでくれるプラグインです。

このプラグインを導入すれば、ページネーションを設定する必要がなくなります。

次のページに推移するために、ボタンをクリックする必要がなくなるので、ユーザービリティもアップするのがメリットです。

ツイッター、インスタグラムなどのSNSもこのような仕様になっています。

サイトURL:https://infinite-scroll.com/

bxSlider

JQueryプラグイン
画像をスライドさせるためのプラグインです。

画像の左右に矢印が表示され、クリックすると別の画像が表示されます。

もちろん、レスポンシブサイトにも対応しているので、パソコン・スマホ・タブレットでそれぞれのウィンドウ幅に合った画像が表示されます。

画像をスライド形式で表示させたい場合におすすめのプラグインです。

サイトURL:https://bxslider.com/

Slider Pro

JQueryプラグイン
表示時間、スライドのスピード、矢印の表示の有無など細かいところまで設定できるスライド系のプラグインです。

細かいところまでオプションで設定できるので、自分の好みに合った高機能なスライドを実装できます。

スライドの表示にこだわりたい人は、このプラグインがおすすめです。

サイトURL:http://bqworks.com/slider-pro/

jQueryTween

JQueryプラグイン
アニメーションのプラグインは、jQueryTweenと呼ばれるほど人気のあるプラグインです。

変形、回転、移動など基本的な動作も実装できます。

また、そのような動作を細かいところまで設定できるので、自分のイメージした動作を実現することが可能です。

動作も安定しており、スピードも速いのがこのプラグインが支持されている理由です。

サイトURL:https://greensock.com/tweenmax

Velicity.js

JQueryプラグイン
動作が軽く、jQueryTweenよりも使いやすいのがこのプラグインの特徴です。

jQueryTweenよりも簡単なので、学習コストが低いのがこのプラグインの優位点になります。

このプラグインもアニメーション系の中で人気があります。

サイトURL:http://velocityjs.org/

ArtDesign Radio CheckBox

JQueryプラグイン
チェックボックスやラジオボタンを簡単に実装できるプラグインです。

入力フォームにチェックボックスやラジオボタン実装するときにも使用できます。

入力フォームを作成する予定のある人におすすめです。

サイトURL:https://plugins.jquery.com/jQuery-ArtDesign-Radio-CheckBox/

maskMoney

JQueryプラグイン
入力された金額を自動的に3桁ごとにコンマで区切ってくれるプラグインです。

入力フォームに金額を入力する欄があるなら、このプラグインを使用するのがおすすめ。

金額にコンマを付けるだけでユーザービリティが上がります。

サイトURL:https://github.com/plentz/jquery-maskmoney

jsSocials

JQueryプラグイン
SNSのシェアボタンを設置できるプラグインです。

ツイッター、フェイスブック、はてなブックマークなど各SNSアイコンを配置することができます。

簡単に拡散できるようになれば、WEBサイトをより多くの人に知ってもらえるチャンスが増えます。

WEBサイトの知名度を上げるためには、Googleからの検索だけでは不十分です。

SNSを活用して多くの人に拡散してもらうことが重要です。

知名度を上げるためには、このプラグインを導入することをおすすめします。

サイトURL: http://js-socials.com/

jScrollPanel

JQueryプラグイン
設定したツイッターアカウントのつぶやきをWEBサイトに表示されるプラグインです。

レイアウトなどはCSSで調節することができ、使用するWEBサイトに合わせてデザインを整えることができます。

個人ブログや企業のホームページでもこのような仕様を採用しいているところが多くなっています。

ツイッターを活用している人におすすめのプラグインです。

サイトURL:https://tutorialzine.com/2009/10/jquery-twitter-ticker

Freewall

JQueryプラグイン
フレキシブルなレイアウトができるプラグインがFreewallです。

特に優れているのが、アニメーションを使ったデザインを実装できることです。

IEもサポートしているなど、汎用性の高いプラグインになります。

サイトURL:https://kombai.github.io/freewall/

Slidebars

JQueryプラグイン
スマホが普及して、レスポンシブ対応のWEBサイトが多くなるにつれ、多く採用されるようになったレイアウトがサイドバーです。

ボタンをクリックすることで、サイドバーを表示させることができます。

常にサイドバーを表示させているわけではないので、スッキリとしたレイアウトにすることができます。

サイトURL:https://www.adchsm.com/slidebars/

ZooMove

JQueryプラグイン
マウスオーバーすると表示されている画像が大きく表示することができます。

クリックせずに画像を拡大できるのが、このプラグインのメリットです。

手軽に実装できるので、画像を簡単に拡大表示させたい人におすすめ。

サイトURL:http://www.emersonthompson.com.br/

Turntable.js

JQueryプラグイン
「商品を360度全方位で表示させたい」と思ったことはありませんか。

そんなときに使用できるのがこのプラグインです。

このプラグインはとても動作が軽く、表示が重たくならないのがメリットになります。

これほど滑らかにが映像が360度表示されるプラグインは他にありません。

サイトURL:https://github.com/polarnotion/turntable/

jquery.email-autocomplete.js

JQueryプラグイン
入力フォームをWEBサイトに掲載する場合に、おすすめなのがこのプラグインです。

このプラグインはメールアドレスの入力を補完する機能になります。

補完したいメールアドレスのドメインをあらかじめ設定しておくことで、対応するドメインを自動的に補完してくれます。

ユーザーの入力ミスを事前に防ぐことができ、ユーザービリティもアップするびがメリットです。

入力フォームはコンバージョンや売り上げを大きく左右する重要な部分になります。

このプラグインを導入して、ワンランク上の入力フォームを実装しましょう。

サイトURL:https://github.com/10w042/email-autocomplete

jQuery Knob

JQueryプラグイン
jQuery Knobhは、ホイール型のスライダーを実装することができるプラグインです。

細かいところまでホイールの数値を設定できます。

また、CSSでデザインを変えることも可能です。

ホイール型のスライダーを実装することでデザイン性がグンっとアップするので導入してみてはいかがでしょうか。

サイトURL:http://anthonyterrien.com/knob/

まとめ

いかがでしたか。今回はjQueryの基本的な使い方から便利なプラグインなどを紹介しました。

jQueryを使用することで、ユーザービリティやデザイン性がアップします。

美しいWEBサイトを制作するためには、JQueryが必要です。

ぜひ、この機械にJQueryをマスターしてください。