ウェブデザイン演習第11回

2022.12.06
ウェブデザイン演習

前回は<nav></nav>セクションと<footer></footer>セクションのコーディングを行いました。

今回はJavaScriptという「アニメーションなどの動きを制御する言語ファイル」を使った簡単なスライドショーの実装を行います。今回は前々回・前回と同様に画像アセットを使った画像の書き出しを行いましょう。

皆さんも目にしたことがあると思いますが、JavaScriptが使われている代表的なものは、複数枚の画像を切り替えるスライドショーや、画像をクリックした時に画像が拡大されるポップアップの機能などがあります。

この記事の目次

1 画像アセットで<div id=”slider”></div>の画像を書き出す
2 画像アセットで<div id=”main”></div>の画像を書き出す
3 jQueryを使ったスライドショーの設置・設定

画像アセットで<div id=”slider”></div>の画像を書き出す

今回も「画像アセット」機能を使って、<div id=”slider”></div>セクションでスライドショーを行う画像の書き出しを行おうと思います。まずはPSDファイルをダブルクリックしてPhotoshopで開きます。

レイヤーパネルを開く

まずレイヤーパネルを開きます。今回は<div id=”slider”></div>の画像を書き出すのでレイヤーパネルの「slider」フォルダを開きましょう。

「slider」フォルダ

レイヤーに拡張子付きの名前をつける

次に書き出す対象のレイヤーに名前をつけます。

<div id=”slider”></div>のスライドする画像「img_01.jpg」「img_02.jpg」「img_03.jpg」

今回は<div id=”slider”></div>のスライドする画像を書き出します。
「slider」フォルダの中の「img_xx」と名前の付いた3つのレイヤーを、
それぞれ以下のように書き換えてください。

「slider」フォルダ内の「img_xx」レイヤーを「slider/img_xx.jpg」に書き換える

変更前「img_01」「img_02」「img_03」

変更後「slider/img_01.jpg」「slider/img_02.jpg」「slider/img_03.jpg」

今回は「slider/」という文字がつきました。この作業だけで「slider」というフォルダが自動的に生成され、そのフォルダ内に画像が書き出されます。

htmlフォルダにそのまま移動する

早速書き出した画像を確認してみましょう。
作業したPSDを上書き保存し、書き出し先の「WebDesignExercise01-assets」というフォルダに「slider」というフォルダ、さらに「img_01.jpg」「img_02.jpg」「img_03.jpg」という画像があるかどうかを確認します。

確認後、フォルダ構成が正しければ、そのまま「html」フォルダの中の「img」フォルダに「slider」フォルダごと移動してしまいましょう。

構成の確認

以下にフォルダ・ファイルの構成を明記しておきます。

どうでしょうか？？できましたか？？

画像アセットで<div id=”main”></div>の画像を書き出す

まだコーディングをしていない部分ですが、<article></article>セクションの本文部分には<div id=”main”></div>というブロックを用意することになります。その本文中で使用する画像の書き出しを行おうと思います。

レイヤーパネルを開く

まずレイヤーパネルの「article」フォルダを開き、さらにその中の「#main」「entry」とフォルダを開きましょう。

「article」フォルダ

レイヤーに拡張子付きの名前をつける

次に書き出す対象のレイヤーに名前をつけます。

<div id=”main”></div>のポップアップする画像「dog.jpg」

今回は<div id=”main”></div>ブロックの中の<section></section>タグに、本文の段落として<p></p>タグを追加することになります。

その段落の中に<img />タグを使って画像を読み込み、<img />タグ自体を<a></a>タグで囲うことによってリンクをつけています。リンクをクリックするとページは開かず画像が開く仕組みです。

「article」フォルダの中の「#main」フォルダの中の「entry」フォルダの中に「dog」と名前の付いたレイヤーを以下のように書き換えてください。

「entry」フォルダ内の「dog」レイヤーを「dog.jpg」に書き換える

変更前「dog」

変更後「dog.jpg」

htmlフォルダに移動する

書き出した画像を確認しましょう。作業したPSDを上書き保存してPhotoshopを終了し、書き出し先の「WebDesignExercise01-assets」というフォルダに「dog.jpg」という画像があるかどうかを確認します。

確認後、画像が存在していれば、そのまま「html」フォルダの中の「img」フォルダに「dog.jpg」を移動しましょう。

構成の確認

以下にフォルダ・ファイルの構成を明記しておきます。

これで完璧。

jQueryを使ったスライドショーの設置・設定

では早速画像のスライドショーを実装しましょう。アニメーションの動きや、クリックして動的に切り替える動きなどを実装する場合、一般的にはJavaScriptというプログラム言語を使います。

まずはスライドショーの動きの確認。

https://webcre8tor.com/data/lesson/footer_slider/

画像スライドショーが実装されていますね。今回はこれを簡単に実装します。ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。

Visual Studio Codeの起動と日本語化。

Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。まずは解説から。

jQueryとは

JavaScriptを使ってアニメーションなどの処理を行うと、何十行にも及ぶコードを記述する必要があり、初心者にはとても扱うことができません。最初の段階で自分には無理だと諦めてしまう人もいます。

コード記述に対して苦手意識を与えているのはおそらく「コード量の多さ」と「どのコードがどこを動かしているかわからない」「なぜ動かないのか」などでしょう。

それらの問題を解決するために必要なのは、記述するコードを極めて短く簡単にすることです。
そこで一般的にも広く使われている「jQuery」というライブラリを使って記述を行ってみましょう。

参考URL：jQueryとは？JavaScriptとの違いから使い方まで徹底解説【初心者向け】 | 侍エンジニアブログ

ライブラリとは、使用頻度の高い複数のプログラムを再利用しやすい形でひとまとまりにしたもので、用途に応じたプログラムを単体で使用できる状態で取り出すことができます。

さらにカスタマイズを容易にするために、本来のJavaScriptのコードと同じ動きをより短いコードで実現できるように作られており、非常に難解なプログラムを初心者でも簡単に動作させることができます。

イメージとしては「初心者に優しくて超頭のいい博士兼通訳さん」といった感じ。
これは使わない手はないね。

jQueryの読み込み

jQueryライブラリを使用するには、まずはindex.htmlにjQueryの本体を読み込まなければいけません。そこで、<head></head>セクション内にjQueryを読み込む記述を追加します。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <body>〜</body>の記述は省略 -->
</body>
</html>

jQueryプラグインの読み込み

jQuery本体とは別に、プラグインと呼ばれる機能を拡張する仕組みを使います。例えばjQuery本体はスマートフォン、プラグインはアプリと考えれば関係性がわかるかなと思います。

jQueryプラグインを読み込む際にはそのプラグイン用のCSSが必要な場合が多く、それも合わせて<head><head>セクション内か</body>直前に読み込む必要があります。

今回はbxSliderという画像のスライドショーを生成する仕組みを持つプラグインを導入します。以下のURLを開いてください。

bxSliderインストールページ：https://bxslider.com/install/

ページを開くと左側に①②③とピンクの数字があります。この記述の追記をHTMLファイルに行なうことで簡単にスライドショーを実装することができます。

index.htmlに読み込みの実行と指定を記述

では以下の記述を行います。

jquery.bxslider.jsとjquery.bxslider.cssの読み込み

まず、<link rel=”stylesheet” href=”css/main.css”>の下を1行改行し、ハイライトされている６行目のコードを記述。次に、<title>ウェブデザイン演習</title>の上に一行あけて、ハイライトされている8行目のコードを記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <body>〜</body>の記述は省略 -->
</body>
</html>

bxSliderの実行

読み込みだけだとプラグインが実行されません。実行するには対象の要素に「JavaScriptを実行しなさい」と指示する必要があります。今度は、</body>の上に一行あけ、ハイライトされている13〜21行目を記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <div id="container">〜</div>の記述は省略 -->
<script>
$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    soeed: 5000,
    pause: 5000
  });
});
</script>
</body>
</html>

index.htmlにスライドショーを表示させる記述を追加

次はスライドショーを表示させる領域を作ります。追記するのは<nav></nav>セクションと<article></article>セクションの間です。早速<nav></nav>セクションと<article></article>セクションの間を1行改行し、ハイライトされている3〜9行目のコードを記述しましょう。

index.html

<!-- 〜上部省略〜 -->
    </nav>
    <div id="slider">
      <ul class="bxslider">
        <li><img src="img/slider/img_01.jpg" /></li>
        <li><img src="img/slider/img_02.jpg" /></li>
        <li><img src="img/slider/img_03.jpg" /></li>
      </ul>
    <!-- / #slider --></div>
    <article>
<!-- 〜下部省略〜 -->

これでindex.htmlへの記述は完了。

main.cssに<div id=”slider”></div>の指定の記述を追加

最後に、たった今記述した<div id=”slider”></div>への指定をmain.cssに記述します。すでに記述されている「nav li:nth-of-type(5) a:hover」と「footer」の指定の間を1行改行し、ハイライトされている4〜8行目のコードを記述してください。

main.css

/* 上部省略 */
nav li:nth-of-type(5) a:hover {background-position: -800px -50px;}

#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

footer {
  height: 100px;
  position: absolute;/* #container内で絶対配置 */
  left: 0px;/* 左から0px */
  bottom: 0px;/* 下から0px */
  background: #5b0400;
}
/* 下部省略 */

記述が終わったら、index.htmlをブラウザで開いてスライドショーが動くかどうか確認してみてください。今回はスライドショーの実装方法の解説を行いましたが、スライドショーのプラグインは比較的初心者向けの簡単なものが多く、実装できるjQueryプラグインは星の数ほど存在します。

そのためjQueryプラグインを練習がてら使ってみるには、スライドショーのjQueryプラグインがもってこいです。要件にあったプラグインをいろいろと試してみるとWebサイト制作の経験の上ではとてもい勉強になりますよ。

WEBCRE8TOR.COM