JavaScriptとは
JavaScript は Webページに動きをつけるのに用いる言語で、クリックやタップ時のページ上の挙動の制御やアニメーションの実行、フォームのエラーチェックなどで活躍します
jQueryとは
jQueryとは、JavaScript用のライブラリです。特定の動作があらかじめ簡単に作れるように処理がまとめられています。
ライセンスは、MIT Licenseとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することができます。
jQueryのメリットは下記の2つです。
・ソースコードを短く記述できる
・ブラウザ間の差異を吸収
jQueryプラグインとは
jQueryプラグインとは、jQueryと一緒に利用するJavaScriptライブラリーのことです。
jQueryは簡単な記述で利用できますが、jQueryプラグインを使うとより手軽に、Webサイトにさまざまな効果を付けられます。
現在2,500以上のプラグインがリリースされており、多くの web サイトでプラグインが活用されています。
このサイトではWebページに画像スライドショーを貼り付けられるjQueryプラグイン「FlexSlider」を使用しています。これを使いトップページの背景画像を数秒おきに切り替えています。
jQueryプラグインの使い方
jQueryプラグイン「FlexSlider」の設置方法をここでは説明します。
1) jQuery本体をHTMLに読み込みます
HTMLの<head>〜</head>の間に下記コードを追加します。
jquery-migrate.min.jsは、jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。
<script type='text/javascript' src='js/jquery/jquery.js?ver=1.12.4'> <script type='text/javascript' src='js/jquery/jquery-migrate.min.js?ver=1.4.1'>
2)jQueryプラグインのjs
HTMLの<head>〜</head>の間に下記コードを追加します。
<script type="text/javascript" src="js/jquery.flexslider-min.js">
3) jQueryプラグインのCSSを読み込みます
HTMLの＜head＞〜＜/head＞の間、「2)jQueryプラグインのjs」の下に下記コードを追加します。
<link href="js/flexslider.css" rel="stylesheet" type="text/css" />
4) HTMLのコードを追加します。
HTMLファイルの表示させる箇所に下記のスライドショーのHTMLタグを追加します。
<div class="flexslider">
<ul class="slides">
<!-- クラス名は slides -->
<li><img src="slide1.jpg" /></li>
<li><img src="slide2.jpg" /></li>
<li><img src="slide3.jpg" /></li>
</ul>
</div>
5) JavaScriptのコードを追加します。
HTMLの〜の間、「3)jQueryプラグインのCSS」の下に下記コードを追加します。
$(document).ready(function(){
$('.flexslider').flexslider();
});
この記事へのコメントはありません。