HTML-CSS 入門講座

HTML-CSS 入門講座

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

WebParts-4
スクロール

目次

P4.1 はじめに

P4.1.1 概要

スクロールは、ページのスクロールを即したりスクロール操作を容易に行えるようにする機能です。

ページトップ
ページのトップにスクロールするボタンです。
スクロールダウン
スクロール操作を即するガイダンスです。
スクロールバー
ページ内のスクロール位置を示すプログレスバーです。
スクロール効果
スクロール時に表示される項目の表示効果です。
ヘッダ固定
スクロール時に固定表示されるヘッダ形状です。
ページ内リンク
ページの途中へのリンク機能です。

P4.2 ページトップ

P4.2.1 JavaScript-1

(1) 説明

  • JavScript だけで実現するトップに戻るボタンです。JavaScript だけで実現できますのでシンプルに実現することができます。
  • 本サイト開発時点では、一部のブラウザで CSS でのスムーズスクロール機能をサポートしていないものがありますのでスムーズスクロールが必須の場合は、jQuery の使用をお勧めします。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。
  4. /body タグの直前に動作指示スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/21-scrolltop-1
    • index.html
(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ（JavaScript版の基本形）のサンプル</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） ▼▼▼ */
/* ページトップ（JavaScript版の基本形）の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	display: block;
	width: 60px;
	line-height: 60px;
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	border-radius: 30px;
	background: #c91515;				/* スクロールボタンの背景色 */
	opacity: 0;
	font-size: 2.4rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
}
#page-top:hover{
	cursor: pointer;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61～65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66～70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ページトップ（JavaScript版の基本形）の定義 -->
<p id="page-top">▲</p> 
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページトップ（JavaScript版の基本形）の制御 -->
<script>
const scroll_top_btn = document.querySelector('#page-top');
scroll_top_btn.addEventListener('click', click_event);		// クリック時のイベントを追加
function click_event() {									// クリック時のイベント処理
	window.scroll({											// ページトップへスムーズスクロール
		top: 0, 
		behavior: 'smooth',
	});
};
window.addEventListener('scroll' , scroll_event );			// スクロール時のイベントを追加
function scroll_event() {									// スクロール時のイベント処理
	if(window.pageYOffset > 200) {							// スクロール位置が200pxを超えているか？
		scroll_top_btn.style.opacity = '0.8';				// スクロールボタンを表示
	}
	else {
		scroll_top_btn.style.opacity = '0';					// スクロールボタンを非表示
	}
}
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.2.2 jQuery-1

(1) 説明

  • jQueryで実現するトップに戻るボタンです。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
■ ファイル配置
  • 04-scroll/22-scrolltop-2
    • index.html
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ（jQueryの基本形）のサンプル</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） ▼▼▼ */
/* ページトップ（jQueryの基本形）の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {							/* スクロールボタンのスタイル設定 */
	display: block;
	width: 60px;
	line-height: 60px;
	border-radius: 30px;
	background: #c91515;				/* スクロールボタンの背景色 */
	opacity: 0.8;
	font-size: 2.4rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a:hover{
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61～65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66～70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ページトップ（jQueryの基本形）の定義 -->
<p id="page-top">
	<a href="#">▲</a>
</p> 
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<!-- ページトップ（jQueryの基本形）の制御 -->
<script>
function PageTopAnime() {							// スクロールボタンの動作設定
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							// 上から200pxスクロールしたらスクロールボタンを下から表示
		$('#page-top').removeClass('DownMove');
		$('#page-top').addClass('UpMove');
	}
	else {
		if($('#page-top').hasClass('UpMove')) {		// スクロールボタンが表示されていたらボタンを下に隠す
			$('#page-top').removeClass('UpMove');
			$('#page-top').addClass('DownMove');
		}
	}
}
$(window).scroll(function () {						// 画面がスクロールされたらスクロールボタンの制御を実施
	PageTopAnime();
});
$(window).on('load', function () {					// 画面読み込み時にスクロールボタンの制御を実施
	PageTopAnime();
});
$('#page-top a').click(function () {				// スクロールボタンがクリックされたらスクロールアニメーションを実施
	 $('body,html').animate({
		scrollTop: 0								// ページトップまでスクロール
	}, 500);										// ページトップスクロールの速さ（数字が大きいほど遅くなる）
	return false;									// リンク自体のリンク設定は無効化
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.2.3 jQuery-2

(1) 説明

  • jQuery で実現するトップに戻るボタンの基本形に対してボタンデザインを変更しました。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/23-scrolltop-3
    • index.html
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ（jQueryの基本形でデザイン変更）のサンプル</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） ▼▼▼ */
/* ページトップ（jQueryの基本形でデザイン変更）の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {							/* スクロールボタンのスタイル設定 */
	display: block;
	width: 60px;
	height: 60px;
	padding-top: 20px;
	border-radius: 8px;
	background: #1c739d;				/* スクロールボタンの背景色 */
	opacity: 0.8;
	font-size: 2.2rem;
	line-height: 0.8rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a span {
	font-size: 0.6rem;
}
#page-top a:hover{
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61～65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66～70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ページトップ（jQueryの基本形でデザイン変更）の定義 -->
<p id="page-top">
	<a href="#">▲<br><span>Page Top</span></a>
</p> 
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページトップ（jQueryの基本形でデザイン変更）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {							// スクロールボタンの動作設定
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							// 上から200pxスクロールしたらスクロールボタンを下から表示
		$('#page-top').removeClass('DownMove');
		$('#page-top').addClass('UpMove');
	}
	else {
		if($('#page-top').hasClass('UpMove')) {		// スクロールボタンが表示されていたらボタンを下に隠す
			$('#page-top').removeClass('UpMove');
			$('#page-top').addClass('DownMove');
		}
	}
}
$(window).scroll(function () {						// 画面がスクロールされたらスクロールボタンの制御を実施
	PageTopAnime();
});
$(window).on('load', function () {					// 画面読み込み時にスクロールボタンの制御を実施
	PageTopAnime();
});
$('#page-top a').click(function () {				// スクロールボタンがクリックされたらスクロールアニメーションを実施
	 $('body,html').animate({
		scrollTop: 0								// ページトップまでスクロール
	}, 500);										// ページトップスクロールの速さ（数字が大きいほど遅くなる）
	return false;									// リンク設定は無効化
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.2.4 jQuery-3（歩く肉球）

(1) 説明

  • 肉球が歩いてトップに戻るスクロールをイメージしました。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/24-scrolltop-4
    • index.html
    • images
      • foot-l.png
      • foot-r.png
    • js
      • jquery-3.6.0.min.js
(b) 画像
  • 左足画像　（foot-l.png：左足画像）
  • 右足画像　（foot-r.png：右足画像）
(c) ソースコード

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） ▼▼▼ */
/* ページトップ（歩く肉球）の設定 */
#page-top a.foot-wrapper {				/* 肉球の配置 */
	display: block;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
}
#page-top div img,
#page-top a.foot-wrapper div img {
	width: 60px;
}
#page-top a.foot-wrapper div.foot1 {
	padding-left: 50px;
}
#page-top div.foot2,
#page-top div.foot4 {
	opacity: 0;
}
#page-top div.foot3 {
	opacity: 0;
	padding-left: 50px;
}
#page-top a.foot-wrapper div.arrow {
	position: absolute;
	right: 18px;
	bottom: 13px;
	font-size: 10px;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}
#page-top a:hover{
	opacity: 0.6;
}
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}
@keyframes anime-up {					/* スクロールボタンを上に上げるアニメーション */
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.move-up {
	animation: anime-up 0.5s forwards;
}
@keyframes anime-down {					/* スクロールボタンを下に下げるアニメーション */
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}
#page-top.move-down {
	animation: anime-down 0.5s forwards;
}
#page-top.run-foot div.foot2 {			/* 肉入を歩かせる */
	transition-delay: 0s;
	opacity: 1;
}
#page-top.run-foot div.foot3 {
	transition-delay: 0.4s;
	opacity: 1;
}
#page-top.run-foot div.foot4 {
	transition-delay: 0.8s;
	opacity: 1;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61～65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66～70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ページトップ（歩く肉球）の定義 -->
<div id="page-top">
	<div class="foot4"><img src="images/foot-l.png" alt="左足"></div>
	<div class="foot3"><img src="images/foot-r.png" alt="右足"></div>
	<div class="foot2"><img src="images/foot-l.png" alt="左足"></div>
	<a class="foot-wrapper" href="#">
		<div class="foot1"><img src="images/foot-r.png" alt="右足"></div>
		<div class="arrow">PAGE<br>TOP</div>
	</a>
</div> 
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページトップ（歩く肉球）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {							// スクロール時の動作設定
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							// 上から200pxスクロールしたらスクロールボタンを下から表示
		$('#page-top').removeClass('move-down');
		$('#page-top').addClass('move-up');
	}
	else {
		if (scroll == 0) {							// トップにいる時は、肉球があるくのを停止
			$('#page-top').removeClass('run-foot');
		}
		if($('#page-top').hasClass('move-up')) {	// スクロールボタンが表示されていたらボタンを下に隠す
			$('#page-top').removeClass('move-up');
			$('#page-top').addClass('move-down');
		}
	}
}
$(window).scroll(function () {						// 画面がスクロールされたらスクロールボタンの制御を実施
	PageTopAnime();
});

$(window).on('load', function () {					// 画面読み込み時にスクロールボタンの制御を実施
	PageTopAnime();
});

$('#page-top a').click(function () {				// スクロールボタンがクリックされたらスクロールアニメーションを実施
	$('#page-top').addClass('run-foot');			// ページトップまでスクロール
	$('body,html').animate({
		scrollTop: 0,
	}, 1200);										// ページトップスクロールの速さ（数字が大きいほど遅くなる）
	return false;									// リンク設定は無効化
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.2.5 jQuery-4（ロケット）

(1) 説明

  • ロケットが発射してトップに戻るスクロールをイメージしました。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/25-scrolltop-5
    • index.html
    • images
      • rocket-body.png
      • rocket-flame.png
    • js
      • jquery-3.6.0.min.js
(b) 画像
  • ロケット本体　（rocket-body.png：ロケット本体）
  • ロケット発射の炎　（rocket-flame.png：ロケット発射の炎）
(c) ソースコード

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） ▼▼▼ */
/* ページトップ（ロケット）の設定 */
#page-top {										/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);				/* ウィンドウの枠外に隠しておく */
}
#page-top a:hover{
	opacity: 0.6;
}
#page-top a.rocket-wrapper {					/* ロケット枠領域 */
	display: block;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
}
#page-top div img,
#page-top a.rocket-wrapper div img {
	width: 60px;
	vertical-align: top;
}
#page-top div.rocket-flame {					/* 炎（最初は非表示） */
	display: none;
}
#page-top a.rocket-wrapper div.arrow {	/* 'TOP PAGE'文字 */
	position: absolute;
	right: 14px;
	bottom: 9px;
	font-size: 12px;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}
@keyframes anime-up {							/* スクロールボタンを上に上げるアニメーション */
	from {
		opacity: 0;
		transform: translateY(160px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.move-up {
	animation: anime-up 0.5s forwards;
}
@keyframes anime-down {							/* スクロールボタンを下に下げるアニメーション */
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(160px);
	}
}
#page-top.move-down {
	animation: anime-down 0.5s forwards;
}
#page-top.rocket-launch {						/* ロケット発射 */
	animation: anime-launch 1s forwards ease-in;
}
@keyframes anime-launch {
	from {
		opacity: 1;
		bottom: 71px;
	}
	to {
		opacity: 0;
		bottom: calc(100vh + 100px);
	}
}
#page-top.rocket-launch div.rocket-flame {		/* 炎を表示 */
	display: block;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61～65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66～70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- ページトップ（ロケット）の定義 -->
<div id="page-top">
	<a class="rocket-wrapper" href="#">
		<div class="rocket-body1"><img src="images/rocket-body.png" alt="ロケット本体"></div>
		<div class="arrow">PAGE<br>TOP</div>
	</a>
	<div class="rocket-flame"><img src="images/rocket-flame.png" alt="ロケット炎"></div>
</div> 
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページトップ（ロケット）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {									// スクロールボタンの動作設定
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {									// 上から200pxスクロールしたらスクロールボタンを下から表示
		if (!($('#page-top').hasClass('rocket-launch'))) {	// 打上げ中じゃない時
			$('#page-top').removeClass('move-down');
			$('#page-top').addClass('move-up');				// ロケットを表示
		}
	}
	else {													// 上から200px以内の時は、スクロールボタンを下に隠す
		if (scroll == 0) {									// トップにいたら
			$('#page-top').removeClass('rocket-launch');	// 発射と止める
		}
		if ($('#page-top').hasClass('move-up')) {			// ロケットが表示されたいる時
			$('#page-top').removeClass('move-up');
			$('#page-top').addClass('move-down');			// ロケットを非表示
		}
	}
}
$(window).scroll(function () {								// 画面スクロール時にスクロールボタンの制御を実施
	PageTopAnime();
});

$(window).on('load', function () {							// 画面読み込み時にスクロールボタンの制御を実施
	PageTopAnime();
});
$('#page-top a').click(function () {						// スクロールボタンがクリックされたらスクロールアニメーションを実施
	$('#page-top').removeClass('move-up');					// ロケットを非表示
	$('#page-top').addClass('rocket-launch');				// 打上げ中に設定
	$('body,html').animate({
		scrollTop: 0										// ページトップまでスクロール
	}, 1000);												// ページトップスクロールの速さ（数字が大きいほど遅くなる）
	return false;											// リンク設定は無効化
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.3 スクロールダウン

P4.3.1 動く丸

(1) 説明

  • 画面の右下にスクロールを促すアイコンを表示しスクロールするとページ本文が表示されます。

(2) 表示形式

  • スクロールしてページ本文が表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/31-scrolldown-1
    • index.html
    • images
      • sample-1920x1080-10.jpg
(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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 丸が動いてスクロールを促すの設定 */
.scrolldown {							/* スクロールダウン部品 */
	position: absolute;
	bottom: 10px;
	right: 52px;
}
.scrolldown span {						/* Scrollテキスト */
	position: absolute;
	left: 7px;
	bottom: 16px;
	color: #eee;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
}
.scrolldown:before {					/* ●のアニメーション */
	content: "";
	position: absolute;
	bottom: 0;
	left: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #eee;
	animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove {					/* ●を移動 */
	0% {
		bottom: 76px;
	}
	100% {
		bottom: -2px;
	}
}
@keyframes cirlemovehide {				/* ●を透明→不透明→透明 */
	0% {
		opacity: 0
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
	}
 }
.scrolldown:after {						/* 線の描写 */
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3px;
	height: 90px;
	background: #eee;
}
#header {								/* 最初に表示される画面 */
	width:100%;
	height: 100vh;
	position: relative;
} 
#header:before {						/* 最初に表示される画面の背景 */
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("images/sample-1920x1080-10.jpg") no-repeat center;
	background-size:cover;
}
h1 {									/* 最初に表示される画面のテキスト */
	position: fixed;
	top: 40%;
	left: 0;
	width: 100%;
	font-size: 1.8em;
	color: #eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
}
#main-container{						/* スクロールすると現れる領域 */
	position: relative;
	z-index: 1;
	background: #eee;
	padding: 20px 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 丸が動いてスクロールを促す定義 -->
	<header id="header">
		<h1>最初に表示される画面</h1>
		<div class="scrolldown"><span>Scroll</span></div>
	</header>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div id="main-container">
		<p>このエリアがスクロールすると上にかぶさります。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
		</ol>
	</div>
</div>

</body>
</html>

P4.3.2 動く矢印

(1) 説明

  • 画面の右下にスクロールを促すアイコンを表示しスクロールするとページ本文が表示されます。

(2) 表示形式

  • スクロールしてページ本文が表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/32-scrolldown-2
    • index.html
    • images
      • sample-1920x1080-11.jpg
(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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 矢印が動いてスクロールを促すの設定 */
.scrolldown {							/* スクロールダウン部品 */
	position: absolute;
	bottom: 1px;
	right: 44px;
	animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove {
	0% {
		bottom: 1%;
	}
	50% {
		bottom: 3%;
	}
	100% {
		bottom: 1%;
	}
}
.scrolldown span {						/* Scrollテキスト */
	position: absolute;
	left: 0px;
	bottom: 30px;
	color: #eee;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
}
.scrolldown:before {					/* 矢印（矢）の描画 */
	content: "";
	position: absolute;
	bottom: 0;
	left: 4px;
	width: 2px;
	height: 20px;
	background: #eee;
	transform: skewX(-31deg);
}
.scrolldown:after {						/* 矢印（棒）の描画 */
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 2px;
	height: 95px;
	background: #eee;
}
#header {								/* 最初に表示される画面 */
	width:100%;
	height: 100vh;
	position: relative;
} 
#header:before {						/* 最初に表示される画面の背景 */
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("images/sample-1920x1080-11.jpg") no-repeat center;
	background-size:cover;
}
h1 {									/* 最初に表示される画面のテキスト */
	position: fixed;
	top: 40%;
	left: 0;
	width: 100%;
	font-size: 1.8em;
	color: #eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
}
#main-container{						/* スクロールすると現れる領域 */
	position: relative;
	z-index: 1;
	background: #eee;
	padding: 20px 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 矢印が動いてスクロールを促す定義 -->
	<header id="header">
		<h1>最初に表示される画面</h1>
		<div class="scrolldown"><span>Scroll</span></div>
	</header>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div id="main-container">
		<p>このエリアがスクロールすると上にかぶさります。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
		</ol>
	</div>
</div>

</body>
</html>

P4.3.3 トップイメージ拡大

(1) 説明

  • スクロールするとトップイメージが拡大します。

(2) 表示形式

  • スクロールしてトップイメージが拡大されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。
  4. /body タグの直前に制御スクリプト（※4）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/33-scrolldown-3
    • index.html
    • images
      • sample-1920x1080-10.jpg
(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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
#header {								/* 最初に表示される画面 */
	width: 100%;
	height: 100vh;
	position: relative;
} 
#header-img {							/* 最初に表示される画面の背景 */
	content: '';
	position: fixed;
	top :0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("images/sample-1920x1080-10.jpg") no-repeat center;
	background-size: cover;
}
h1 {									/* 最初に表示される画面のテキスト */
	position: fixed;
	top: 40%;
	left: 0;
	width: 100%;
	font-size: 1.8em;
	color: #eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
}
#main-container{						/* スクロールすると現れる領域 */
	position: relative;
	z-index: 1;
	background: #eee;
	padding: 20px 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- スクロールすると背景画像が拡大する定義 -->
	<header id="header">
		<h1>最初に表示される画面</h1>
		<div id="header-img"></div>
	</header>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div id="main-container">
		<p>このエリアがスクロールすると上にかぶさります。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スクロールすると背景画像が拡大する制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
	$(window).scroll(function() {
		var scroll = $(window).scrollTop();							// スクロール値
		$('#header-img').css({
			transform: 'scale(' + (100 + scroll / 10) / 100 + ')',	// 拡大値設定
			top: -(scroll / 50)  + "%",								// top位置調整
		});
	});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P4.3.4 紙芝居風スクロール-1

(1) 説明

  • スクロールすると画像ページやテキストページが紙芝居風にスクロールして表示されます。

(2) 表示形式

  • スクロールして画像ページやテキストページが紙芝居風に表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/34-scrolldown-4
    • index.html
    • images
      • sample-1920x1080-10.jpg
      • sample-1920x1080-11.jpg
      • sample-1920x1080-12.jpg
(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>
* {
	padding: 0;
	margin: 0;
	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: 0px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 100%;
	margin: 0 auto;
}
a {
	color: #333;
	text-decoration: none;
}

/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 紙芝居風スクロールの設定 */
.img {
	height: 100vh;
	position: sticky;
	top: 0;
}
.b1 {
	background: url("images/sample-1920x1080-10.jpg") no-repeat center;
	background-size: cover;
}
.b2 {
	background: url("images/sample-1920x1080-11.jpg") no-repeat center;
	background-size: cover;
}
.b3 {
	background: url("images/sample-1920x1080-12.jpg") no-repeat center;
	background-size: cover;
}
.txt {
	height: 100vh;
	background: #fff;
	overflow: hidden;
	position: sticky;
	top: 0;
}
.txt p {
	padding: 50px 0 0 0;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
}
.txt ol {
	width: 40%;
	margin: 0 auto;
	padding: 20px 0 0 0;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
<!-- ▼▼▼ HTML（ここから） ▼▼▼（※3） -->
	<!--紙芝居風スクロールの定義 -->
	<div class="wrapper">
		<div class="img b1"></div>
		<div class="txt">
			<p>HEADER-1</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
		<div class="img b2"></div>
		<div class="txt">
			<p>HEADER-2</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
		<div class="img b3"></div>
		<div class="txt">
			<p>HEADER-3</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P4.3.5 紙芝居風スクロール-2

(1) 説明

  • スクロールすると画像ページやテキストページが紙芝居風に表示されます。テキストページはスクロールされますが画像ページは固定位置に表示されます

(2) 表示形式

  • スクロールして画像ページやテキストページが紙芝居風に表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義（※2）を スタイルシート（CSS）ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義（※3）を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 04-scroll/35-scrolldown-5
    • index.html
    • images
      • sample-1920x1080-10.jpg
      • sample-1920x1080-11.jpg
      • sample-1920x1080-12.jpg
(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>
* {
	padding: 0;
	margin: 0;
	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: 0px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 100%;
	margin: 0 auto;
}
a {
	color: #333;
	text-decoration: none;
}

/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 紙芝居風スクロールの設定 */
.img {
	min-height: 100vh;
}
.txt {
	min-height: 100vh;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.txt p {
	padding: 50px 0 0 0;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
}
.txt ol {
	width: 40%;
	margin: 0 auto;
	padding: 20px 0 0 0;
	color: #000;
}
.b1 {
	background-image: url("images/sample-1920x1080-10.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
.b2 {
	background-image: url("images/sample-1920x1080-11.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
.b3 {
	background-image: url("images/sample-1920x1080-12.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
<!-- ▼▼▼ HTML（ここから） ▼▼▼（※3） -->
	<!--紙芝居風スクロールの定義 -->
	<div class="wrapper">
		<div class="img b1"></div>
		<div class="txt b1">
			<p>HEADER-1</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
		<div class="img b2"></div>
		<div class="txt b2">
			<p>HEADER-2</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
		<div class="img b3"></div>
		<div class="txt b3">
			<p>HEADER-3</p> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			</ol>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P4.4 スクロールバー

P4.4.1 Scrollgress-1

(1) 説明

  • ヘッダーエリアの下部にスクロール状況を示すバーを配置しスクロール量に合わせてバーが伸びます。

(2) 表示形式

  • スクロールしてヘッダーエリア下部のバーが伸びることを確認してください。

別画面で表示

(3) 使用機能

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

    (4) 実装手順

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

    (5) サンプルコード

    サンプルコード表示
    (a) ファイル配置
    • 04-scroll/41-scrollbar-1
      • index.html
      • js
        • jquery-3.6.0.min.js
        • scrollgress.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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* スクロール位置に合わせて線が伸びるの設定 */
.scrollgress {							/* スクロールバーの設定 */
	z-index: 999;						/* 他エリアより前に出す */
	top: 70px!important;				/* fixedで設置しているheaderの下にバーを出す */
}
#header {								/* ヘッダー部 */
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	padding-top: 25px;
	background: steelblue;
	color: #fff;
	text-align: center;
	z-index: 2;
}
#main-container {
	padding-top: 80px;
	padding-left: 10px;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- スクロール位置に合わせて線が伸びる定義 -->
	<header id="header">
		<h1>ヘッダーエリア</h1>
	</header>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div id="main-container">
		<p>スクロールするとヘッダーエリアの下線が伸びます。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51～55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56～60行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スクロール位置に合わせて線が伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/scrollgress.min.js" type="text/javascript"></script>
<script>
$('#main-container').scrollgress({		/* バーの高さの基準となるエリア指定 */
	height: '8px',						/* バーの高さ */
	color: 'crimson',					/* バーの色 */
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

    P4.5 スクロール効果

    P4.5.1 項目アニメーション表示

    (1) 説明

    • スクロール時の項目をアニメーション表示します。

    (2) 表示形式

    • スクロールして写真コンテンツの表示形式を確認してください。

    別画面で表示

    (3) 使用機能

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

    (4) 実装手順

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

    (5) サンプルコード

    サンプルコード表示
    (a) ファイル配置
    • 04-scroll/51-animation-1
      • index.html
      • images
        • sample-256x128-01.jpg
        • sample-256x128-02.jpg
        • sample-256x128-03.jpg
      • 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;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* スクロールすると項目がフェードイン（基本形）の設定 */
.fadein-wrapper {
	overflow: hidden;
}
.fadein-wrapper div {
	width: calc(100% / 3);
	padding: 20px;
	text-align: center;
	float: left;
}
.fadein-wrapper div img {
	width: 100%;
}
/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
.fadeUp {								/* 画面外にいる項目（下から） */
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
}
.fadeLeft {								/* 画面外にいる項目（左から） */
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 500ms;
}
.fadeRight {							/* 画面外にいる項目（右から） */
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 500ms;
}
.fadeUp3s {								/* 画面外にいる項目（下から）（3秒） */
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 3000ms;
}
.fadeLeft3s {							/* 画面外にいる項目（左から）（3秒） */
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 2000ms;
}
.fadeRight3s {							/* 画面外にいる項目（右から）（3秒） */
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 3000ms;
}
.fadein.scrollin {						/* 画面内に入った項目 */
    opacity : 1;
    transform : translate(0, 0);
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スクロールすると項目がフェードイン（基本形）の定義 -->
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
		</ol>
		<p>※500msかけてフェードインします。</p>
		<div class="fadein-wrapper">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
			<div class="fadein fadeUp">下から<br><img src="images/sample-256x128-01.jpg" alt="サンプル01"></div>
			<div class="fadein fadeLeft">左から<br><img src="images/sample-256x128-02.jpg" alt="サンプル02"></div>
			<div class="fadein fadeRight">右から<br><img src="images/sample-256x128-03.jpg" alt="サンプル03"></div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
		</div>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
		</ol>
		<p>※動きが分かり易いようにフェードイン時間を500msから3sに変更しました。</p>
		<div class="fadein-wrapper">
			<div class="fadein fadeUp3s">下から<br><img src="images/sample-256x128-01.jpg" alt="サンプル01"></div>
			<div class="fadein fadeLeft3s">左から<br><img src="images/sample-256x128-02.jpg" alt="サンプル02"></div>
			<div class="fadein fadeRight3s">右から<br><img src="images/sample-256x128-03.jpg" alt="サンプル03"></div>
		</div>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- スクロールすると項目がフェードイン（基本形）の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function fadeAnime() {					// アニメーション関数
	$('.fadein').each(function() {
		var elemPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > elemPos - windowHeight + 50) {
			$(this).addClass('scrollin');
		}
		else {
			$(this).removeClass('scrollin');
		}
	});
}
$(window).on('load', function(){		// 画面読み込み時
	fadeAnime();
});
$(window).scroll(function () {			// 画面スクロール時
	fadeAnime();
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

    P4.6 ヘッダー固定

    P4.6.1 ヘッダー固定

    (1) 説明

    • スクロール時にヘッダー部の形状が変更され上部に固定表示されます。

    (2) 表示形式

    • スクロールしてヘッダー部の形状が変更され上部に固定表示されることを確認してください。

    別画面で表示

    (3) 使用機能

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

    (4) 実装手順

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

    (5) サンプルコード

    サンプルコード表示
    (a) ファイル配置
    • 04-scroll/61-headerfixed-1
      • index.html
      • js
        • jquery-3.6.0.min.js
        /li>
    (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: 0px;
	border: #fff 1px solid;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ヘッダーの固定化の設定 */
header {								/* ヘッダー部（非固定時のスタイル） */
	width: 100%;
	height: 100px;
	padding: 20px 10px;
	border-bottom: #ccc 1px solid;
	background: rgb(199,234,255);
	overflow: hidden;
}
@media screen and (max-width: 760px) {
	header {
		height: 90px;
	}
}
header h1 {
	width: calc(100% - 400px);
	font-size: 3rem;
	float: left;
}
@media screen and (max-width: 760px) {
	header h1 {
		display: none;
	}
}
header nav {
	width: 400px;
	float: right;
}
@media screen and (max-width: 760px) {
	header nav {
		width: 100%;
		float: none;
	}
}
header nav ul {
	display: flex;
	list-style-type: none;
}
header nav ul li {
	width: calc(100% / 4);
	text-align: center;
}
header nav ul li a {
	display: block;
	line-height: 3;
	color: #000;
	text-decoration: none;
}
header.fixed {							/* ヘッダー（固定時のスタイル） */
	position: fixed;
	left: 0;
	top:0;
	height: 50px;
	padding: 20px 10px;
	background: #000;
}
header.fixed h1 {
	display: none;
}
header.fixed nav {
	float: none;
}
header.fixed nav ul li a {
	line-height: 1;
	color: #fff;
}
main {									/* メイン */
	width: 100%;
	padding: 20px;
}
footer {								/* フッタ */
	width: 100%;
	padding: 20px;
	text-align: center;
	border-top: #ccc 1px solid;
	background: rgb(199,234,255);
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<header>
		<h1>LOGO</h1>
		<nav>
			<ul>
				<li><a href="#">MENU1</a></li>
				<li><a href="#">MENU2</a></li>
				<li><a href="#">MENU3</a></li>
				<li><a href="#">MENU4</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41～45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46～50行 -->
		</ol>
	</main>
	<footer>
		<p>Copyright&copy; ・・・</p>
	</footer>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ヘッダーの固定化の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {
	$(window).scroll(function () {
		var headerBottom = $('header').outerHeight();
		if ($(window).scrollTop() > headerBottom) {
			$('header').addClass('fixed');
		}
		else {
			$('header').removeClass('fixed');
		}
	});
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

    P4.7 ページ内リンク

    P4.7.1 ページ内リンク

    (1) 説明

    • メニューをクリックするとページ内のリンク先にスクロールします。

    (2) 表示形式

    • メニューをクリックしてページ内のリンク先にスクロールされることを確認してください。

    別画面で表示

    (3) 使用機能

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

    (4) 実装手順

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

    (5) サンプルコード

    サンプルコード表示
    (a) ファイル配置
    • 04-scroll/71-pagelink-1
      • index.html
      • 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 {
	border: #fff 1px solid;
	padding: 10px;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ページ内リンクの設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
header {
	padding: 20px 0 10px 0;
	background: steelblue;
	color: #fff;
}
nav ul {
	padding: 0 20px 10px 20px;
	margin-bottom: 20px;
	overflow: hidden;
	background: steelblue;
	list-style-type: none;
}
nav ul li {
	width: calc(100% / 3);
	text-align: center;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
	border-left: #ccc 1px solid;
	float: left;
}
nav ul li:last-child {
	border-right: #ccc 1px solid;
}
nav ul li a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #fff;
}
@media screen and (max-width: 760px) {
	nav ul li a {
		font-size: 0.8rem;
	}
}
nav ul li a::before {
	content: "▼";
	font-size: 1.4em;
	color: #ccc;
	padding-right: 0.5em;
}
@media screen and (max-width: 760px) {
	nav ul li a::before {
		content: "";
		padding-right: 0;
	}
}
h1 {
	font-size: 1.4em;
	text-align: center;
}
h2 {
	padding: 10px 0;
	font-size: 1.2em;
	text-align: center;
}
section {
	border: #ccc 1px solid;
	margin-bottom: 20px;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<div class="wrapper">
		<!-- ページ内リンクの定義 -->
		<header id="header">
			<h1>ヘッダーエリア</h1>
		</header>
		<nav>
			<ul id="page-link">
				<li><a href="#section-1">飛び先-1</a></li>
				<li><a href="#section-2">飛び先-2</a></li>
				<li><a href="#section-3">飛び先-3</a></li>
			</ul>
		</nav>
		<section id="section-1">
			<h2>飛び先-1</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
		<section id="section-2">
			<h2>飛び先-2</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
		<section id="section-3">
			<h2>飛び先-3</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページ内リンクの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$('#page-link li a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');				// リンク先のid
	var pos = $(elmHash).offset().top;				// リンク先の位置
	$('body,html').animate({scrollTop: pos}, 800);	// 800msでスクロール
	return false;									// リンク処理は無効
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

    P4.7.2 ヘッダー固定

    (1) 説明

    • メニューをクリックするとページ内のリンク先にスクロールします。
    • ヘッダー部は、固定位置に表示されます。

    (2) 表示形式

    • メニューをクリックしてページ内のリンク先にスクロールされることを確認してください。

    別画面で表示

    (3) 使用機能

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

    (4) 実装手順

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

    (5) サンプルコード

    サンプルコード表示
    (a) ファイル配置
    • 04-scroll/72-pagelink-2
      • index.html
      • 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 {
	border: #fff 1px solid;
	padding: 10px;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ページ内リンクの設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
header {
	width: calc(100% - 22px);
	position: fixed;
	top: 0px;
	left: 11px;
	padding: 20px 0;
	background: steelblue;
	color: #fff;
}
nav {
	padding-top: 10px;
}
nav ul {
	padding: 0 20px;
	overflow: hidden;
	background: steelblue;
	list-style-type: none;
}
nav ul li {
	width: calc(100% / 3);
	text-align: center;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
	border-left: #ccc 1px solid;
	float: left;
}
nav ul li:last-child {
	border-right: #ccc 1px solid;
}
nav ul li a {
	display: block;
	padding: 5px 0;
	text-decoration: none;
	color: #fff;
}
@media screen and (max-width: 760px) {
	nav ul li a {
		font-size: 0.8rem;
	}
}
nav ul li a::before {
	content: "▼";
	font-size: 1.4em;
	color: #ccc;
	padding-right: 0.5em;
}
@media screen and (max-width: 760px) {
	nav ul li a::before {
		content: "";
		padding-right: 0;
	}
}
h1 {
	font-size: 1.4em;
	text-align: center;
}
h2 {
	padding: 10px 0;
	font-size: 1.2em;
	text-align: center;
}
section {
	border: #ccc 1px solid;
	margin-bottom: 20px;
}
.space {
	height: 132px;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<div class="wrapper">
		<!-- ページ内リンクの定義 -->
		<header id="header">
			<h1>ヘッダーエリア</h1>
			<nav>
				<ul id="page-link">
					<li><a href="#section-1">飛び先-1</a></li>
					<li><a href="#section-2">飛び先-2</a></li>
					<li><a href="#section-3">飛び先-3</a></li>
				</ul>
			</nav>
		</header>
		<div class="space"></div>
		<section id="section-1">
			<h2>飛び先-1</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
		<section id="section-2">
			<h2>飛び先-2</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
		<section id="section-3">
			<h2>飛び先-3</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01～05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06～10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11～15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16～20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21～25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26～30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31～35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36～40行 -->
			</ol>
		</section>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページ内リンクの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$('#page-link li a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');				// リンク先のid
	var pos = $(elmHash).offset().top - 132;		// リンク先の位置（ヘッダー部を引く）
	$('body,html').animate({scrollTop: pos}, 800);	// 800msでスクロール
	return false;									// リンク処理は無効
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

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