この記事の目次
完成予想図
まずは完成したコーディングはこちら。
<head></head>タグのhtmlコーディング
編集画面を「index.html」のタブに切り替えましょう。
また、「html02」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。
またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。
必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう
外部ファイルを読み込むhtmlコーディング
ではメイン画像のブロックの代替でスライドショー表示させる実装を行うため、
外部のCSSファイルやJavaScriptファイルを読み込んでおきましょう。
簡単にスライドショーを実装するには外部のプラグインを使用するのが最も簡単です。
今回はスライドショーを実装する際に世界中で使用されている無料プラグイン「slick.js」を使用します。
slick – the last carousel you’ll ever need (kenwheeler.github.io)
プラグインの導入は以下のページが分かりやすいです。
slickのcssファイルを読み込む。
- 7行目の<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css”>の下を改行する。
- ハイライトされている8～9行目の内容を記述する。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<title>LEVEL NORMAL</title>
<!-- 下部省略 -->slickのjavascriptファイルを読み込む。
- 12行目の<script src=”https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js”></script>の下を改行する。
- ハイライトされている13行目の内容を記述する。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<title>LEVEL NORMAL</title>
<!-- 下部省略 -->ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
この時点では外部からファイルを読み込んで使用するための準備を行っただけですので、
特に変化はありませんね。
<main></main>タグのhtml・cssコーディング
<div id=”mainimg”></div>タグのhtmlコーディング
今回はメイン画像を削除して、代替えでスライドショーを表示するコーディングですよね。
コード上でも<div id=”mainimg”></div>の記述を丸ごと書き換えてあげましょう。
- 23行目の <div id=”mainimg”><img src=”img/mainimg.jpg” alt=””></div>を丸ごと削除する。
- 削除した23行目にハイライトされている23～29行目の内容を記述する。
index.html
<!-- 上部省略 -->
</header>
<main>
<div id="mainimg">
<ul class="slider wrapper">
<li><img src="img/slider/img01.jpg" alt="犬"></li>
<li><img src="img/slider/img02.jpg" alt="猿"></li>
<li><img src="img/slider/img03.jpg" alt="雉"></li>
</ul>
<!-- / #mainimg --></div>
<article class="wrapper">
<!-- 下部省略 -->ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
画像が縦に並んでいますよね？ここからスライドショーに変更していきましょう。
main #mainimg ul.slider li {}のcssコーディング
編集画面を「main.css」に切り替えてください。
動作させるスライドショーに関する記述を追記しましょう。
- 「main #mainimg {～}」および「@media screen and (max-width: 768px) {〜}」の間を改行する。
- ハイライトされている80～83・85～89行目の内容を記述する。
main.css
/* 上部省略 */
main #mainimg {
width: 100%;
margin-bottom: 100px;
}
main #mainimg ul.slider li {
aspect-ratio: 16 / 9; /* 画像ボックスの縦横比率を16:9 */
max-height: 400px;/* 高さが大きくなりすぎないように最大値を400pxに指定 */
}
main #mainimg ul.slider li img {
width: 100%; /* 画像の横幅を画像ボックスの横幅いっぱいに */
height: 100%; /* 画像の高さを画像ボックスの高さいっぱいに */
object-fit: cover; /* 画像自体の表示を画像ボックス内ではみ出させ、はみ出した分をトリミング */
}
@media screen and (max-width: 768px) {
main article {
padding: 0 30px;
}
}
/* 下部省略 */aspect-ratioとobject-fitで画像をブロックのサイズでトリミングする併せ技
LEVEL EASYのコーディングの「PROFILE」のcss記述の際に出てきた、
「aspect-ratio: 1 / 1; = 画像ボックスの縦横比率を1×1に」および、
「object-fit: cover; = 画像自体の表示を画像ボックス内ではみ出させ、はみ出した分をトリミング」の併せ技を再び使い、
今度はスライド画像のサイズを一定にしています。
これにより画像のサイズ、特に高さがバラバラになることもなく、綺麗に表示されます。
max-height: 400px; = 高さが大きくなりすぎないように最大値を400pxに指定
１点、「main #mainimg ul.slider li {}」で縦横比を「16 ： 9」にしていることで、
モニターサイズによっては画像の高さが大きくなりすぎる可能性があります。
Google Chromeの開発者ツールで「ul」の「max-width: 1024px;」と、
「li」の「max-height: 400px;」のチェックを外してみると状態がわかると思います。
今回のように「aspect-ratio: 16 / 9;」と指定した場合、
画面の横幅「1920px」であれば、高さ「1080px」の画像が表示されてしまい、
画面全体を覆いつくしてしまうほど大きな画像スライドショーになります。
全画面表示のWebサイトならそれでいいのですが、今回はそうではありません。
そのため「max-height」プロパティを使い画像の高さの上限を決めておき、
大きくなりすぎないように予防策を施しています。
ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
それぞれの画像が高さの上限の400pxを守りつつ、16:9の比率の状態で表示されていますね。
前回のドロワーメニュー同様に、htmlへの記述追加でJavaScript発動指示を行いましょう。
<body></body>タグのhtmlコーディング
<script></scriptタグを追加するhtmlコーディング
スライドショーの実装の準備は整いました。
あとは「発動命令」をだすだけです。前回ドロワーメニューの際に記述したコードの下に、
スライドショーの発動命令を追記しましょう。
- ドロワーメニューで使用した「$(document).ready(function () {～}」の記述の下を改行する。
- ハイライトされている80～83行目の内容を記述する。
index.html
<!-- 上部省略 -->
<script>
$(document).ready(function () {
$('.drawer').drawer();
});
$('.slider').slick({
autoplay: true,
dots: true,
});
</script>
</body>
</html>ブラウザで確認する
書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
スライドショーは動いていますか？
余裕のある人は動き方や矢印の表示などのオプションの設定を調整してみましょう。
色々な動きがあって楽しいよ！下記のページがオプション変更方法の参考になると思います。
LEVEL NORMALのコーディング完成
お疲れ様でした！
LEVEL NORMALはこれにて完成です。
いかがでしたか？
JavaScriptを使ったハンバーガーメニューとドロワーメニュー、
そしてスライドショーなどの実装は、数行程度の追加や書き換えでできるため簡単ですし、
レスポンシブWebデザインでのスマホ対応は「PC表示の指定をスマホ表示では打ち消す」
という原理さえわかれば難しくないと思います。
もっともっと動きさえも洗練されデザインされたWebサイトをコーディングしたいという場合は、
相談に応じます。もっと上を目指してみましょう。
