HTML-CSS 入門講座

HTML-CSS 入門講座

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

WebParts-3
ウィンドウ

目次

P3.1 はじめに

P3.1.1 概要

ウィンドウは、表示されているページに被さるように表示される画面の機能です。

画面遷移
画面の切り替え時に画面に被さるように表示されるウィンドウです。画面遷移が完了するとメイン画面が表示されます。
プログレスバー
ページの読み込みや処理などの進捗を表すウィンドウです。画面遷移が完了するとメイン画面が表示されます。
モーダル
画面に被さるようにして表示されるウィンドウです。モーダルウィンドウ内で指定された操作を完了またはキャンセルするまで他のウィンドウを操作できません。
ポップアップ
画面に被さるようにして表示されるウィンドウです。ポップアップしていても他のウィンドウの操作をすることができます。

P3.2 画面遷移

P3.2.1 画面遷移-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) ファイル配置
  • 03-window/21-transition-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 {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 背景が上から下に伸びる設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.background {							/* 流れる背景の初期状態 */
	display: none;
}
.container.appear .background {			/* 流れる背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;/*伸びる背景色の設定*/
	z-index: 999;
	transform: scaleY(0);
	animation-name: pageAnime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime {
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}
	50% {
		transform-origin: top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 背景が上から下に伸びる定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 流れる背景の領域 -->
	<div class="background"></div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<!-- 画面遷移後の領域 -->
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- 背景が上から下に伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	$("#background-text").delay(1200).fadeOut('slow');					// 背景に表示されているテキストを1.2秒でフェードアウト
	$("#background-container").delay(1500).fadeOut('slow',function() {	// 背景をを1.5秒でフェードアウト
		// ここに背景をを1.5秒でフェードアウトした後の処理記述
		$('.container').addClass('appear');								// 流れる背景の実施
	});
	$('#background').on('animationend', function() {    
		// ここにアニメーションが終了時の処理を記述
	});
	// 画面遷移が終了時の処理を記述
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P3.2.2 画面遷移-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) ファイル配置
  • 03-window/22-transition-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 {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* 背景が中央から外に伸びる設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container {
	background: #333;
}
.container.appear {
	background: #fff;
}
.background1,							/* 背景の初期状態 */
.background2 {
	display: none;
}
.container.appear .background1 {		/* 右に消える背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	left:50%;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background-color: #333;
	transform: scaleX(1);
	animation-name: pageAnime1;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime1 {
	0% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50% {
		transform-origin: right;
		}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
.container.appear .background2 {		/* 左に消える背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	right: 50%;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background-color: #333;
	transform: scaleX(1);
	animation-name: pageAnime2;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime2{
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}

	50% {
		transform-origin:left;
		}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 背景が中央から外に伸びる定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 右に消える領域 -->
	<div class="background1"></div>
	<!-- 左に消える領域 -->
	<div class="background2"></div>
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- 背景が中央から外に伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	$("#background-text").delay(1200).fadeOut('slow');					// 背景に表示されているテキストを1.2秒でフェードアウト
	$("#background-container").delay(1500).fadeOut('slow',function() {	// 背景をを1.5秒でフェードアウト
		// ここに背景をを1.5秒でフェードアウトした後の処理を記述
		$('.container').addClass('appear');								// 流れる背景の実施
	});
	$('#background').on('animationend', function() {    
		// ここにアニメーションが終了時の処理を記述
	});
	// ここに画面遷移が終了時の処理を記述
});
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</script>

</body>
</html>

P3.2.3 画面遷移-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) ファイル配置
  • 03-window/23-transition-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>背景が円形に縮小するサンプル</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） ▼▼▼ */
/* 背景が円形に縮小する設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container {
	background: #333;
}
.container.appear {
	background: #fff;
}
.background {							/* 円の初期状態 */
	display: none;
	position: fixed;
	top:calc(50% - 1rem);
	left:calc(50% - 1rem);
	width: 2rem;
	height: 2rem;
	background: #333;
	transform: scale(100);
	z-index: 999;
}
.container.appear .background {			/* 円が縮小するアニメーション */
	display: block;
	border-radius: 50%; 
	animation-name: pageAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes pageAnime{
	0% {
		transform: scale(100);
	}
	100% {
		transform: scale(0);
		display: none;
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- 背景が円形に縮小する定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 円の領域 -->
	<div class="background"></div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<!-- 画面遷移後の領域 -->
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- 背景が円形に縮小する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	$("#background-text").delay(1200).fadeOut('slow');					// 背景に表示されているテキストを1.2秒でフェードアウト
	$("#background-container").delay(1500).fadeOut('slow',function() {	// 背景をを1.5秒でフェードアウト
		// ここに背景をを1.5秒でフェードアウトした後の処理を記述
		$('.container').addClass('appear');								// 流れる背景の実施
	});
	$('#background').on('animationend', function() {    
		// ここにアニメーションが終了時の処理を記述
	});
	// ここに画面遷移が終了時の処理を記述
});
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</script>

</body>
</html>

P3.3 ローディング

P2.3.1 ローディング-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) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 03-window/31-loading-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>
html {
	height:100%;
}
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） ▼▼▼ */
/* ローディングの設定 */
#loader_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 40vh 50px 0 50px;
	text-align: center;
	background-color:#cecbc4;
	background-image: linear-gradient(to bottom, #f8f8f8 0%, #999999 100%);
	z-index: 999;
}
#bar_container {
	height: 40px;
	background: #dcdbd7;
	border-radius: 20px;
	border-top: 1px solid #cfcec9;
	border-bottom: 1px solid #f7f6f4;
	box-shadow: 0 -1px 0 #bab9b4;
	margin-bottom: 24px;
	position: relative;
}
#progress_bar {
	background-color: #ffc4d0;
	background-image: linear-gradient(to bottom, #fde7e7 0%, #c93045 100%);
	height: 108%;
	position: absolute;
	top: -3px;
	left: 0px;
	border-top: 1px solid #e5ebf4;
	border-radius: 20px;
	width: 10%;
	transition: width 0.1s ease-in-out;
}
#progress_percentage {
	position: absolute;
	top: -40px;
	right: -18px;
	width: 46px;
	height: 28px;
	padding-top: 6px;
	background: #edeef2;
	background-image: linear-gradient(to bottom, #edeef2 0%, #c9c9d3 100%);
	border-top: 1px solid white;
	border-right: 1px solid #d2d2d0;
	border-left: 1px solid #d2d2d0;
	border-bottom: 1px solid #999999;
	border-radius: 7px;
	font-size: 12px;
	color: #737371;
}
#progress_percentage::before {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -11px;
	border-top: 5px solid #999;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}
#progress_percentage::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -10px;
	border-top: 5px solid #c9c9d3;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}
#text_container {
	color: #333;
	font-weight: bold; 
	font-size: 24px;
}
#text_container span {
	display: block;
	font-weight: normal;
	font-size: 16px;
	margin-top: 6px;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */

/* メイン画面（ローディング完了後の画面） */
#main_container {
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
}

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ローディングの定義 -->
	<div id="loader_container">
		<div id="bar_container">
			<div id="progress_bar">
				<div id="progress_percentage">
					10%
				</div>
			</div>
		</div>
		<div id="text_container">
			ローディング中<span>お待ちください...</span>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<main>
		<div id="main_container">
			<p>【メイン画面】<br>ローディング完了後に見えます。</p>
		</div>
	</main>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ローディングの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
var bar = $('#progress_bar');
var percentage = parseInt($('#progress_percentage').html());
function stopProgress() {
	clearInterval(progress);
}
var progress = setInterval(function() {
	percentage = percentage + 5;
	if (percentage <= 100) {
		$('#progress_percentage').html(percentage + '%');
		if (percentage > 10) {
			bar.css('width',percentage+'%');
		}
	}
	else {
		stopProgress();
		$("#loader_container").fadeOut(10);
	}
},100);
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P3.3.2 ローディング-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) サンプルコード

サンプルコード表示
■ ファイル配置
  • 03-window/32-loading-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>
html {
	height:100%;
}
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） ▼▼▼ */
/* ローディングの設定 */
#loader_wrapper {						/* Loading背景画面設定 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align: center;
	color: #fff;
}
#loader_text {							/* Loading画像中央配置 */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	color: #fff;
	z-index: 999;
	transform: translate(-50%, -50%);
}
.loader_cover {							/* 割れる画面のアニメーション */
	width: 100%;
	height: 50%;
	background: #4a2a2a;
	transition: all .2s cubic-bezier(.04, .435, .315, .9);
	transform: scaleY(1);
}
.loader_cover_up {						/* 上の画面 */
	transform-origin: center top;
}
.loader_cover_down {					/* 下の画面 */
	position: absolute;
	bottom: 0;
	transform-origin: center bottom;
}
.coveranime {							/* クラス名がついたらY軸方向に0 */
	transform: scaleY(0);
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */

/* メイン画面（ローディング完了後の画面） */
#main_container {
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
}

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ローディングの定義 -->
	<div id="loader_container">
		<div id="loader_wrapper">
			<div id="loader_text"></div>
			<div class="loader_cover loader_cover_up"></div>
			<div class="loader_cover loader_cover_down"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<main>
		<div id="main_container">
			<p>【メイン画面】<br>ローディング完了後に見えます。</p>
		</div>
	</main>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ローディングの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/progressbar.min.js" type="text/javascript"></script>
<script>
var bar = new ProgressBar.Line(loader_text, {		// 進捗表示用のid名を指定
	easing: 'easeInOut',							// アニメーション効果
	duration: 1000,									// 進捗時間
	strokeWidth: 2,									// 進捗ゲージの太さ
	color: '#ccc',									// 進捗ゲージの色
	trailWidth: 2,									// ゲージベースの線の太さ
	trailColor: '#555',								// ゲージベースの線の色
	text: {											// テキストの形状
		style: {									// テキストの位置
			position: 'absolute',
			left: '50%',
			top: '50%',
			padding: '0',
			margin: '-40px 0 0 0',					// バーより上に配置
			transform: 'translate(-50%, -50%)',
			'font-size': '1rem',
			color: '#fff',
		},
		autoStyleContainer: false					// 自動付与のスタイルを切る
	},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %');
	}
});
bar.animate(1.0, function () {						// バーを描画する割合（1.0 なら100%まで
	$("#loader_text").fadeOut(10);					// フェイドアウトでテキストを削除
	$(".loader_cover_up").addClass("coveranime");	// カバーが上に上がるクラス追加
	$(".loader_cover_down").addClass("coveranime");	// カバーが下に下がるクラス追加
	$("#loader_wrapper").fadeOut();					// ローディングエリアをフェードアウト
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P3.4 モーダル

P3.4.1 Modaal-1

(1) 説明

  • modaal プラグインを使用したモーダルウィンドウです。ページ表示時にモーダルウィンドウを表示します。
  • modaal プラグインは、テキスト、写真、動画などを使用できる汎用性の高いプラグインです。

(2) 表示形式

  • ページ表示時にモーダルウィンドウが表示されることを確認してください。
  • クローズアイコンをクリックしてモーダルウィンドウが消えることを確認してください。
  • リロードを行ってモーダルウィンドウの表示を確認してください。

リロード　 別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • モーダルウィンドウ表示（Modaal）
    公式サイト：Modaal（https://humaan.com/modaal/）
    CDN（CSS）：https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css
    CDN（JS）：https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 03-window/41-modaal-1
    • index.html
    • css
      • modaal.min.css
    • js
      • jquery-3.6.0.min.js
      • modaal.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">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="css/modaal.min.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<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） ▼▼▼ */
/* ページオープン時にモーダルウィンドウを表示する設定 */
#info {
	display: none;						/* モーダルウィンドウ領域を非表示に設定 */
}
.modaal-container {
	max-width: 600px;					/* モーダルウィンドウの横幅 */
}
.modaal-close:after, 
.modaal-close:before{
	background: #ccc;					/* モーダルウィンドウのボタンの色 */
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background: #666;					/* モーダルウィンドウの背景色 */
}
.main-wrapper {
	padding: 40px 0;
}
.main-wrapper p {
	line-height: 3;
	text-align: center;
}
.window-wrapper {
	padding: 40px 0;
}
.window-wrapper p {
	line-height: 3;
	text-align: center;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ページオープン時にモーダルウィンドウを表示する定義 -->
	<div class="wrapper">
		<section class="main-wrapper">
            <p>【メイン画面】<br>ウィンドウを開くと下に隠れます。</p>
		    <p><a href="#info" class="modal-open">モーダルウィンドウを開く</a></p>
		</section>
		<section id="info">
			<div class="window-wrapper">
	            <p class="message">【モーダルウィンドウ】<br>ウィンドウコンテンツ</p>
			</div>
		</section>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ページオープン時にモーダルウィンドウを表示する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/modaal.min.js" type="text/javascript"></script>
<script>
$('.modal-open').modaal({						// ウィンドウを表示
	start_open: true,							// ページロード時に表示
	overlay_close: true,						// ウィンドウの背景クリック時に閉じる
	before_open: function() {					// ウィンドウが開く前に行う
		$('html').css('overflow-y','hidden');	// 縦スクロールバーを非表示
	},
	after_close:function() {					// モーダルが閉じた後に行う
		$('html').css('overflow-y','scroll');	// 縦スクロールバーを表示
	}
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P3.4.2 Modaal-2

(1) 説明

  • modaal プラグインを使用したモーダルウィンドウです。
  • テキスト、確認テキスト、画像、動画（Youtube）、フレーム（iframe）の各モーダルウィンドウを表示します。

(2) 表示形式

  • 表示されているモーダルウィンドウ種別をクリックして対象のモーダルウィンドウが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • モーダルウィンドウ表示（Modaal）
    公式サイト：Modaal（https://humaan.com/modaal/）
    CDN（CSS）：https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css
    CDN（JS）：https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 03-window/42-modaal-2
    • index.html
    • css
      • modaal.min.css
    • js
      • jquery-3.6.0.min.js
      • modaal.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">
<!-- ▼▼▼ CSS（ここから）（※1） ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="css/modaal.min.css">
<!-- ▲▲▲ CSS（ここまで） ▲▲▲ -->
<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） ▼▼▼ */
/* モーダルウィンドウを表示する設定 */
.hide-area {
	display: none;						/* モーダルウィンドウ領域を非表示に設定 */
}
.modaal-container {
	max-width: 600px;					/* モーダルウィンドウの横幅 */
}
.modaal-close:after, 
.modaal-close:before{
	background: #ccc;					/* モーダルウィンドウのボタンの色 */
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background: #666;					/* モーダルウィンドウの背景色 */
}
.main-wrapper {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 0;
}
.main-wrapper p {
	line-height: 3;
	text-align: center;
}
.window-wrapper {
	padding: 40px 0;
}
.window-wrapper p {
	line-height: 3;
	text-align: center;
}
.gallery-list {
	display: flex;
	list-style-type: none;
}
.gallery-list li {
	width: calc(100% / 3);
	padding: 0 5px;
}
.gallery-list li img {
	width: 100%;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- モーダルウィンドウを表示する定義 -->
	<div class="wrapper">
		<section class="main-wrapper">
            <p>【メイン画面】<br>ウィンドウを開くと下に隠れます。</p>
		    <p><a href="#info" class="info">【テキストのウィンドウを開く】</a></p>
		    <p><a href="#confirm" class="confirm">【確認を促すウィンドウを開く】</a></p>
		    <p>【画像のウィンドウを開く】<br>（写真をクリック）</p>
		    <ul class="gallery-list">
		    	<li><a href="images/sample-1024-768-01.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-01.jpg" alt="サンプル-01"></a></li>
		    	<li><a href="images/sample-1024x768-02.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-02.jpg" alt="サンプル-01"></a></li>
		    	<li><a href="images/sample-1024x768-03.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-03.jpg" alt="サンプル-01"></a></li>
		    </ul>
		    <p><a href="https://www.youtube.com/embed/k7eWaTdtnkU" class="video-open">【動画のウィンドウを開く】</a></p>
		    <p><a href="https://html-css.hamaya2020.com" class="iframe-open">【iframeのウィンドウを開く】</a></p>
		</section>
		<section id="info" class="hide-area">
			<div class="window-wrapper">
	            <p class="message">【テキストモーダルウィンドウ】<br>テキストウィンドウのコンテンツです。</p>
			</div>
		</section>
		<section id="confirm" class="hide-area"></section>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- モーダルウィンドウを表示する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/modaal.min.js" type="text/javascript"></script>
<script>
$(".info").modaal( {							// テキストを含む一般的なモーダルウィンドウ
	overlay_close: true,						// モーダル背景クリック時に閉じる
	before_open: function() {					// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');	// 縦スクロールバーを非表示
	},
	after_close:function() {					// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');	// 縦スクロールバーを表示
	}
});
$(".confirm").modaal( {							// 確認を促すモーダルウィンドウ
	type: 'confirm',
	confirm_title: '【継続確認】',				// 確認画面タイトル
	confirm_button_text: '継続', 				// 確認画面ボタンのテキスト
	confirm_cancel_button_text: '中止',			// 確認画面キャンセルボタンのテキスト
	confirm_content: '準備ができました。処理を継続しますか。',	// 確認画面の内容
});
$(".gallery").modaal( {							// 画像のモーダルウィンドウ
	type: 'image',
	overlay_close:true,							// モーダル背景クリック時に閉じる
	before_open: function() {					// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');	// 縦スクロールバーを非表示
	},
	after_close:function() {					// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');	// 縦スクロールバーを出す
	}
});
$(".video-open").modaal( {						// 動画のモーダル
	type: 'video',
	overlay_close: true,						// モーダル背景クリック時に閉じる
	background: '#666',							// 背景色
	overlay_opacity: 0.8,						// 透過
	before_open: function() {					// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');	// 縦スクロールバーを非表示
	},
	after_close:function() {					// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');	// 縦スクロールバーを表示
	}
});
$(".iframe-open").modaal( {						// iframeのモーダルウィンドウ
	type: 'iframe',
	width: 960,									// iframe横幅
	height: 500,								// iframe高さ
	overlay_close: true,						// モーダル背景クリック時に閉じる
	before_open:function() {					//  モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');	// 縦スクロールバーを非表示
	},
	after_close:function() {					// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');	// 縦スクロールバーを表示
	}
});
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</script>

</body>
</html>

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