◆20200830 課題との奮闘 osarai_plugin jQuery・プラグインを実装 （slickプラグインとか他諸々）

出来るようになったこと

○jQuery・プラグインを実装・他JSの総復習

・slickプラグインを使ったカルーセルの実装(写真をぐるぐる回して見せる機能)

おしゃれに作るならslickプラグイン

簡単なものだったら.setIntervalとfunction、配列リストで作成ができる

・日にち、時間の取得・指定の日付のカウントダウンする方法

・アクセスする度に表示する画像を変える機能

・スムーススクロール実装（ヌルヌル動く機能）

・サムネイルをクリックした時に大きな画像に切り替わるようにする機能の実装

・カーソルを画像に乗せた時に指カーソルにする

・lightboxプラグインの実装（画像をクリックすると新たなボックスで画像が表示される）

・chart.jsプラグインの実装（グラフ化。今回は棒グラフ）

・tablesorterプラグインの実装（tableの表の文字数字を入れ替える機能）

・質疑応答コーナーの回答コーナーの表示・非表示する機能の実装

・AOSプラグインの実装（簡単なアニメーション機能）→イマイチ動きが悪い？

各実装の仕方の詳細は下記のJSファイルに記述済み

今回のosarai問題は自作のHPにも実装できるのでかなり重宝する。

以下課題の指示書

以下JSファイル

// 1.slickを使って写真をぐるぐる

$(window).on('load', function () {

  // slick

  $('.eyecatch').slick({

    accessibility: true,

    adaptiveHeight: false,

    autoplay: true,//自動で再生させるか

    autoplaySpeed: 3000,//表示している時間

    arrows: true,

    prevArrow: '<img class="slick-prev" src="img/prev.png">',

    nextArrow: '<img class="slick-next" src="img/next.png">',

    centerMode: true,//画像を中央に表示させて前後の画像をチラ見させる

    centerPadding: '50%',//どれくらいチラ見させるかここで調整

    cssEase: 'ease-in',//画像切り替えのアニメーションのイージングで指定

    dots: true,//カルーセルの下にドットをつけるかどうか

    draggable: true,

    fade: false,

    slidesToShow: 1, //fade:false時のみ

    easing: 'linear',

    infinite: true,

    edgeFriction: 0.15,

    initialSlide: 0,

    lazyLoad: 'ondemand',//画像の遅延表示。'ondemand'は画像が表示されるタイミングでload処理。 

　　　　　　　　　　　　//'progressive'はバックグラウンドでload処理。

    mobileFirst: false,

    pauseOnFocus: true,//カルーセルにフォーカスがあるときに一時停止

    pauseOnHover: true,//カルーセル上にマウスががあるときに一時停止

    pauseOnDotsHover: true,

    slidesToShow: 1,

    slidesToScroll: 1,

    speed: 300,

    swipe: true,

    touchMove: true,

    variableWidth: true,

    vertical: false,

    verticalSwiping: false,

    rtl: false,

    zIndex: 1000,

  });

});

//2.クリスマスまでのカウント

// 現在の日にち

var nowDate = new Date();

var numNow = nowDate.getTime();//現在の時間をミリ秒表現

console.log(numNow);//確認用

// クリスマスの日にち

var targetDate = new Date('2020/12/25')

var numTarget = targetDate.getTime();

console.log(numTarget);//確認用

//クリスマスからあと何日か計算。結果はミリ秒単位

var diff2Dates = numTarget - numNow

console.log(diff2Dates);//確認用

// ミリ秒から月日に換算

var dDays = diff2Dates / (1000 * 60 * 60 * 24);  // 日数

// クリスマスまでの残り日数を少数点以下切り上げ

var dDays = Math.ceil(dDays)

console.log(dDays);//確認用

$('h1').html('クリスマスまで' + dDays + '日！！');

// 3.アクセスするたびに画像が切り替わる

var imgList = [

  'random01.jpg',

  'random02.jpg',

  'random03.jpg',

  'random04.jpg',

];

Math.floor(Math.random() * imgList.length)

console.log(Math.floor(Math.random() * imgList.length));//確認用

var randomImg = Math.floor(Math.random() * imgList.length);//変数をランダムに表示

console.log(imgList[randomImg]);//確認用

console.log($('p img'));//確認 場所の特定ができた

$('p img').attr('src', 'img/' + imgList[randomImg])//アクセスする度に画像変更

// $('p img')で場所の特定。+画像の取得・変更のメソッド.attr()

// 参考サイト https://into-the-program.com/attr-img-src/

// 4.smoothスクロール

$(function () {

  $('a[href^="#"]').on('click', function () {

    let headerHeight = 0; // 固定ヘッダの高さ

    let speed = 1000; // 移動スピード

    let easing = 'swing'; // 移動時の動き

    let href = $(this).attr('href');

    let target = $*1;//確認

// 0はthumb - listの最初のliをさす

$(photoList[0]).on('click', function () {

  // イベント発生

  $('.main-photo img').attr('src', 'img/big001.jpg')

  // 表示場所の決定

})

$(photoList[1]).on('click', function () {

  // イベント発生

  $('.main-photo img').attr('src', 'img/big002.jpg')

  // 表示場所の決定

})

$(photoList[2]).on('click', function () {

  // イベント発生

  $('.main-photo img').attr('src', 'img/big003.jpg')

  // 表示場所の決定

})

// 6.カーソルを乗せた時に指マークにする方法

// CSSファイルでcursor:pointer;を記述

// 7.lightboxの設置

// ①  < !--light box2-- >

//   ライトボックスのプラグイン

//→<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

// をJSファイルに記述

// ②各画像リンクタグに data - lightbox="group1～" data - title="lightbox表示画像1～"を追記

// 8.chart.jsプラグインでグラフの作成

// 参考サイト https://www.sejuku.net/blog/106690

// https://techacademy.jp/magazine/27730

// ① chart.jsのプラグイン→<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

// をJSファイルに記述

// ②HTML側で <canvas canvas id = "ID名" ></canvas>を記述

// ↑記述した場所にグラフが作成

// ③グラフを表記するための記述

// let canvas = document.getElementById('canvasのID名');

// let chart = new Chart(canvas, {

//   type: 'bar',←棒グラフを指す

//   data: mydata,←宣言した変数名その1。data:はmydataで入力した数字や文字をグラフで表す

//   options: options,←宣言した変数名その2。options:はグラフの詳細設定を表す。

// });

// 以降の記述の仕方は下記やサイトを参考に

let mydata = {

  labels: ["１月", "２月", "３月", "４月", "５月", "６月", "７月", "８月", "９月", "１０月", "１１月", "１２月"],

  datasets: [

    {

      label: 'ソート対象1', data: [300, 500, 100, 900, 700, 200, 600, 400, 800, 1000, 1200, 1100], backgroundColor: 'red'

    },

    { label: 'ソート対象2', data: [1200, 100, 1100, 700, 300, 1000, 500, 900, 200, 800, 600, 400], backgroundColor: 'green' },

    { label: 'ソート対象3', data: [700, 300, 100, 200, 900, 700, 300, 100, 200, 900, 200, 900], backgroundColor: 'blue' },

  ]

};

let options = {

  scales: {

    yAxes: [{

      ticks: {

        max: 1500

      }

    }]

  }

};

let canvas = document.getElementById('stage');

let chart = new Chart(canvas, {

  type: 'bar',

  data: mydata,

  options: options,

});

// 9.tablesorterプラグインを実装

// ①  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>

//   <script

//     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-scroller.min.js"></script>

//   <script

//     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-stickyHeaders.min.js"></script>

// をHTMLのJSファイル記述欄に記述。

// ②<!-- tablesorter -->

{/* <link rel="stylesheet" */ }

// href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css">

// をHTMLのCSSファイル記述欄に記述

// ③HTML側でtablesorterプラグインを実装したいテーブルにID名をつける

// [要注意]HTMLのtableタグ内に<thead>を記述すること。これがないと反映されない

// .tablesorterを使って下記のように記述する

// tablesorter01

$(function () {

  $('#tablesorter01').tablesorter({

    headers: {

      0: { sorter: false },

      1: { sorter: true },

      2: { sorter: true },

      3: { sorter: false },

      4: { sorter: false },

      5: { sorter: false },

      6: { sorter: false },

      7: { sorter: false },

      8: { sorter: true },

      9: { sorter: false },

      10: { sorter: false },

    },

    // 中の一部をスクロールをする方法

    // widgets: ['scroller'],

    // widgetOptions: {

    //   scroller_height: 100

    // }これは今回はなくてもいいか・・・。

  });

});

// 10と11.質問コーナーの表示非表示

$(function () {

  $('.faq-list dd').slideUp(500);

}

);

// ブラウザを表示させた時に非表示にする設定

// slideUpかhideを使うか迷った

// 初っ端から非表示も可能？

$('.faq-list dt').on('click', function () {

  $(this).next().slideToggle(500);

});

// クリックした時にその回答だけを表示

// thisを使わないと一斉に回答が表示されてしまう。

// 12.AOSプラグインの実装(全体的にうまく動作しなかった)

// ①HTMLのCSS記述欄に

// < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" >

// を記述

// ②HTMLのJS記述欄に

//   < !--aosJS -->

//   <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

//     を記述

// ③ブラウザに表示させた時の動きを設定する（下記のとおり）。（初期設定）

// ④最後に data-aos="希望したい動きのコード"

// を各動きをつけたい要素に記述する。

// ★動きの一覧★

// 参考サイト https://plasol.co.jp/blog_post/js-animation/

// ・フェード系

// fade

// fade - up

// fade - down

// fade - left

// fade - right

// fade - up - right

// fade - up - left

// fade - down - right

// fade - down - left

// ・フリップ系

// flip - up

// flip - down

// flip - left

// flip - right

// ・スライド系

// slide - up

// slide - down

// slide - left

// slide - right

// ・ズーム系

// zoom -in

//   zoom -in -up

// zoom -in -down

// zoom -in -left

// zoom -in -right

// zoom - out

// zoom - out - up

// zoom - out - down

// zoom - out - left

// zoom - out - right

$(function () {

  /*

  スクロールアニメーション：aos

  https://michalsnik.github.io/aos/

  https://github.com/michalsnik/aos#1-initialize-aos

  */

  AOS.init({

    disable: false, // アニメーションを実行しない端末（初期値：false）: 'phone', 'tablet', 'mobile', 真偽値

    offset: 120, // アニメーション実行までの距離（初期値：120）：数値

    delay: 0, // アニメーション実行までの遅延秒数（初期値：0）：0から3000ミリ秒までを50ミリ秒刻みで数値指定

    duration: 1200, // アニメーションの秒数（初期値：0）：0から3000ミリ秒までを50ミリ秒刻みで数値指定

    easing: 'ease', // イージング（初期値：'ease'）：イージングキーワードを文字列指定

    once: false, // アニメーションを1回のみにするか（初期値：'false'）：真偽値

    anchorPlacement: 'top-center', // ウィンドウのどの位置でアニメーションを開始する位置（初期値：'top-center'）：「要素の位置-ウィンドウ位置」

  });

});

alert('OK');

以下HTML

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>テンプレート</title>

  <!-- slick用 -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

  <!-- light box2 -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css">

  <!-- tablesorter -->

  <link rel="stylesheet"

    href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css">

  <!-- aos -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

  <!-- 自分用CSS -->

  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

  <!-- ヘッダー -->

  <div class="box header">

    <div class="flex">

      <div class="flex-item">

        <a href="#"><img class="logo" src="img/logo_black.png" alt="ロゴ"></a>

      </div>

      <div class="flex-item">

        <ul class="nav">

          <li><a href="#">メニュー</a></li>

          <li><a href="#">メニュー</a></li>

          <li><a href="#">メニュー</a></li>

          <li><a href="#">メニュー</a></li>

        </ul>

      </div>

    </div>

  </div>

  <!-- アイキャッチ slick-->

  <div class="eyecatch" data-aos="fade - up">

    <div class="eyecatch-item">

      <img src="img/eyecatch01.jpg">

    </div>

    <div>

      <img src="img/eyecatch02.jpg">

    </div>

    <div>

      <img src="img/eyecatch03.jpg">

    </div>

    <div>

      <img src="img/eyecatch04.jpg">

    </div>

    <div>

      <img src="img/eyecatch05.jpg">

    </div>

  </div>

  <!-- リード文 -->

  <div class="box lead" data-aos="fade - down - right">

    <div class="inner">

      <h1></h1>

      <p>

        <img src="img/random01.jpg" >

      </p>

      <p>段落テキスト段落テキスト段落テキスト段落テキスト<br>

        段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

        段落テキスト段落テキスト段落テキスト</p>

    </div>

  </div>

  <!-- メニュー -->

  <div class="box menu" data-aos="zoom -in -up">

    <div class="inner">

      <div class="flex">

        <div class="flex-item">

          <a href="#product">

            <h2 class="title">商品紹介</h2>

            <p>段落テキスト段落テキスト段落テキスト段落テキスト<strong>段落テキスト段落テキスト</strong>

              段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

          </a>

        </div>

        <div class="flex-item">

          <a href="#data">

            <h2 class="title">データ</h2>

            <p>段落テキスト段落テキスト段落テキスト段落テキスト<strong>段落テキスト段落テキスト</strong>

              段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

          </a>

        </div>

        <div class="flex-item">

          <a href="#faq">

            <h2 class="title">よくある質問</h2>

            <p>段落テキスト段落テキスト段落テキスト段落テキスト<strong>段落テキスト段落テキスト</strong>

              段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト</p>

          </a>

        </div>

      </div>

    </div>

  </div>

  <!-- 商品紹介 -->

  <div class="box product" data-aos="fade-left">

    <div class="inner">

      <h2 id="product" class="main-title">商品紹介</h2>

      <div class="main-photo">

        <img src="img/big001.jpg">

      </div>

      <ul class="thumb-list">

        <li class="thumb-item">

          <img src="img/001.jpg">

        </li>

        <li class="thumb-item">

          <img src="img/002.jpg">

        </li>

        <li class="thumb-item">

          <img src="img/003.jpg">

        </li>

      </ul>

    </div>

  </div>

  <!-- ギャラリー -->

  <div class="box gallery" data-aos="zoom -in -up">

    <div class="inner">

      <h2 class="main-title">ギャラリー</h2>

      <ul class="flex-list">

        <li class="flex-item">

          <a href="img/big001.jpg" data-lightbox="group1" data-title="lightbox表示画像1">

            <img src="img/001.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big002.jpg" data-lightbox="group2" data-title="lightbox表示画像2">

            <img src="img/002.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big003.jpg" data-lightbox="group3" data-title="lightbox表示画像3">

            <img src="img/003.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big001.jpg" data-lightbox="group4" data-title="lightbox表示画像4">

            <img src="img/001.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big002.jpg" data-lightbox="group5" data-title="lightbox表示画像5">

            <img src="img/002.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big003.jpg" data-lightbox="group6" data-title="lightbox表示画像6">

            <img src="img/003.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big001.jpg" data-lightbox="group7" data-title="lightbox表示画像7">

            <img src="img/001.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big002.jpg" data-lightbox="group8" data-title="lightbox表示画像8">

            <img src="img/002.jpg">

          </a>

        </li>

        <li class="flex-item">

          <a href="img/big003.jpg" data-lightbox="group9" data-title="lightbox表示画像9">

            <img src="img/003.jpg">

          </a>

        </li>

      </ul>

    </div>

  </div>

  <!-- データ -->

  <div class="box data" data-aos="fade-right">

    <div class="inner">

      <h2 id="data" class="main-title">データ</h2>

      <div class="chart">

        <canvas id="stage"></canvas>

        グラフの種類：棒グラフ<br>

        横軸：月<br>

        縦軸：数値(上限1500)<br>

        「ソート対象１（赤）」「ソート対象２（緑）」「ソート対象３（青）」を比較できるようにする<br>

      </div>

      <div class="table">

        <table id="tablesorter01">

          <thead>

            <tr>

              <th>&nbsp;</th>

              <th>ソート対象１</th>

              <th>ソート対象２</th>

              <th>見出し</th>

              <th>見出し</th>

              <th>見出し</th>

              <th>見出し</th>

              <th>見出し</th>

              <th>ソート対象３</th>

              <th>見出し</th>

              <th>見出し</th>

            </tr>

          </thead>

          <tr>

            <th>1月</th>

            <td>300</td>

            <td>1200</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>700</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>2月</th>

            <td>500</td>

            <td>100</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>300</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>3月</th>

            <td>100</td>

            <td>1100</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>100</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>4月</th>

            <td>900</td>

            <td>700</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>200</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>5月</th>

            <td>700</td>

            <td>300</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>900</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>6月</th>

            <td>200</td>

            <td>1000</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>700</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>7月</th>

            <td>600</td>

            <td>500</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>300</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>8月</th>

            <td>400</td>

            <td>900</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>100</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>9月</th>

            <td>800</td>

            <td>200</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>200</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>10月</th>

            <td>1000</td>

            <td>800</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>900</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>11月</th>

            <td>1200</td>

            <td>600</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>200</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

          <tr>

            <th>12月</th>

            <td>1100</td>

            <td>400</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>データ</td>

            <td>900</td>

            <td>データ</td>

            <td>データ</td>

          </tr>

        </table>

      </div>

    </div>

  </div>

  <!-- よくある質問 -->

  <div class="box faq" data-aos="zoom -in -right">

    <div class="inner">

      <h2 id="faq" class="main-title">よくある質問</h2>

      <dl class="faq-list">

        <dt>

          質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１

          質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１質問内容１

        </dt>

        <dd>

          回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１

          回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１

          回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１回答内容１

        </dd>

        <dt>

          質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２

          質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２質問内容２

        </dt>

        <dd>

          回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２

          回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２

          回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２回答内容２

        </dd>

        <dt>

          質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３

          質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３質問内容３

        </dt>

        <dd>

          回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３

          回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３

          回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３回答内容３

        </dd>

        <dt>

          質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４

          質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４質問内容４

        </dt>

        <dd>

          回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４

          回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４

          回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４回答内容４

        </dd>

        <dt>

          質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５

          質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５質問内容５

        </dt>

        <dd>

          回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５

          回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５

          回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５回答内容５

        </dd>

      </dl>

    </div>

  </div>

  <!-- フッター -->

  <div class="footer">

    <div class="pagetop">

      <a href="#top">

        <i class="fas fa-angle-double-up"></i>

      </a>

    </div>

    <div class="inner">

      <ul class="nav">

        <li><a href="#">メニュー</a></li>

        <li><a href="#">メニュー</a></li>

        <li><a href="#">メニュー</a></li>

        <li><a href="#">メニュー</a></li>

      </ul>

      <div class="copyright">&copy; 2019 CompanyName.</div>

    </div>

  </div>

  <!-- フッター -->

  <!-- jQueryのコード -->

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <!-- slickJS -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

  <!-- smoothスクロール -->

  <script src="js/smoothscroll.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

  <!-- light box2 -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

  <!-- chart.js -->

  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

  <!-- tablesorter -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>

  <script

    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-scroller.min.js"></script>

  <script

    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-stickyHeaders.min.js"></script>

  <!--aosJS -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

  <!-- 自分用JS -->

  <script src="js/script-1.js"></script>

</body>

</html>

*1:href == '#' || href == '#top') ? 'html' : href);

    let position = target.offset().top;

    $('body,html').stop().animate({ scrollTop: position - headerHeight }, speed, easing);

    return false;

  });

});

// 5.画像をでっかく表示(もうちょっとシンプルな形になるきがする・・。)

var photoList = $('.thumb-list li')

console.log($(photoList[0]