HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

WebParts-7
ページネーション

目次

P7.1 はじめに

P7.1.1 概要

ページネーションは、ページ内のコンテンツを分割する機能です。コンテンツが多いページを分割することで表示速度の向上や読み易いページを実施します。

P7.2 ページネーション

P4.2.1 自動後続表示

(1) 説明

  • スクロールすると後続する HTML ファイルに格納されているコンテンツを自動で表示します。

(2) 表示形式

  • スクロールして後続する HTML ファイルに格納されているコンテンツが自動で表示されることを確認してください。
  • 本機能は、コンテンツがサーバーに格納された状態でないと動作しません。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Download jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. Infinite Scroll の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Code」ボタンをクリックして「Download ZIP」メニューをクリックしてダウンロードしてください。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  4. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義（※3）を記述してください。
  6. /body タグの直前に動作指示スクリプト（※4）を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 07-pagination/21-pagination-1
    • index.html
    • index-2.html
    • index-3.html
    • images
      • loading.gif
    • js
      • jquery.infinitescroll.min.js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 無限スクロールの設定 */
.navigation {
	display: none;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 無線スクロールの定義 -->
	<div id="main-container">
		<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
		<!-- 無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-01-01</li><li>テキスト-01-02</li><li>テキスト-01-03</li><li>テキスト-01-04</li><li>テキスト-01-05</li>	<!-- 01～05行 -->
			<li>テキスト-01-06</li><li>テキスト-01-07</li><li>テキスト-01-08</li><li>テキスト-01-09</li><li>テキスト-01-10</li>	<!-- 06～10行 -->
			<li>テキスト-01-11</li><li>テキスト-01-12</li><li>テキスト-01-13</li><li>テキスト-01-14</li><li>テキスト-01-15</li>	<!-- 11～15行 -->
			<li>テキスト-01-16</li><li>テキスト-01-17</li><li>テキスト-01-18</li><li>テキスト-01-19</li><li>テキスト-01-20</li>	<!-- 16～20行 -->
			<li>テキスト-01-21</li><li>テキスト-01-22</li><li>テキスト-01-23</li><li>テキスト-01-24</li><li>テキスト-01-25</li>	<!-- 21～25行 -->
			<li>テキスト-01-26</li><li>テキスト-01-27</li><li>テキスト-01-28</li><li>テキスト-01-29</li><li>テキスト-01-30</li>	<!-- 26～30行 -->
			<li>テキスト-01-31</li><li>テキスト-01-32</li><li>テキスト-01-33</li><li>テキスト-01-34</li><li>テキスト-01-35</li>	<!-- 31～35行 -->
			<li>テキスト-01-36</li><li>テキスト-01-37</li><li>テキスト-01-38</li><li>テキスト-01-39</li><li>テキスト-01-40</li>	<!-- 36～40行 -->
			<li>テキスト-01-41</li><li>テキスト-01-42</li><li>テキスト-01-43</li><li>テキスト-01-44</li><li>テキスト-01-45</li>	<!-- 41～45行 -->
			<li>テキスト-01-46</li><li>テキスト-01-47</li><li>テキスト-01-48</li><li>テキスト-01-49</li><li>テキスト-01-50</li>	<!-- 46～50行 -->
		</ol>
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",					// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",				// 次ページリンクのクラス
		itemSelector: ".article-list li",			// 無限スクロールする要素
		maxPage: 3,									// ページ数
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {									// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newElements) {							// 追加部のフェードインとボタンの移動
		$(newElements).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
	}
);
$('#main-container').infinitescroll('unbind');		// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){				// 要素を表示
	$('#main-container').infinitescroll('retrieve');
	return false;									// ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000);	// コンテンツのフェードイン
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

HTML（index-2.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* 無限スクロールの設定 */
.navigation {
	display: none;
}

</style>
</head>

<body>

<div class="container">
	<!-- 無線スクロールの定義 -->
	<div id="main-container">
		<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
		<!-- 無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-02-01</li><li>テキスト-02-02</li><li>テキスト-02-03</li><li>テキスト-02-04</li><li>テキスト-02-05</li>	<!-- 01～05行 -->
			<li>テキスト-02-06</li><li>テキスト-02-07</li><li>テキスト-02-08</li><li>テキスト-02-09</li><li>テキスト-02-10</li>	<!-- 06～10行 -->
			<li>テキスト-02-11</li><li>テキスト-02-12</li><li>テキスト-02-13</li><li>テキスト-02-14</li><li>テキスト-02-15</li>	<!-- 11～15行 -->
			<li>テキスト-02-16</li><li>テキスト-02-17</li><li>テキスト-02-18</li><li>テキスト-02-19</li><li>テキスト-02-20</li>	<!-- 16～20行 -->
			<li>テキスト-02-21</li><li>テキスト-02-22</li><li>テキスト-02-23</li><li>テキスト-02-24</li><li>テキスト-02-25</li>	<!-- 21～25行 -->
			<li>テキスト-02-26</li><li>テキスト-02-27</li><li>テキスト-02-28</li><li>テキスト-02-29</li><li>テキスト-02-30</li>	<!-- 26～30行 -->
			<li>テキスト-02-31</li><li>テキスト-02-32</li><li>テキスト-02-33</li><li>テキスト-02-34</li><li>テキスト-02-35</li>	<!-- 31～35行 -->
			<li>テキスト-02-36</li><li>テキスト-02-37</li><li>テキスト-02-38</li><li>テキスト-02-39</li><li>テキスト-02-40</li>	<!-- 36～40行 -->
			<li>テキスト-02-41</li><li>テキスト-02-42</li><li>テキスト-02-43</li><li>テキスト-02-44</li><li>テキスト-02-45</li>	<!-- 41～45行 -->
			<li>テキスト-02-46</li><li>テキスト-02-47</li><li>テキスト-02-48</li><li>テキスト-02-49</li><li>テキスト-02-50</li>	<!-- 46～50行 -->
		</ol>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
</div>

<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",					// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",				// 次ページリンクのクラス
		itemSelector: ".article-list li",			// 無限スクロールする要素
		maxPage: 3,									// ページ数
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {									// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newElements) {							// 追加部のフェードインとボタンの移動
		$(newElements).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
	}
);
$('#main-container').infinitescroll('unbind');		// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){				// 要素を表示
	$('#main-container').infinitescroll('retrieve');
	return false;									// ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000);	// コンテンツのフェードイン

</script>

</body>
</html>

HTML（index-3.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* 無限スクロールの設定 */
.navigation {
	display: none;
}

</style>
</head>

<body>

<div class="container">
	<!-- 無線スクロールの定義 -->
	<div id="main-container">
		<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
		<!-- 無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-03-01</li><li>テキスト-03-02</li><li>テキスト-03-03</li><li>テキスト-03-04</li><li>テキスト-03-05</li>	<!-- 01～05行 -->
			<li>テキスト-03-06</li><li>テキスト-03-07</li><li>テキスト-03-08</li><li>テキスト-03-09</li><li>テキスト-03-10</li>	<!-- 06～10行 -->
			<li>テキスト-03-11</li><li>テキスト-03-12</li><li>テキスト-03-13</li><li>テキスト-03-14</li><li>テキスト-03-15</li>	<!-- 11～15行 -->
			<li>テキスト-03-16</li><li>テキスト-03-17</li><li>テキスト-03-18</li><li>テキスト-03-19</li><li>テキスト-03-20</li>	<!-- 16～20行 -->
			<li>テキスト-03-21</li><li>テキスト-03-22</li><li>テキスト-03-23</li><li>テキスト-03-24</li><li>テキスト-03-25</li>	<!-- 21～25行 -->
			<li>テキスト-03-26</li><li>テキスト-03-27</li><li>テキスト-03-28</li><li>テキスト-03-29</li><li>テキスト-03-30</li>	<!-- 26～30行 -->
			<li>テキスト-03-31</li><li>テキスト-03-32</li><li>テキスト-03-33</li><li>テキスト-03-34</li><li>テキスト-03-35</li>	<!-- 31～35行 -->
			<li>テキスト-03-36</li><li>テキスト-03-37</li><li>テキスト-03-38</li><li>テキスト-03-39</li><li>テキスト-03-40</li>	<!-- 36～40行 -->
			<li>テキスト-03-41</li><li>テキスト-03-42</li><li>テキスト-03-43</li><li>テキスト-03-44</li><li>テキスト-03-45</li>	<!-- 41～45行 -->
			<li>テキスト-03-46</li><li>テキスト-03-47</li><li>テキスト-03-48</li><li>テキスト-03-49</li><li>テキスト-03-50</li>	<!-- 46～50行 -->
		</ol>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
</div>

<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",					// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",				// 次ページリンクのクラス
		itemSelector: ".article-list li",			// 無限スクロールする要素
		maxPage: 3,									// ページ数 */
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {									// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newElements) {							// 追加部のフェードインとボタンの移動
		$(newElements).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
	}
);
$('#main-container').infinitescroll('unbind');		// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){				// 要素を表示
	$('#main-container').infinitescroll('retrieve');
	return false;									// ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000);	// コンテンツのフェードイン

</script>

</body>
</html>

P7.2.2 確認後続表示

(1) 説明

  • スクロールし確認後に後続する HTML ファイルに格納されているコンテンツを表示します。

(2) 表示形式

  • スクロールして後続する HTML ファイルに格納されているコンテンツが自動で表示されることを確認してください。
  • 本機能は、コンテンツがサーバーに格納された状態でないと動作しません。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Download jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. Infinite Scroll の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Code」ボタンをクリックして「Download ZIP」メニューをクリックしてダウンロードしてください。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  4. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義（※3）を記述してください。
  6. /body タグの直前に動作指示スクリプト（※4）を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 07-pagination/22-pagination-2
    • index.html
    • index-2.html
    • index-3.html
    • images
      • loading.gif
    • js
      • jquery.infinitescroll.min.js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ボタンをクリックして無限スクロールの設定 */
.navigation {
	width: 90%;
	margin: 20px auto;
	background: steelblue;
	color: #fff;
	text-align: center;
}
.navigation a {
	display: block;
	width: 100%;
	padding: 20px;
	text-decoration: none;
	color: #fff;
}
.navigation a:hover {
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ボタンをクリックして無線スクロールの定義 -->
	<div id="main-container">
		<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
		<!-- ボタンをクリックして無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-01-01</li><li>テキスト-01-02</li><li>テキスト-01-03</li><li>テキスト-01-04</li><li>テキスト-01-05</li>	<!-- 01～05行 -->
			<li>テキスト-01-06</li><li>テキスト-01-07</li><li>テキスト-01-08</li><li>テキスト-01-09</li><li>テキスト-01-10</li>	<!-- 06～10行 -->
			<li>テキスト-01-11</li><li>テキスト-01-12</li><li>テキスト-01-13</li><li>テキスト-01-14</li><li>テキスト-01-15</li>	<!-- 11～15行 -->
			<li>テキスト-01-16</li><li>テキスト-01-17</li><li>テキスト-01-18</li><li>テキスト-01-19</li><li>テキスト-01-20</li>	<!-- 16～20行 -->
			<li>テキスト-01-21</li><li>テキスト-01-22</li><li>テキスト-01-23</li><li>テキスト-01-24</li><li>テキスト-01-25</li>	<!-- 21～25行 -->
			<li>テキスト-01-26</li><li>テキスト-01-27</li><li>テキスト-01-28</li><li>テキスト-01-29</li><li>テキスト-01-30</li>	<!-- 26～30行 -->
			<li>テキスト-01-31</li><li>テキスト-01-32</li><li>テキスト-01-33</li><li>テキスト-01-34</li><li>テキスト-01-35</li>	<!-- 31～35行 -->
			<li>テキスト-01-36</li><li>テキスト-01-37</li><li>テキスト-01-38</li><li>テキスト-01-39</li><li>テキスト-01-40</li>	<!-- 36～40行 -->
			<li>テキスト-01-41</li><li>テキスト-01-42</li><li>テキスト-01-43</li><li>テキスト-01-44</li><li>テキスト-01-45</li>	<!-- 41～45行 -->
			<li>テキスト-01-46</li><li>テキスト-01-47</li><li>テキスト-01-48</li><li>テキスト-01-49</li><li>テキスト-01-50</li>	<!-- 46～50行 -->
		</ol>
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",				// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",			// 次ページリンクのクラス
		itemSelector: ".article-list li",		// 無限スクロールする要素
		maxPage: 3,								// ページ数 */
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {								// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newArticle) {						// 追加部のフェードインとボタンの移動
		$(newArticle).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").css("display", "block");
	}
);
$('.article-list').infinitescroll('unbind');	// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){			// 要素を表示
    $('.article-list').infinitescroll('retrieve');
    return false;								// ボタンのリンクは無効
});
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</script>

</body>
</html>

HTML（index-2.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ボタンをクリックして無限スクロールの設定 */
.navigation {
	width: 90%;
	margin: 20px auto;
	background: steelblue;
	color: #fff;
	text-align: center;
}
.navigation a {
	display: block;
	width: 100%;
	padding: 20px;
	text-decoration: none;
	color: #fff;
}
.navigation a:hover {
	opacity: 0.6;
}

</style>
</head>

<body>

<div class="container">
	<!-- ボタンをクリックして無線スクロールの定義 -->
	<div id="main-container">
		<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
		<!-- ボタンをクリックして無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-02-01</li><li>テキスト-02-02</li><li>テキスト-02-03</li><li>テキスト-02-04</li><li>テキスト-02-05</li>	<!-- 01～05行 -->
			<li>テキスト-02-06</li><li>テキスト-02-07</li><li>テキスト-02-08</li><li>テキスト-02-09</li><li>テキスト-02-10</li>	<!-- 06～10行 -->
			<li>テキスト-02-11</li><li>テキスト-02-12</li><li>テキスト-02-13</li><li>テキスト-02-14</li><li>テキスト-02-15</li>	<!-- 11～15行 -->
			<li>テキスト-02-16</li><li>テキスト-02-17</li><li>テキスト-02-18</li><li>テキスト-02-19</li><li>テキスト-02-20</li>	<!-- 16～20行 -->
			<li>テキスト-02-21</li><li>テキスト-02-22</li><li>テキスト-02-23</li><li>テキスト-02-24</li><li>テキスト-02-25</li>	<!-- 21～25行 -->
			<li>テキスト-02-26</li><li>テキスト-02-27</li><li>テキスト-02-28</li><li>テキスト-02-29</li><li>テキスト-02-30</li>	<!-- 26～30行 -->
			<li>テキスト-02-31</li><li>テキスト-02-32</li><li>テキスト-02-33</li><li>テキスト-02-34</li><li>テキスト-02-35</li>	<!-- 31～35行 -->
			<li>テキスト-02-36</li><li>テキスト-02-37</li><li>テキスト-02-38</li><li>テキスト-02-39</li><li>テキスト-02-40</li>	<!-- 36～40行 -->
			<li>テキスト-02-41</li><li>テキスト-02-42</li><li>テキスト-02-43</li><li>テキスト-02-44</li><li>テキスト-02-45</li>	<!-- 41～45行 -->
			<li>テキスト-02-46</li><li>テキスト-02-47</li><li>テキスト-02-48</li><li>テキスト-02-49</li><li>テキスト-02-50</li>	<!-- 46～50行 -->
		</ol>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
</div>

<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",				// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",			// 次ページリンクのクラス
		itemSelector: ".article-list li",		// 無限スクロールする要素
		maxPage: 3,								// ページ数 */
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {								// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newArticle) {						// 追加部のフェードインとボタンの移動
		$(newArticle).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").css("display", "block");
	}
);
$('.article-list').infinitescroll('unbind');	// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){			// 要素を表示
    $('.article-list').infinitescroll('retrieve');
    return false;								// ボタンのリンクは無効
});

</script>

</body>
</html>

HTML（index-3.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ボタンをクリックして無限スクロールの設定 */
.navigation {
	width: 90%;
	margin: 20px auto;
	background: steelblue;
	color: #fff;
	text-align: center;
}
.navigation a {
	display: block;
	width: 100%;
	padding: 20px;
	text-decoration: none;
	color: #fff;
}
.navigation a:hover {
	opacity: 0.6;
}

</style>
</head>

<body>

<div class="container">
	<!-- ボタンをクリックして無線スクロールの定義 -->
	<div id="main-container">
		<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
		<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
		<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
		<!-- ボタンをクリックして無限スクロール領域 -->
		<ol class="article-list">
			<li>テキスト-03-01</li><li>テキスト-03-02</li><li>テキスト-03-03</li><li>テキスト-03-04</li><li>テキスト-03-05</li>	<!-- 01～05行 -->
			<li>テキスト-03-06</li><li>テキスト-03-07</li><li>テキスト-03-08</li><li>テキスト-03-09</li><li>テキスト-03-10</li>	<!-- 06～10行 -->
			<li>テキスト-03-11</li><li>テキスト-03-12</li><li>テキスト-03-13</li><li>テキスト-03-14</li><li>テキスト-03-15</li>	<!-- 11～15行 -->
			<li>テキスト-03-16</li><li>テキスト-03-17</li><li>テキスト-03-18</li><li>テキスト-03-19</li><li>テキスト-03-20</li>	<!-- 16～20行 -->
			<li>テキスト-03-21</li><li>テキスト-03-22</li><li>テキスト-03-23</li><li>テキスト-03-24</li><li>テキスト-03-25</li>	<!-- 21～25行 -->
			<li>テキスト-03-26</li><li>テキスト-03-27</li><li>テキスト-03-28</li><li>テキスト-03-29</li><li>テキスト-03-30</li>	<!-- 26～30行 -->
			<li>テキスト-03-31</li><li>テキスト-03-32</li><li>テキスト-03-33</li><li>テキスト-03-34</li><li>テキスト-03-35</li>	<!-- 31～35行 -->
			<li>テキスト-03-36</li><li>テキスト-03-37</li><li>テキスト-03-38</li><li>テキスト-03-39</li><li>テキスト-03-40</li>	<!-- 36～40行 -->
			<li>テキスト-03-41</li><li>テキスト-03-42</li><li>テキスト-03-43</li><li>テキスト-03-44</li><li>テキスト-03-45</li>	<!-- 41～45行 -->
			<li>テキスト-03-46</li><li>テキスト-03-47</li><li>テキスト-03-48</li><li>テキスト-03-49</li><li>テキスト-03-50</li>	<!-- 46～50行 -->
		</ol>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
		<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
		<div class="navigation"><a href="index-2.html">続きを表示</a></div>
	</div>
</div>

<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
	{
		navSelector: ".navigation",				// 次ページリンクを囲んでいるクラス
		nextSelector: ".navigation a",			// 次ページリンクのクラス
		itemSelector: ".article-list li",		// 無限スクロールする要素
		maxPage: 3,								// ページ数 */
		dataType: "html",
		animate: true,
		extraScrollPx: 200,
		loading: {								// 全て終了時のメッセージ
			img: "images/loading.gif",
			finishedMsg: "全ての読み込みが終了"
		}
	},
	function(newArticle) {						// 追加部のフェードインとボタンの移動
		$(newArticle).hide().delay(100).fadeIn(600);
		$(".navigation").appendTo("#main-container").css("display", "block");
	}
);
$('.article-list').infinitescroll('unbind');	// ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){			// 要素を表示
    $('.article-list').infinitescroll('retrieve');
    return false;								// ボタンのリンクは無効
});

</script>

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎