シングルページサイト - 実践 - WEB制作の備忘録

シングルページサイトをつくる

メインビジュアルをヒーローヘッダーでbxsliderを使用
VIDEO部分にmp4データを設置
NEWS部分をjQuery / ajaxを使用して外部データを読み込む
MENU部分にjQuery / モーダルウィンドウを設置
ACCESS部分にGoogleMapを設置
INFO部分にGoogleAPIを使用してお問い合わせフォームを設置
SP表示の時にスムーススクロールでトップに戻るボタンを設置

実践

例

f:id:hak00810:20210214151634j:plain 　 f:id:hak00810:20210214151558j:plain

解答

デモページ

ポイント

bxsliderを設置して、ヒーローヘッダーにカスタマイズ

＜HTML＞

head内にbxsliderのCSS（CDN）を記述します。
bxsliderのCSSの下に、カスタマイズ用のstyle.cssを記述します。
/bodyの手前にjQueryとbxsliderの.js（CDN）を記述します。
- CDN＝Content Delivery Network：ネットワーク経由でコンテンツを提供できるサービス
bxsliderの.jsの下に、その他まとめ用のscript.jsを記述します。
imgを囲う要素divにclass="bxslider"を記述します。
- 直接囲う要素は、liのときはulの場合もあります。

〜
<head>
〜
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
〜
</head>
<body>
〜
<div class="key-visual bxslider">
<p><img src="img/slide01.jpg" alt=""></p>
<p><img src="img/slide02.jpg" alt=""></p>
<p><img src="img/slide03.jpg" alt=""></p>
<p><img src="img/slide04.jpg" alt=""></p>
<p><img src="img/slide05.jpg" alt=""></p>
</div>
〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script src="js/script.js"></script>
</body>
〜

＜style.css＞

ヒーローヘッダーとして使用するためのカスタマイズを記述します。
- ブラウザの「要素の検証」を使用して、クラス名や要素の変更をします。

/* bxslider */
.bxslider img {
  object-fit: cover;/* 画像の縦横比を維持。縦横のうち小さい方を基準にして自動的に拡大・縮小。ボックスからはみ出した部分はトリミングされる */
  object-position: center center;
  width: 100vw;
  height: 100vh;
}
.bx-wrapper {
  border: none;/* スライダーの枠線を消す */
  margin-bottom: 0;/* 余白を消す */
}

＜script.js＞

$(function(){
  //bxslider
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,//スライダー下の点を消す
  });
});

mp4がiPhoneで再生できない対処

iPhoneのSafari / Chromeで再生できなかったので、通常の記述から変更しました。

＜HTML＞

<div class="box" id="video">
<h2>VIDEO</h2>
<div class="video-inner">
<!--<video src="img/Restaurant-1192_rs.mp4" autoplay muted loop></video> iPhoneで再生できない-->
<video autoplay loop muted poster="img/Restaurant-1192_rs.jpg" playsinline><source src="img/Restaurant-1192_rs.mp4"></video>
</div>
</div><!-- /#video -->

jQuery / ajax

Ajax＝Asynchronous JavaScript ＋XML
非同期通信。JavaScriptとXMLを使用して非同期（リロードせず）にサーバとの間の通信を行うことができます。
- ただし、ドメインが異なる場合はできません。

＜HTML＞

head内に、カスタマイズ用のstyle.cssを記述します。
/bodyの手前にjQueryの.js（CDN）を記述します。
jQueryの.jsの下に、その他まとめ用のscript.jsを記述します。

〜
<head>
〜
<link rel="stylesheet" href="css/style.css">
〜
</head>
<body>
〜
<div class="box" id="news">
<h2>NEWS</h2>
<dl class="news-list" id="list-box">
</dl>
</div><!-- /#NEWS -->
〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
〜

＜style.css＞

/* news */
.news-list {
  max-width: 800px;
  margin: 0 auto 30px;
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 30%;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--main-color);
  display: none;
}
dd {
  width: 70%;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 10px;
  display: none;
}
dt:nth-of-type(-n+4) {
  display: block;
}
dd:nth-of-type(-n+4) {
  display: block;
}
〜
@media screen and (max-width: 767px) {
〜
  /* news */
  .news-list {
    margin: 2%;
  }
〜
}

＜script.js＞

$(function(){
  //news
  //$.ajaxを使用した非同期通信
  $.ajax({
    url: 'news.txt',
    dataType: 'text',
    success: function(data){
      $('#list-box').html(data);
    },
    error: function(data){
      alert('error');
    }
  });
});

jQuery / モーダルウィンドウをcolorboxで設置

www.jacklmoore.com
f:id:hak00810:20210215113434p:plain

リンク先のView Demos確認し、1〜5のなかで自分の使用したいものを決めます。▶︎今回は2を使用します。
Downloadをクリックしてファイルをダウンロードします。
colorbox-master.zipを解凍し、フォルダexample2（View Demosの番号に対応）からcolorbox.cssとフォルダimagesをコピペします。
- 今回のように、自分の作成したフォルダimgのなかにimages内のcontrols.pngをloading.gifを入れる場合は、colorbox.cssのパス（画像の位置）を変更しなければなりません。

＜HTML＞

head内にcolorboxのCSS（ダウンロード）を記述します。
colorboxのCSSの下に、カスタマイズ用のstyle.cssを記述します。
/bodyの手前にjQueryとcolorboxの.js（CDN）を記述します。
colorboxの.jsの下に、その他まとめ用のscript.jsを記述します。
aにclass="colorbox"を記述します。
- ポップアップしたときにタイトル文字を表示させたい場合は、title=" "に記述します。

〜
<head>
〜
<link rel="stylesheet" href="css/colorbox.css" />
<link rel="stylesheet" href="css/style.css">
〜
</head>
<body>
〜
<div class="box" id="menu">
<h2>MENU</h2>
<div class="menu-inner">
  <p><a class="colorbox" href="img/menu01.jpg" title="Side Dish ▷ マッシュルームサラダ"><img src="img/menu01.jpg" alt=""><br>Side Dish</a></p>
  <p><a class="colorbox" href="img/menu02.jpg" title="Main Dish ▷ 魚のムニエル"><img src="img/menu02.jpg" alt=""><br>Main Dish</a></p>
  <p><a class="colorbox" href="img/menu03.jpg" title="Beverage"><img src="img/menu03.jpg" alt=""><br>Beverage</a></p>
</div>
</div><!-- /#menu -->
〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script src="js/script.js"></script>
</body>
〜

＜style.css＞

colorboxが提供するスタイル1〜5の中で、選んだ2にはタイトルがなかったので、表示させるようにカスタマイズを加えます。
- ブラウザの「要素の検証」を使用して、クラス名や要素の変更をします。

/* colorbox */
#cboxCurrent {
  top: -14px;
  right: 74px;
  text-indent: 0;
  color: #666;
  font-size: .8rem;
}
〜
@media screen and (max-width: 767px) {
〜
  /* colorbox */
  #cboxCurrent {
   font-size: 1.2rem;
  }
  #cboxTitle {
    top: -30px;
  }
〜
}

＜script.js＞

$(function(){
  //colorbox
  $('.colorbox').colorbox({
    rel: 'colorbox',//グループ化
    maxWidth: "90%",//レスポンシブ化
    maxHeight: "90%"//レスポンシブ化
  });
});

＜参考サイト＞

yachin29.hatenablog.com
www.webcreatorbox.com
yachin29.hatenablog.com
deep-space.blue
gashubq.com
tech.jastin.net
webdesignmagazine.net
yachin29.hatenablog.comblog.hubspot.jp
aprico-media.com