[コーディングの実践]LEVEL NORMAL

画像のダウンロード

完成予想図を確認すると、3点の画像がループで表示されているのが分かります。
まずはこれらの画像をダウンロードし、フォルダ操作ですべて「html02/images」フォルダに移動しましょう。
以下の3点のURLを全て「右クリック>名前を付けてリンクを保存」して画像を保存しましょう。
※ID・PASSはいつものです。

1. 犬
2. 猿
3. 雉

フォルダの構成は以下を確認してください。

html02フォルダ構成

フォルダ構成どおりに画像をフォルダ移動できたら準備完了です。

headセクションへのhtmlコーディング

今回はスライドショーを実装するためにJavaScriptのライブラリであるjQueryのプラグインを使用します。
編集画面を「index.html」のタブに切り替えましょう。

なおjQueryおよびプラグインに関しては以下の記事を参考にしてください。

[コーディングの応用] JavaScriptライブラリ「jQuery」とは?よく使うjQueryプラグインの紹介

完成予想図の再確認

完成予想図を再度確認しスライドショーの状態を確認しましょう。

LEVEL NORMAL

head内にコピペで外部cssファイルを読み込む

まずはjQueryプラグイン「slick」を動かすための外部cssファイルの読み込みを行います。
以下の手順でプラグインの見た目を整える2種類のcssファイルの追記を行いましょう。

コピー元コード

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

1. 上記コピー元コードをコピーCtrl + Cする。
2. 「style.css」を読み込んでいる次の行を改行して❶でコピーしたコードをペーストする。
3. ❷でペーストしたコードをドラッグで複数選択し、[Tab]キーで行頭を揃える。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。

head内にコピペで外部JavaScriptファイルを読み込む

次はスライドショーの動きをページで有効にするため外部JavaScriptファイルの読み込みを行います。
以下の手順で1種類のJavaScriptの追記を行いましょう。

コピー元コード

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

1. 上記コピー元コードをコピーCtrl + Cする。
2. 「<meta charset=”UTF-8″>」の記述の上の行を改行して❶でコピーしたコードをペーストする。
3. ❷でペーストしたコードを選択し、[Tab]キーで行頭を揃える。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。

bodyセクションへのスライドショーのためのhtmlコーディング

div#mainimgタグを丸ごと削除する

スライドショーを表示するのは現在メイン画像があるdiv#mainimgの位置です。
以下の手順でdiv#mainimgのブロックを一旦削除しましょう。

1. <div id=”mainimg”>～</div>の記述をドラッグして全て選択する。
2. キーボード[Delete]で削除する。
3. index.htmlを上書き保存Ctrl + Sする。
4. コード記述・展開前および展開後を確認する。
5. ブラウザでメイン画像が消えたか確認する。

div#mainimgタグ内にスライドショーの画像リストを作る

先ほど削除したスペースにスライドショー用のコードを記述しましょう。
通常なら複数行の記述が必要ですが、以下の手順でEmmetを使って1行で記述してしまいましょう。

1. 先ほど削除した<div id=”mainimg”></div>の箇所にカーソルを合わせ、
   以下の②の文字列を打ち込んで行末で[Tab]キーを押し、開始タグと終了タグの間を改行する。
2. #mainimg>ul.slider>li*3>img[src=./images/img0$.jpg][Tab]
3. 展開されたそれぞれのimgタグのalt属性の属性値をそれぞれ「犬」「猿」「雉」と記述する。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。
6. ブラウザで画像が3点表示されているか確認する。

>

Emmet記法にある「>」は親子関係を作りつつタグを展開する際に使用します。
今回のように「#mainimg>ul.slider>li*3>img[src=./images/img0$.jpg]」という記述の場合、
「div#mainimgタグの子要素にul.sliderタグ、さらに子要素にliタグを、さらに要素にimgタグを展開」という意味です。

li*3

Emmet記法にある「ul.slider>li*3」とは「liタグをx3回記述する」という記述の仕方です。5回なら「*5」、10回なら「*10」と、展開する要素数を「*」を使って操作することができます。

img0$.jpg

Emmet記法にある「$」とは連番の付与で、$を記述したところに1～の数字が連番で付与されます。
今回のように親要素のliタグの要素数が3の場合は「img01.jpg・img02.jpg・img03.jpg」が展開されます。
要素数5なら「img01.jpg～img05.jpg」が、要素数15回なら「img01.jpg～img015.jpg」と展開されます。
※桁を揃えたい場合は$の連続で記述する・・・例)2桁は$$、3桁は$$$

scriptタグ内の記述のインデント位置の整理をする

ドロワーメニューはbodyタグの終了タグ直前に記述したscriptタグ内に発動の命令を行いましたね。
スライドショーでも同じようにscriptタグ内に記述を行って動きを作ります。
まずは読みやすくするため、以下の手順で文頭をインデントしましょう。

1. ドロワーメニューの際にコピペした「$(‘.drawer’).drawer();」を選択し、[Tab]キーで行頭を揃える。
2. index.htmlを上書き保存Ctrl + Sする。
3. コード記述・展開前および展開後を確認する。

scriptタグにjavascriptを動かす命令を追加記述する

インデントしたことにより記述の管理がしやすくなりました。
最後に以下の手順でスライドショーが動くための箇所と動きの指定を行いましょう。

コピー元コード

$('.slider').slick({
  autoplay: true,
  speed: 500,
  dots: true
});

1. 上記コピー元コードをコピーCtrl + Cする。
2. 「$(‘.drawer’).drawer();」の記述を改行して❶でコピーしたコードをペーストする。
3. ❷でペーストしたコードをドラッグで複数選択し、[Tab]キーで行頭を揃える。
4. index.htmlを上書き保存Ctrl + Sする。
5. コード記述・展開前および展開後を確認する。
6. ブラウザでスライドショーが動いているか確認する。

スライドショーが動いていれば実装は完了です!
これで、スマホ対応およびスライドショー実装の知識を身に付けることができました!

違和感を放置せず解決する意思を持つ人

さて、実はついさっき完成させたこのページはとりあえずの完成として考えてください。
スマホサイズで表示した際にドロワーメニューのボタン表示位置がおかしいことに気が付いたでしょうか・・・??
実はこの原因は「スライドショーのプラグインとの相性の悪さ」に起因します。

解決するにはどうすればよいでしょうか・・・??ヒントは「プラグイン同士にも相性がある」ことです。
この違和感を放置せず解決する意思を持つ人はコーディングでもプログラミングでも大いに上達しますよ。