fammレッスンで作成したSOLEILの拡張版の作り方を解説します。
素材のダウンロード
この解説講座用の素材を用意しましたので、こちらからダウンロードしましょう。
今回勉強すること
SOLEIL追加版で追加されている項目は下記のとおりです。全体的におおまかに解説しますが「実習」と書いてある項目は実際に手を動かしてみましょう。
- PCの横並びメニュー、hover動作
- スライダーの画像をスマホとPCで出し分ける → 実習あり
- スライダーに矢印をつける
- スライダーのドットを大きくして色を変更する
- キャンペーンの項目をつける（画像を背景に置くサンプル）
- 問合せフォームの設置（動作はしません）
- フッターにナビゲーション（メニュー）をつける
- 画面右下にトップへ戻るボタンを配置
- Googleマップの埋め込みとレスポンシブ対応 → 実習あり
- スマホ版ハンバーガーメニュー（別名：ドロワー）を設置 → 実習あり
画像の出し分け
画像のレスポンシブ化とも言われます。
画像を画面サイズに応じて出し分ける方法です。
まず、あらかじめPC用とスマホ用でそれぞれ大きさの違う画像を用意しておきます。ここでは、スマホは縦長の画面なので、縦に少し長い画像、PCは横長の画像することが多いです。
pictureタグ、sourceタグ、imgタグを用いて出し分けを記載します。
<picture>
<source media="(min-width: 768px)" srcset="横幅768px以上の時に出る画像">
<img src="横幅768px未満の時の画像" alt="女性がヨガをしている画像">
</picture>3枚以上を出し分けることもできます。
<picture>
<source media="(min-width: 1024px)" srcset="横幅1024px以上の時に出る画像のパス">
<source media="(min-width: 768px)" srcset="横幅768px以上の時に出る画像のパス">
<img src="横幅768px未満の時の画像のパス" alt="女性がヨガをしている画像">
</picture>今回は特に学習しませんが、imgではなく、CSSで背景画像を指定している場合にはそのままメディアクエリを使って出し分けましょう。
CSSのdisplayプロパティを使って出し分けることもできますが、この方法では、表示されていない方の画像は「画像が読み込まれる（サーバーから送られてくる）けれども表示されていない」という状態になります。それに対して、picture要素は、表示されない方の画像は読み込まれません。表示されていない無駄なファイルが増えると表示遅延の原因になりますので、できるだけpicture要素を使いましょう。
地図
Googleマップをサイトに埋め込みます。こちらの場所の地図をサイトに埋め込んでみましょう。
そのままではレスポンシブにうまく対応できないので、CSSに追記が必要です。aspect-ratioプロパティが便利です。
ドロワー
ドロワー（ハンバーガーメニュー）を実装しましょう。
drawer.jsというjQeuryプラグインを使用します。公式サイト
1. 必要なファイルを読み込みます。すべてCDNです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<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>2. メニュー部分のHTMLを準備します。公式サイトから必要な個所だけコピーし、中身のメニューを今回のサイト用に書き換えましょう。
3. bodyタグに必要なクラスをつけます
<body class="drawer drawer--right">