HTML-CSS 入門講座

HTML-CSS 入門講座

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

WebParts-13
その他

目次

P13.1 はじめに

P13.1.1 概要

その他のパーツです。

時計
時計パーツです。
フォーム
各種の定型フォームです。

P13.2 時計

P13.2.1 アナログ時計-1

(1) 説明

  • 秒針が連続稼働するアナログ時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/21-clock-1
    • index.html
(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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* アナログ時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 0px auto;
}
#clock-body {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}
#clock-body::before {
	content: "";
	display: block;
	padding-top: 100%;
}
#clock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 20px #ccc solid;
	background: #eee;
}
#second-hand {
	width: 6px;
	height: 55%;
	position: absolute;
	bottom: calc(50% - 55px);
	left: calc(50% - 3px);
	background: #c64e4e;
	border-radius: 3px;
	transform-origin: center calc(100% - 55px);
	animation: rotation-s 60s linear infinite;
}
#second-hand::before {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	right: -7px;
	bottom: 45px;
	background: #c64e4e;
	border-radius: 10px;
}
#minute-hand {
	width: 12px;
	height: 40%;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 6px);
	background: #000;
	border-radius: 6px;
	transform-origin: center bottom;
	animation: rotation-m 3600s linear infinite;
}
#hour-hand {
	width: 16px;
	height: 25%;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 8px);
	background: #000;
	border-radius: 8px;
	transform-origin: center bottom;
	animation: rotation-h 43200s linear infinite;
}
#hour-hand::before {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	right: -7px;
	bottom: -15px;
	background-color: #000;
	border-radius: 15px;
}
.hour-b {
	width: 50%;
	height: 16px;
	border-left: #ccc 20px solid;
	position: absolute;
	right: calc(50%);
	top: calc(50% - 8px);
	transform-origin: calc(100%) center;
}
.hour-b.b1 {
	transform: rotate(0deg);
}
.hour-b.b2 {
	transform: rotate(30deg);
}
.hour-b.b3 {
	transform: rotate(60deg);
}
.hour-b.b4 {
	transform: rotate(90deg);
}
.hour-b.b5 {
	transform: rotate(120deg);
}
.hour-b.b6 {
	transform: rotate(150deg);
}
.hour-b.b7 {
	transform: rotate(180deg);
}
.hour-b.b8 {
	transform: rotate(210deg);
}
.hour-b.b9 {
	transform: rotate(240deg);
}
.hour-b.b10 {
	transform: rotate(270deg);
}
.hour-b.b11 {
	transform: rotate(300deg);
}
.hour-b.b12 {
	transform: rotate(330deg);
}
.hour-n.n1 {
	top: calc(14% - 38px);
	left: calc(71% - 15px);
}
.hour-n {
	display: inline-block;
	font-size: 3rem;
	color: #888;
	position: absolute;
}
.hour-n.n1 {
	top: calc(14% - 38px);
	left: calc(71% - 15px);
}
.hour-n.n2 {
	top: calc(28% - 38px);
	left: calc(86% - 15px);
}
.hour-n.n3 {
	top: calc(51% - 38px);
	left: calc(93% - 15px);
}
.hour-n.n4 {
	top: calc(71% - 38px);
	left: calc(86% - 15px);
}
.hour-n.n5 {
	top: calc(86% - 38px);
	left: calc(71% - 15px);
}
.hour-n.n6 {
	top: calc(92% - 38px);
	left: calc(50% - 15px);
}
.hour-n.n7 {
	top: calc(86% - 38px);
	left: calc(30% - 15px);
}
.hour-n.n8 {
	top: calc(71% - 38px);
	left: calc(14% - 15px);
}
.hour-n.n9 {
	top: calc(50% - 38px);
	left: calc(8% - 15px);
}
.hour-n.n10 {
	top: calc(31% - 38px);
	left: calc(16% - 30px);
}
.hour-n.n11 {
	top: calc(16% - 38px);
	left: calc(29% - 30px);
}
.hour-n.n12 {
	top: calc(9% - 38px);
	left: calc(50% - 30px);
}

/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- アナログ時計の定義 -->
	<div class="wrapper">
		<div id="clock-body">
			<div id="clock">
				<div class="hour-b b1"></div>
				<div class="hour-b b2"></div>
				<div class="hour-b b3"></div>
				<div class="hour-b b4"></div>
				<div class="hour-b b5"></div>
				<div class="hour-b b6"></div>
				<div class="hour-b b7"></div>
				<div class="hour-b b8"></div>
				<div class="hour-b b9"></div>
				<div class="hour-b b10"></div>
				<div class="hour-b b11"></div>
				<div class="hour-b b12"></div>
				<div class="hour-n n1">1</div>
				<div class="hour-n n2">2</div>
				<div class="hour-n n3">3</div>
				<div class="hour-n n4">4</div>
				<div class="hour-n n5">5</div>
				<div class="hour-n n6">6</div>
				<div class="hour-n n7">7</div>
				<div class="hour-n n8">8</div>
				<div class="hour-n n9">9</div>
				<div class="hour-n n10">10</div>
				<div class="hour-n n11">11</div>
				<div class="hour-n n12">12</div>
				<div id="hour-hand"></div>
				<div id="minute-hand"></div>
				<div id="second-hand"></div>
			</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- アナログ時計の制御 -->
<script>
function clock() {
	var time = new Date();
	var second = time.getSeconds();
	var minute = time.getMinutes();
	var hour = time.getHours();
	if (hour >= 12) {
		hour = hour - 12;
	}
	var secondDeg = (second * 360 / 60) ;
	var minuteDeg = (minute * 360 / 60) + (second * 360 / 3600);
	var hourDeg = (hour * 360 / 12) + (minute * 360 / 720)  + (second * 360 / 43200);
	var animation = document.createElement("style");
	animation.innerHTML = "@keyframes rotation-s {0% {transform: rotate(" + secondDeg + "deg)} 100% {transform: rotate(" + (secondDeg + 360) + "deg)}} @keyframes rotation-m {0% {transform: rotate(" + minuteDeg + "deg)} 100% {transform: rotate(" + (minuteDeg + 360) + "deg)}} @keyframes rotation-h {0% {transform: rotate(" + hourDeg + "deg)} 100% {transform: rotate(" + (hourDeg + 360) + "deg)}}";
	document.head.appendChild(animation);
}
clock();
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.2 アナログ時計-2

(1) 説明

  • 時計の背景に画像を配置したアナログ時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/22-clock-2
    • index.html
    • images
      • background.jpg
(b) 画像
  • 背景 (background.jpg:背景)
(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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* アナログ時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}
.anaclo {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	overflow:hidden;
}
.anaclo-frame {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	border: 10px solid #444;
	border-radius: 50%;
	background: url("images/background.jpg") no-repeat;
	background-size: contain;
}
.anaclo-frame::before {
	content: "";
	display: block;
	padding-top: 100%;
}
#anaclo-hour {
	width: 14px;
	height: 25%;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 7px);
	background-color: #fff;
	transform-origin: 50% 100%;
}
#anaclo-minute {
	width: 8px;
	height: 40%;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 4px);
	background-color: #fff;
	transform-origin: 50% 100%;
}
#anaclo-second {
	width: 2px;
	height: 46%;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 1px);
	background-color: #fff;
	transform-origin: 50% 100%;
}
.anaclo-center {
	width: 3%;
	height: 3%;
	position: absolute;
	top: 48.5%;
	left: 48.5%;
	border: 3px solid #333;
	border-radius: 50%;
	background-color: #fff;
}
.anaclo-num {
	position: absolute;
	height: 1em;
	line-height: 1em;
	font-size: 73px;
	color: #fff;
	transform: translate(-50%,-50%);
}
@media screen and (max-width: 640px) {
	.anaclo-num {
		font-size: 10vw;
	}
}
.anaclo-12 {
	top: 12%;
	left: 50%;
}
.anaclo-6 {
	top: 90%;
	left: 50%;
}
.anaclo-3 {
	top: 50%;
	left: 91%;
}
.anaclo-9 {
	top: 50%;
	left: 9%;
}
.anaclo-1 {
	top: 18%;
	left: 70.5%;
}
.anaclo-7 {
	top: 84%;
	left: 29.5%;
}
.anaclo-2 {
	top: 32%;
	left: 85%;
}
.anaclo-8 {
	top: 70%;
	left: 15%;
}
.anaclo-4 {
	top: 70%;
	left: 85%;
}
.anaclo-10 {
	top: 32%;
	left: 17.5%;
}
.anaclo-5 {
	top: 84%;
	left: 70.5%;
}
.anaclo-11 {
	top: 18%;
	left: 30%;
}
.anaclo-dot-outer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.anaclo-dot {
	position: absolute;
	top: 4%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 44px;
	color: #fff;
}
@media screen and (max-width: 640px) {
	.anaclo-dot {
		font-size: 6vw;
	}
}
.anaclo-dot1 {
	transform: rotateZ(30deg);
}
.anaclo-dot2 {
	transform: rotateZ(60deg);
}
.anaclo-dot3 {
	transform: rotateZ(90deg);
}
.anaclo-dot4 {
	transform: rotateZ(120deg);
}
.anaclo-dot5 {
	transform: rotateZ(150deg);
}
.anaclo-dot6 {
	transform: rotateZ(180deg);
}
.anaclo-dot7 {
	transform: rotateZ(210deg);
}
.anaclo-dot8 {
	transform: rotateZ(240deg);
}
.anaclo-dot9 {
	transform: rotateZ(270deg);
}
.anaclo-dot10 {
	transform: rotateZ(300deg);
}
.anaclo-dot11 {
	transform: rotateZ(330deg);
}
@media screen and (min-width:769px) {
	.anaclo-num{
		font-size: 85px;
	}
	.anaclo-dot{
		top: 4%;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- アナログ時計の定義 -->
	<div class="wrapper">
		<div class="anaclo">
			<div class="anaclo-frame"></div>
			<span class="anaclo-num anaclo-1">1</span>
			<span class="anaclo-num anaclo-2">2</span>
			<span class="anaclo-num anaclo-3">3</span>
			<span class="anaclo-num anaclo-4">4</span>
			<span class="anaclo-num anaclo-5">5</span>
			<span class="anaclo-num anaclo-6">6</span>
			<span class="anaclo-num anaclo-7">7</span>
			<span class="anaclo-num anaclo-8">8</span>
			<span class="anaclo-num anaclo-9">9</span>
			<span class="anaclo-num anaclo-10">10</span>
			<span class="anaclo-num anaclo-11">11</span>
			<span class="anaclo-num anaclo-12">12</span>
			<div class="anaclo-dot-outer anaclo-dot1"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot2"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot3"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot4"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot5"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot6"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot7"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot8"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot9"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot10"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot11"><span class="anaclo-dot">・</span></div>
			<div class="anaclo-dot-outer anaclo-dot12"><span class="anaclo-dot">・</span></div>
			<div id="anaclo-hour"></div>
			<div id="anaclo-minute"></div>
			<div id="anaclo-second"></div>
			<div class="anaclo-center"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- アナログ時計の制御 -->
<script>
const hour_hand = document.getElementById('anaclo-hour');
const minute_hand = document.getElementById('anaclo-minute');
const second_hand = document.getElementById('anaclo-second');
function move_clock(ini) {
	const date = new Date();
	const second = ( 360 * date.getSeconds() / 60 );
	const minute = ( 360 * date.getMinutes() / 60);
	const hour = (360 * (date.getHours() * 60 + date.getMinutes()) / (60 * 12) );
	second_hand.style.transform = `rotate(${second}deg)`;
	minute_hand.style.transform = `rotate(${minute}deg)`;
	hour_hand.style.transform = `rotate(${hour}deg)`;
	if (ini) {
		setInterval(()=> {
			move_clock(false);
		},1000);
	}
}
move_clock(true);
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.3 アナログ時計-3

(1) 説明

  • 黒基調のシンプルなアナログ時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/23-clock-3
    • index.html
(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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* アナログ時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}
.clock-body {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}
.clock-body::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.clock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	border-radius: 50%;
	border: solid 10px silver;
}
.clock::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: calc(50% - 8px);
	border-radius: 50%;
	width: 16px;
	height: 16px;
	background-color: silver;
}
.dials {
	position: relative;
	width: 100%;
	height: 100%;
}
.dials > div {
	position: absolute;
	top: 0;
	left: calc(50% - 3px);
	width: 6px;
	height: 50%;
	transform-origin: bottom;
}
.dials > div::after {
	position: absolute;
	top: 0;
	content: "";
	width: 6px;
	height: 15px;
	background-color: silver;
}
.dials div:nth-child(1) {
	transform: rotate(30deg);
}
.dials div:nth-child(2) {
	transform: rotate(60deg);
}
.dials div:nth-child(3) {
	transform: rotate(90deg);
}
.dials div:nth-child(4) {
	transform: rotate(120deg);
}
.dials div:nth-child(5) {
	transform: rotate(150deg);
}
.dials div:nth-child(6) {
	transform: rotate(180deg);
}
.dials div:nth-child(7) {
	transform: rotate(210deg);
}
.dials div:nth-child(8) {
	transform: rotate(240deg);
}
.dials div:nth-child(9) {
	transform: rotate(270deg);
}
.dials div:nth-child(10) {
	transform: rotate(300deg);
}
.dials div:nth-child(11) {
	transform: rotate(330deg);
}
.dials div:nth-child(12) {
	transform: rotate(360deg);
}
.hand {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background-color: silver;
	transform-origin: 50% 100%;
}
.hour.hand {
	width: 8px;
	height: 30%;
	left: calc(50% - 4px);
}
.minute.hand {
	width: 4px;
	height: 40%;
	left: calc(50% - 2px);
}
.second.hand {
	width: 2px;
	height: 45%;
	left: calc(50% - 1px);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- アナログ時計の定義 -->
	<div class="wrapper">
		<div class="clock-body">
			<div class="clock">
				<div class="dials">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="hour hand"></div>
				<div class="minute hand"></div>
				<div class="second hand"></div>
			</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- アナログ時計の制御 -->
<script>
const hour = document.querySelector(".hour.hand");
const minute = document.querySelector(".minute.hand");
const second = document.querySelector(".second.hand");

function clock() {
	date = new Date();
	s = (360 / 60) * date.getSeconds();
	m = (360 / 60) * (date.getMinutes() + (date.getSeconds() / 60));
	h = (360 / 12) * (date.getHours() + (date.getMinutes() / 60));
	second.style.transform = `rotate(${s}deg)`;
	minute.style.transform = `rotate(${m}deg)`;
	hour.style.transform = `rotate(${h}deg)`;
}
clock();
setInterval(clock, 1000);
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.4 アナログ時計-4

(1) 説明

  • 黒基調のアナログ時計にデジタル表示を追加しました。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/24-clock-4
    • index.html
(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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* アナログ時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
	position: relative;
}
.clock-body {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}
.clock-body::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.clock {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	border-radius: 50%;
	border: solid 10px silver;
}
.clock::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: calc(50% - 8px);
	border-radius: 50%;
	width: 16px;
	height: 16px;
	background-color: silver;
}
.dials {
	position: relative;
	width: 100%;
	height: 100%;
}
.dials > div {
	position: absolute;
	top: 0;
	left: calc(50% - 3px);
	width: 6px;
	height: 50%;
	transform-origin: bottom;
}
.dials > div::after {
	position: absolute;
	top: 0;
	content: "";
	width: 6px;
	height: 15px;
	background-color: silver;
}
.dials div:nth-child(1) {
	transform: rotate(30deg);
}
.dials div:nth-child(2) {
	transform: rotate(60deg);
}
.dials div:nth-child(3) {
	transform: rotate(90deg);
}
.dials div:nth-child(4) {
	transform: rotate(120deg);
}
.dials div:nth-child(5) {
	transform: rotate(150deg);
}
.dials div:nth-child(6) {
	transform: rotate(180deg);
}
.dials div:nth-child(7) {
	transform: rotate(210deg);
}
.dials div:nth-child(8) {
	transform: rotate(240deg);
}
.dials div:nth-child(9) {
	transform: rotate(270deg);
}
.dials div:nth-child(10) {
	transform: rotate(300deg);
}
.dials div:nth-child(11) {
	transform: rotate(330deg);
}
.dials div:nth-child(12) {
	transform: rotate(360deg);
}
.hand {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background-color: silver;
	transform-origin: 50% 100%;
}
.hour.hand {
	width: 8px;
	height: 30%;
	left: calc(50% - 4px);
	z-index: 1;
}
.minute.hand {
	width: 5px;
	height: 40%;
	left: calc(50% - 2px);
	z-index: 2;
}
.second.hand {
	width: 2px;
	height: 45%;
	left: calc(50% - 1px);
	z-index: 3;
}

/* デジタル時計の設定 */
.wrapper-d {
	width: 100%;
	margin: 20px auto 0 auto;
	padding : 40px 20px 20px 20px;
	/* background-color: #161e29; */
	border-radius: 10px;
	position: absolute;
	bottom: 15%;
	z-index: 0;
}
@media screen and (max-width: 760px) {
	.wrapper-d {
		padding : 20px 20px 10px 20px;
	}
}
.wrapper-time {
	width: 50%;
	overflow: hidden;
	margin: 0 auto;
}
.wrapper-clock-item {
	width: 15%;
	padding-top: 24%;
	float: left;
	position: relative;
}
.clock-item {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
}
.clock-item .seg {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 97%;
	height: 8px;
	clip-path: polygon(25% 0%, 75% 0%, 83% 50%, 75% 100%, 25% 100%, 18% 50%);
	transform: translateX(-50%) translateY(0%);
}
@media screen and (max-width: 760px) {
	.clock-item .seg {
		height: 1.4vw;
	}
}
.clock-item .one {
	top: 3%;
	left: 50%;
}
.clock-item .two {
	top: 24%;
	left: 35%;
	transform: rotate(90deg);
	z-index: 99;
}
.clock-item .three {
	top: 66%;
	left: 35%;
	transform: rotate(90deg);
	z-index: 98;
}
.clock-item .four {
	top: 88%;
	left: 50%;
	z-index: 97;
}
.clock-item .five {
	top: 66%;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 96;
}
.clock-item .six {
	top: 24%;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 95;
}
.clock-item .seven {
	top: 45%;
	left: 50%;
	z-index: 94;
}
.wrapper-clock-space {
	width: 5%;
	padding-top: 24%;
	float: left;
	position: relative;
}
.clock-space {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
}
.clock-space .d1,
.clock-space .d2 {
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	transform: translate(-50%, 0%);
}
@media screen and (max-width: 760px) {
	.clock-space .d1,
	.clock-space .d2 {
		width: 5px;
		height: 5px;
	}
}
.clock-space .d1,
.clock-space .d2 {
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}
.clock-space .d1 {
	top: 25%;
}
.clock-space .d2 {
	top: 65%;
}
.active {
	background-color: #5ac54f;
}
.inactive {
	background-color: #282f3d;
}
.wrapper-date {
	width: 100%;
	overflow: hidden;
}
#weekdays {
	width : 100%;
	padding-top: 10px;
	color: #5ac54f;
	font-size: 20px;
	font-weight: bold;
	font-family : Arial,sans-serif;
	text-align: center;
}
@media screen and (max-width: 760px) {
	#weekdays {
		font-size : 5vw;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- アナログ時計の定義 -->
	<div class="wrapper">
		<div class="clock-body">
			<div class="clock">
				<div class="dials">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="hour hand"></div>
				<div class="minute hand"></div>
				<div class="second hand"></div>
			</div>
		</div>

		<!-- デジタル時計の定義 -->
		<div class="wrapper-d">
			<div class="wrapper-time">
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
				<div class="wrapper-clock-space">
					<div class="clock-space">
						<span class="d1 lamp active"></span>
						<span class="d2 lamp active"></span>
					</div>
				</div>
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
				<div class="wrapper-clock-space">
					<div class="clock-space">
						<span class="d1 lamp active"></span>
						<span class="d2 lamp active"></span>
					</div>
				</div>
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
				<div class="wrapper-clock-item">
					<div class="clock-item">
						<span class="seg one"></span>
						<span class="seg two"></span>
						<span class="seg three"></span>
						<span class="seg four"></span>
						<span class="seg five"></span>
						<span class="seg six"></span>
						<span class="seg seven"></span>
					</div>
				</div>
			</div>
			<div class="wrapper-date">
				<div id="weekdays">0000年 00月 00日(日)</div>
			</div>
		</div>

	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- アナログ時計の制御 -->
<script>
const hour = document.querySelector(".hour.hand");
const minute = document.querySelector(".minute.hand");
const second = document.querySelector(".second.hand");

function clock_a() {
	date = new Date();
	s = (360 / 60) * date.getSeconds();
	m = (360 / 60) * (date.getMinutes() + (date.getSeconds() / 60));
	h = (360 / 12) * (date.getHours() + (date.getMinutes() / 60));
	second.style.transform = `rotate(${s}deg)`;
	minute.style.transform = `rotate(${m}deg)`;
	hour.style.transform = `rotate(${h}deg)`;
}
clock_a();
setInterval(clock_a, 1000);
</script>

<!-- デジタル時計の制御 -->
<script>
function clock_d() {
	/*==================*/
	/*  LEDパターン		*/
	/*  ①②③④⑤⑥⑦	*/
	/*					*/
	/* 		┏①┓		*/
	/* 		⑥ ②		*/
	/* 		┃⑦┃		*/
	/* 		⑤ ③		*/
	/* 		┗④┛		*/
	/*==================*/
	/*			 0 1234567 1 1234567 2 1234567 3 1234567 4 1234567 5 1234567 6 1234567 7 1234567 8 1234567 9 1234567 */
	const nums = ['1111110','0110000','1101101','1111001','0110011','1011011','1011111','1110010','1111111','1111011'];
	const now = new Date();
	const hours = now.getHours();
	const mins = now.getMinutes();
	const seconds = now.getSeconds();
	const time = [
		formatTime(hours),
		formatTime(mins),
		formatTime(seconds)
	];
	const splitTimes = time.join('').split('');
	const splitNums = splitTimes.map((val) => { return val = nums[val];});
	const segmentNums = splitNums.join('').split('');
	segmentBlink(segmentNums);
	lampAnimation();
	DispWeekDays();
}
function segmentBlink(ary) {
	const segments = document.getElementsByClassName('seg');
	for (let i = 0; i < ary.length; i++) {
		if (!Number(ary[i])) {
			segments.item(i).classList.add('inactive');
			segments.item(i).classList.remove('active');
		}
		else {
			segments.item(i).classList.add('active');
			segments.item(i).classList.remove('inactive');
		}
	}
}
function lampAnimation() {
	const lamp = document.getElementsByClassName('lamp');
	for (let i = 0; i < lamp.length; i++) {
		lamp.item(i).classList.toggle('active');
		lamp.item(i).classList.toggle('inactive');
	}
}
function formatTime(cnt) {
	return cnt < 10 ? `0${cnt}` : cnt.toString();
};
function DispWeekDays(){
	const monthEn = new Array(12);
	monthEn[0] = 'January';
	monthEn[1] = 'February';
	monthEn[2] = 'March';
	monthEn[3] = 'April';
	monthEn[4] = 'May';
	monthEn[5] = 'June';
	monthEn[6] = 'July';
	monthEn[7] = 'August';
	monthEn[8] = 'September';
	monthEn[9] = 'October';
	monthEn[10] = 'November';
	monthEn[11] = 'December';
	const WeekEn = new Array(7);
	WeekEn[0] = 'Sunday';
	WeekEn[1] = 'Monday';
	WeekEn[2] = 'Tuesday';
	WeekEn[3] = 'Wednesday';
	WeekEn[4] = 'Thursday';
	WeekEn[5] = 'Friday';
	WeekEn[6] = 'Saturday';
	const WeekJn = new Array('日','月','火','水','木','金','土');
	var today  = new Date();
	var Year = today.getFullYear();
	var Mon = monthEn[today.getMonth()];
	var Day = today.getDate();
	var Week = WeekEn[today.getDay()];
	var nowdate = Year + ' ' + Mon + '-' + Day + ' ' + Week;
	//英語表記にする場合は下記をコメントに変更
	var nowdate = Year+'年 ' +(today.getMonth()+1)+'月 ' + Day + '日(' + WeekJn[today.getDay()] + ')';
	document.getElementById('weekdays').innerHTML = nowdate;
}

setInterval(clock_d, 1000);

</script>

<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.5 デジタル時計-1

(1) 説明

  • ランプ表示風のデジタル時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/25-clock-5
    • index.html
(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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@700&family=VT323&display=swap" rel="stylesheet">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* デジタル時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 20px auto 0 auto;
	padding: 30px 0;
	background-color: #15151e;
	border-radius: 10px;
}
.clock {
	font-family: 'Ubuntu Mono', monospace;
	color: #fffdcf;
	text-shadow: 0 0 15px #e4ff05;
	text-align: center;
}
.clock-date {
	font-size: 60px;
	line-height: 1;
}
.clock-time {
	font-size: 150px;
	line-height: 1;
}
@media screen and (max-width: 760px) {
	.clock-date {
		font-size: 8vw;
	}
	.clock-time {
		font-size: 20vw;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- デジタル時計の定義 -->
	<div class="wrapper">
		<div class="clock">
			<p class="clock-date"></p>
			<p class="clock-time"></p>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- デジタル時計の制御 -->
<script>
const clock = () => {
	d = new Date();								// 現在の日付・時刻
	year = d.getFullYear();						// 年
	month = d.getMonth() + 1;					// 月
	date = d.getDate();							// 日
	dayNum = d.getDay();						// 曜日コード
	const weekday = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
	day = weekday[dayNum];						// 曜日
	hour = d.getHours();						// 時
	min = d.getMinutes();						// 分
	sec = d.getSeconds();						// 秒
	// 1桁の場合は0を足して2桁に
	month = month < 10 ? "0" + month : month;	// 月を2桁に
	date = date < 10 ? "0" + date : date;		// 日を2桁に
	hour = hour < 10 ? "0" + hour : hour;		// 時を2桁に
	min = min < 10 ? "0" + min : min;			// 分を2桁に
	sec = sec < 10 ? "0" + sec : sec;			// 秒を2桁に
	today = `${year}.${month}.${date} ${day}`;	// 日付を生成
	time = `${hour}:${min}:${sec}`;				// 時刻を生成
	document.querySelector(".clock-date").innerText = today;
	document.querySelector(".clock-time").innerText = time;
};

clock();										// 現在日時・時刻を表示
setInterval(clock, 1000);						// 1秒ごとにclock関数を呼び出し

</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.6 デジタル時計-2

(1) 説明

  • 画像ファイルを使用した 7 セグメントのデジタル時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/26-clock-6
    • index.html
    • images
      • 0.png
      • 1.png
      • 2.png
      • 3.png
      • 4.png
      • 5.png
      • 6.png
      • 7.png
      • 8.png
      • 9.png
      • colon.png
(b) 画像
  • 0 (0.png:0)
  • 1 (1.png:1)
  • 2 (2.png:2)
  • 3 (3.png:3)
  • 4 (4.png:4)
  • 5 (5.png:5)
  • 6 (6.png:6)
  • 7 (7.png:7)
  • 8 (8.png:8)
  • 9 (9.png:9)
  • コロン (colon.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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* デジタル時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

#clock {
	width : 100%;
	margin: 20px auto;
	padding : 40px 20px 20px 20px;
	text-align: center;
	background: #f8f8f8;
	border : 10px solid #bbb;
	border-radius : 6px;
	box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
}
#digits {
	padding : 0;
	margin : 0 auto;
	width : 100%;
}
#digits span img {
	width: 15%;
}
#digits span:nth-child(3) img,
#digits span:nth-child(6) img {
	width: 5%;
}
#weekdays {
	width : 100%;
	padding-top: 10px;
	font-size : 40px;
	font-family : Arial,sans-serif;
}
@media screen and (max-width: 760px) {
	#clock {
		padding : 20px 20px 10px 20px;
	}
	#weekdays {
		font-size : 5vw;
	}
}

/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- デジタル時計の定義 -->
	<div class="wrapper">
		<!--デジタル時計の表示位置-->
		<div id="clock">
			<div id="digits"></div>
			<div id="weekdays"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- デジタル時計の制御 -->
<script>

function outputClock() {
	var img_src;
	const DIG_OBJ = document.getElementById('digits');
	for (var i=0; i < 8; i++) {
		const ADD_DIV = document.createElement('span');
		ADD_DIV.setAttribute('id', 'Nums' + i);
		DIG_OBJ.appendChild(ADD_DIV);
		if (i == 2 || i == 5 ) {
			img_src = 'images/colon.png';
		}
		else{
			img_src = 'images/0.png';
		}
		ADD_DIV.innerHTML = '<img id="dig' + i + '" src="' + img_src + '">';
	}
	moveDigital();
}

function moveDigital() {
	var now = new Date();
	var hour = now.getHours();
	var hour2 = hour % 10;
	var hour1 = (hour-hour2) / 10 ;
	var mine = now.getMinutes();
	var mine2 = mine % 10;
	var mine1 = (mine - mine2) / 10; 
	var sec = now.getSeconds();
	var sec2 = sec % 10;
	var sec1 = (sec - sec2) / 10;
	document.getElementById('dig0').src = 'images/' + hour1 + '.png';
	document.getElementById('dig1').src = 'images/' + hour2 + '.png';
	document.getElementById('dig3').src = 'images/' + mine1 + '.png';
	document.getElementById('dig4').src = 'images/' + mine2 + '.png';
	document.getElementById('dig6').src = 'images/' + sec1 + '.png';
	document.getElementById('dig7').src = 'images/' + sec2 + '.png';
	DispWeekDays();
	Blinks();
}

function Blinks(){
	const dig2 = document.getElementById('dig2').style;
	const dig5 = document.getElementById('dig5').style;
	if (dig2.visibility == 'hidden') {
		dig2.visibility = 'visible';
		dig5.visibility = 'visible';
	}
	else {
		dig2.visibility = 'hidden';
		dig5.visibility = 'hidden';
	}
}

function DispWeekDays(){
	const monthEn = new Array(12);
	monthEn[0] = 'January';
	monthEn[1] = 'February';
	monthEn[2] = 'March';
	monthEn[3] = 'April';
	monthEn[4] = 'May';
	monthEn[5] = 'June';
	monthEn[6] = 'July';
	monthEn[7] = 'August';
	monthEn[8] = 'September';
	monthEn[9] = 'October';
	monthEn[10] = 'November';
	monthEn[11] = 'December';
	const WeekEn = new Array(7);
	WeekEn[0] = 'Sunday';
	WeekEn[1] = 'Monday';
	WeekEn[2] = 'Tuesday';
	WeekEn[3] = 'Wednesday';
	WeekEn[4] = 'Thursday';
	WeekEn[5] = 'Friday';
	WeekEn[6] = 'Saturday';
	const WeekJn = new Array('日','月','火','水','木','金','土');
	var today  = new Date();
	var Year = today.getFullYear();
	var Mon = monthEn[today.getMonth()];
	var Day = today.getDate();
	var Week = WeekEn[today.getDay()];
	var nowdate = Year + ' ' + Mon + '-' + Day + ' ' + Week;
	//日本語表記の場合は下記を使用
	//var nowdate = Year+'年 ' +(today.getMonth()+1)+'月 ' + Day + '日(' + WeekJn[today.getDay()] + ')';
	document.getElementById('weekdays').innerHTML = nowdate;
}

document.addEventListener('DOMContentLoaded', outputClock, false);
setInterval( moveDigital,500 );

</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.2.7 デジタル時計-3

(1) 説明

  • SVGを使用した7セグメントのデジタル時計です。

(2) 表示形式

  • 時計の動作を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/27-clock-7
    • index.html
(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,ol,li,label {
	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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* デジタル時計の設定 */
.wrapper {
	max-width: 760px;
	margin: 20px auto 0 auto;
	padding : 40px 20px 20px 20px;
	background-color: #161e29;
	border-radius: 10px;
}
@media screen and (max-width: 760px) {
	.wrapper {
		padding : 20px 20px 10px 20px;
	}
}
.wrapper-time {
	width: 100%;
	overflow: hidden;
}
.wrapper-clock-item {
	width: 15%;
	padding-top: 24%;
	float: left;
	position: relative;
}
.clock-item {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #161e29;
}
.clock-item .seg {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 97%;
	height: 15px;
	clip-path: polygon(25% 0%, 75% 0%, 83% 50%, 75% 100%, 25% 100%, 18% 50%);
	transform: translateX(-50%) translateY(0%);
}
@media screen and (max-width: 760px) {
	.clock-item .seg {
		height: 2vw;
	}
}
.clock-item .one {
	top: 3%;
	left: 50%;
}
.clock-item .two {
	top: 24%;
	left: 35%;
	transform: rotate(90deg);
	z-index: 99;
}
.clock-item .three {
	top: 66%;
	left: 35%;
	transform: rotate(90deg);
	z-index: 98;
}
.clock-item .four {
	top: 88%;
	left: 50%;
	z-index: 97;
}
.clock-item .five {
	top: 66%;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 96;
}
.clock-item .six {
	top: 24%;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 95;
}
.clock-item .seven {
	top: 45%;
	left: 50%;
	z-index: 94;
}
.wrapper-clock-space {
	width: 5%;
	padding-top: 24%;
	float: left;
	position: relative;
}
.clock-space {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #161e29;
}
.clock-space .d1,
.clock-space .d2 {
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	transform: translate(-50%, 0%);
}
@media screen and (max-width: 760px) {
	.clock-space .d1,
	.clock-space .d2 {
		width: 10px;
		height: 10px;
	}
}
.clock-space .d1,
.clock-space .d2 {
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}
.clock-space .d1 {
	top: 25%;
}
.clock-space .d2 {
	top: 65%;
}
.active {
	background-color: #5ac54f;
}
.inactive {
	background-color: #282f3d;
}
.wrapper-date {
	width: 100%;
	overflow: hidden;
}
#weekdays {
	width : 100%;
	padding-top: 10px;
	color: #5ac54f;
	font-size : 40px;
	font-weight: bold;
	font-family : Arial,sans-serif;
	text-align: center;
}
@media screen and (max-width: 760px) {
	#weekdays {
		font-size : 5vw;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- デジタル時計の定義 -->
	<div class="wrapper">
		<div class="wrapper-time">
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
			<div class="wrapper-clock-space">
				<div class="clock-space">
					<span class="d1 lamp active"></span>
					<span class="d2 lamp active"></span>
				</div>
			</div>
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
			<div class="wrapper-clock-space">
				<div class="clock-space">
					<span class="d1 lamp active"></span>
					<span class="d2 lamp active"></span>
				</div>
			</div>
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
			<div class="wrapper-clock-item">
				<div class="clock-item">
					<span class="seg one"></span>
					<span class="seg two"></span>
					<span class="seg three"></span>
					<span class="seg four"></span>
					<span class="seg five"></span>
					<span class="seg six"></span>
					<span class="seg seven"></span>
				</div>
			</div>
		</div>
		<div class="wrapper-date">
			<div id="weekdays">0000年 00月 00日(日)</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- デジタル時計の制御 -->
<script>
function clock() {
	/*==================*/
	/*  LEDパターン		*/
	/*  ①②③④⑤⑥⑦	*/
	/*					*/
	/* 		┏①┓		*/
	/* 		⑥ ②		*/
	/* 		┃⑦┃		*/
	/* 		⑤ ③		*/
	/* 		┗④┛		*/
	/*==================*/
	/*			 0 1234567 1 1234567 2 1234567 3 1234567 4 1234567 5 1234567 6 1234567 7 1234567 8 1234567 9 1234567 */
	const nums = ['1111110','0110000','1101101','1111001','0110011','1011011','1011111','1110010','1111111','1111011'];
	const now = new Date();
	const hours = now.getHours();
	const mins = now.getMinutes();
	const seconds = now.getSeconds();
	const time = [
		formatTime(hours),
		formatTime(mins),
		formatTime(seconds)
	];
	const splitTimes = time.join('').split('');
	const splitNums = splitTimes.map((val) => { return val = nums[val];});
	const segmentNums = splitNums.join('').split('');
	segmentBlink(segmentNums);
	lampAnimation();
	dispWeekDays();
}
function segmentBlink(ary) {
	const segments = document.getElementsByClassName('seg');
	for (let i = 0; i < ary.length; i++) {
		if (!Number(ary[i])) {
			segments.item(i).classList.add('inactive');
			segments.item(i).classList.remove('active');
		}
		else {
			segments.item(i).classList.add('active');
			segments.item(i).classList.remove('inactive');
		}
	}
}
function lampAnimation() {
	const lamp = document.getElementsByClassName('lamp');
	for (let i = 0; i < lamp.length; i++) {
		lamp.item(i).classList.toggle('active');
		lamp.item(i).classList.toggle('inactive');
	}
}
function formatTime(cnt) {
	return cnt < 10 ? `0${cnt}` : cnt.toString();
};
function dispWeekDays(){
	const monthEn = new Array(12);
	monthEn[0] = 'January';
	monthEn[1] = 'February';
	monthEn[2] = 'March';
	monthEn[3] = 'April';
	monthEn[4] = 'May';
	monthEn[5] = 'June';
	monthEn[6] = 'July';
	monthEn[7] = 'August';
	monthEn[8] = 'September';
	monthEn[9] = 'October';
	monthEn[10] = 'November';
	monthEn[11] = 'December';
	const WeekEn = new Array(7);
	WeekEn[0] = 'Sunday';
	WeekEn[1] = 'Monday';
	WeekEn[2] = 'Tuesday';
	WeekEn[3] = 'Wednesday';
	WeekEn[4] = 'Thursday';
	WeekEn[5] = 'Friday';
	WeekEn[6] = 'Saturday';
	const WeekJn = new Array('日','月','火','水','木','金','土');
	var today  = new Date();
	var Year = today.getFullYear();
	var Mon = monthEn[today.getMonth()];
	var Day = today.getDate();
	var Week = WeekEn[today.getDay()];
	var nowdate = Year + ' ' + Mon + '-' + Day + ' ' + Week;
	//英語表記にする場合は下記をコメントに変更
	var nowdate = Year+'年 ' +(today.getMonth()+1)+'月 ' + Day + '日(' + WeekJn[today.getDay()] + ')';
	document.getElementById('weekdays').innerHTML = nowdate;
}

setInterval(clock, 1000);

</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.3 フォーム

P13.3.1 お問合せフォーム-1

(1) 説明

  • Web サイトでお問合せを行うためのお問合せフォームです。
  • 本パーツは、端末側のフォーム作成用パーツです。実際のお問い合せ処理を実装する場合は、サーバー側の処理が必要になります。

(2) 表示形式

  • お問合せフォームの表示形式と操作方法を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  2. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  3. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  4. 本パーツは、端末側のフォーム作成用パーツです。実際のお問い合せ処理を実装する場合は、サーバー側の処理が必要になります。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/31-form-1
    • index.html
(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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* お問合せフォーム */
.form1 * {
	padding: 0;
	margin: 0;
	font-size: 16px;
	box-sizing: border-box;
}
.form1 {
	width: calc(100% - 60px);
	max-width: 760px;
	margin: 20px auto;
	padding: 20px;
	background: #eee;
	border: 1px #888 solid;
}
.form1 div {
	padding-bottom: 10px;
}
.form1 .title {
	margin: 0 0 10px 0;
	font-size: 120%;
}
.form1 .label {
	display: block;
	padding-left: 5px;
}
.form1 .name, .form1 .email, .form1 .tel, .form1 .item {
	width: 100%;
	max-width: 300px;
	padding: 5px;
}
.form1 .name, .form1 .email, .form1 .tel {
	width: 100%;
	max-width: 300px;
	padding: 5px;
}
.form1 .subject, .form1 .content {
	width: 100%;
	padding: 5px;
}
.form1 button {
	display: block;
	padding: 5px 20px;
	margin: 0 auto;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- リスト絞り込み領域の定義 -->
	<div class="wrapper">
		<form class="form1" action="#" name="form1" method="post">
			<p class="title">お問合せフォーム</p>
			<div>
				<label class="label" for="name">お名前</label>
				<input id="name" class="name" type="text" name="name" placeholder="例)山田太郎" value="">
			</div>
			<div>
				<p class="label">性別 
					<label><input type="radio" name="sex" value="男性" checked> 男性</label>
					<label><input type="radio" name="sex" value="女性"> 女性</label>
				</p>
			</div>
			<div>
				<label class="label" for="email">メールアドレス</label>
				<input id="email" class="email" type="email" name="email" placeholder="例)sample@example.com" value="">
			</div>
			<div>
				<label class="label" for="tel">電話番号</label>
				<input id="tel" class="tel" type="tel" name="tel" placeholder="例)0000000000" value="">
			</div>
			<div>
				<p class="label">お問い合わせ項目</p>
				<select id="item" class="item" name="item">
					<option value="" selected>種別を選択してください</option>
					<option value="ご質問">ご質問</option>
					<option value="ご意見">ご意見</option>
					<option value="ご感想">ご感想</option>
				</select>
			</div>
			<div>
				<label class="label" for="subject">件名</label>
				<input id="subjext" class="subject" type="text" name="subject" placeholder="件名">
			</div>
			<div>
				<label class="label" for="content">お問い合わせ内容</label>
				<textarea id="content" class="content" name="content" rows="10" placeholder="お問合せ内容を入力"></textarea>
			</div>
			<button type="submit">お問合せ送信</button>
		</form>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P13.3.2 絞り込み検索フォーム-1

(1) 説明

  • 絞り込み条件を指定してリストから該当項目の絞り込みを行う検索フォームです。
  • 絞り込み条件は、チェックボックスを使用して絞り込みを行います。
  • 選択肢 m と選択肢 c の両方が満たされているレコードが表示されます。
  • 本方式は、あらかじめ全てのレコードのテーブルタグを作成しておき、条件に合致しないレコードを非表示にする方式です。

(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)を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/32-form-2
    • index.html
    • images
      • icon-chk.svg
    • js
      • jquery-3.6.0.min.js
(b) 画像
  • チェック (icon-chk.svg:チェック)
(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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* リスト絞り込み領域の設定 */
.wrapper {								/* リスト絞り込み領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
.wrapper .box {
	padding: 20px;
}
.wrapper .box ul {
	list-style: none;
	overflow: hidden;
}
.wrapper .box ul li {
	width: calc(100% / 6 - 30px);
	margin: 15px 15px;
	float: left;
}
@media screen and (max-width: 960px) {
	.wrapper .box ul li {
		width: calc(100% / 3 - 30px);
	}
}
@media screen and (max-width: 760px) {
	.wrapper .box ul li {
		width: calc(100% / 2 - 30px);
	}
}

/* 検索条件の設定 */
.wrapper .box ul.check-box-list li {
	margin: 5px 15px;
	border: none;
}
.wrapper .box ul.check-box-list label {
	display: block;
	width: 100%;
}
.wrapper .box ul.check-box-list label input {
	display: none;
}
.wrapper .box ul.check-box-list label span {
	font-size: 1.0rem;
	position: relative;
}
.wrapper .box ul.check-box-list label span::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	border: 1px #888 solid;
	vertical-align: middle;
	box-sizing: border-box;
}
.wrapper .box ul.check-box-list label input:checked + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label:hover input + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.wrapper .box ul.check-box-list span.all-select {
	color: red;
}
/* 検索ボタン */
.wrapper .box div.search-button {
	width: calc(100% / 1 - 30px);
	padding: 10px;
	margin: 15px auto;
	border-radius: 30px;
	background: steelblue;
	font-size: 1.1rem;
	color: white;
	text-align: center;
}
.wrapper .box div.search-button:hover {
	opacity: 0.6;
	cursor: pointer;
}
/* 検索結果メッセージ */
.wrapper .box span.message {
	color: red;
}
/* 検索結果リスト */
.wrapper .box table.search-list {
	width: 100%;
	font-size: 1.0rem;
	border-collapse: collapse;
	background-color: white;
}
.wrapper .box table.search-list tr th,
.wrapper .box table.search-list tr td {
	word-break: break-all;
}
.wrapper .box table.search-list tr th:nth-child(1),
.wrapper .box table.search-list tr td:nth-child(1) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(2),
.wrapper .box table.search-list tr td:nth-child(2) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(3),
.wrapper .box table.search-list tr td:nth-child(3) {
	width: calc(100% - 100px - 100px);
}
.wrapper .box table.search-list tr.gray {
	background-color: #eee;
}
.wrapper .box table.search-list tr.hide {
	display: none;
}
.wrapper .box table.search-list tr th {
	padding: 5px 0px 5px 0px;
	text-align: center;
	border: 1px #ccc solid;
	background-color: #666;
	color: white;
}
.wrapper .box table.search-list tr td {
	padding: 5px 5px 5px 5px;
	border: 1px #ccc solid;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- リスト絞り込み領域の定義 -->
	<div class="wrapper">
		<div class="title">リストの絞り込み検索</div>
		<div class="box">
			<div class="sub-title">選択肢m</div>
			<ul class="check-box-list">
				<li><label for="m00"><input type="checkbox" name="mParent" id="m00" value="m00"><span class="all-select">全選択</span></label></li>
				<li><label for="m01"><input type="checkbox" name="mChild" id="m01" value="m01"><span>選択肢m01</span></label></li>
				<li><label for="m02"><input type="checkbox" name="mChild" id="m02" value="m02"><span>選択肢m02</span></label></li>
				<li><label for="m03"><input type="checkbox" name="mChild" id="m03" value="m03"><span>選択肢m03</span></label></li>
				<li><label for="m04"><input type="checkbox" name="mChild" id="m04" value="m04"><span>選択肢m04</span></label></li>
				<li><label for="m05"><input type="checkbox" name="mChild" id="m05" value="m05"><span>選択肢m05</span></label></li>
			</ul>
			<div class="sub-title">選択肢c</div>
			<ul class="check-box-list">
				<li><label for="c00"><input type="checkbox" name="cParent" id="c00" value="c00"><span class="all-select">全選択</span></label></li>
				<li><label for="c01"><input type="checkbox" name="cChild" id="c01" value="c01"><span>選択肢c01</span></label></li>
				<li><label for="c02"><input type="checkbox" name="cChild" id="c02" value="c02"><span>選択肢c02</span></label></li>
				<li><label for="c03"><input type="checkbox" name="cChild" id="c03" value="c03"><span>選択肢c03</span></label></li>
				<li><label for="c04"><input type="checkbox" name="cChild" id="c04" value="c04"><span>選択肢c04</span></label></li>
				<li><label for="c05"><input type="checkbox" name="cChild" id="c05" value="c05"><span>選択肢c05</span></label></li>
			</ul>
			<div class="search-button">検索開始</div>
			<div class="sub-title search-result">検索結果<span class="message"></span></div>
			<table class="search-list">
				<tr class="header hide"><th>選択肢m</th><th>選択肢c</th><th>名称</th></tr>
				<tr class="m01 c01 hide"><td>選択肢m01</td><td>選択肢c01</td><td>選択肢m01 - 選択肢c01</td></tr>
				<tr class="m01 c02 hide"><td>選択肢m01</td><td>選択肢c02</td><td>選択肢m01 - 選択肢c02</td></tr>
				<tr class="m01 c03 hide"><td>選択肢m01</td><td>選択肢c03</td><td>選択肢m01 - 選択肢c03</td></tr>
				<tr class="m01 c04 hide"><td>選択肢m01</td><td>選択肢c04</td><td>選択肢m01 - 選択肢c04</td></tr>
				<tr class="m01 c05 hide"><td>選択肢m01</td><td>選択肢c05</td><td>選択肢m01 - 選択肢c05</td></tr>
				<tr class="m02 c01 hide"><td>選択肢m02</td><td>選択肢c01</td><td>選択肢m02 - 選択肢c01</td></tr>
				<tr class="m02 c02 hide"><td>選択肢m02</td><td>選択肢c02</td><td>選択肢m02 - 選択肢c02</td></tr>
				<tr class="m03 c03 hide"><td>選択肢m03</td><td>選択肢c03</td><td>選択肢m03 - 選択肢c03</td></tr>
				<tr class="m03 c04 hide"><td>選択肢m03</td><td>選択肢c04</td><td>選択肢m03 - 選択肢c04</td></tr>
				<tr class="m04 c05 hide"><td>選択肢m04</td><td>選択肢c05</td><td>選択肢m04 - 選択肢c05</td></tr>
				<tr class="m04 c01 hide"><td>選択肢m04</td><td>選択肢c01</td><td>選択肢m04 - 選択肢c01</td></tr>
				<tr class="m05 c02 hide"><td>選択肢m05</td><td>選択肢c02</td><td>選択肢m05 - 選択肢c02</td></tr>
				<tr class="m05 c03 hide"><td>選択肢m05</td><td>選択肢c03</td><td>選択肢m05 - 選択肢c03</td></tr>
				<tr class="m01 c04 hide"><td>選択肢m01</td><td>選択肢c04</td><td>選択肢m01 - 選択肢c04</td></tr>
				<tr class="m01 c05 hide"><td>選択肢m01</td><td>選択肢c05</td><td>選択肢m01 - 選択肢c05</td></tr>
				<tr class="m02 c01 hide"><td>選択肢m02</td><td>選択肢c01</td><td>選択肢m02 - 選択肢c01</td></tr>
				<tr class="m02 c02 hide"><td>選択肢m02</td><td>選択肢c02</td><td>選択肢m02 - 選択肢c02</td></tr>
			</table>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- 検索画面の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {							// 選択肢mの全件選択処理
	$('#m00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="mChild"]').prop('checked', true);
		}
		else {
			$('input[name="mChild"]').prop('checked', false);
	    }
	});
});
$(function() {							// 選択肢cの全件選択処理
	$('#c00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="cChild"]').prop('checked', true);
		}
		else {
			$('input[name="cChild"]').prop('checked', false);
	    }
	});
});
$(function() {							// 検索ボタン押下処理
	$('.search-button').click(function() {
		$('.search-list tr.header').addClass('hide');
		$('input[name="mChild"]').each(function() {
			if ($(this).prop('checked')) {
				$('.search-list tr.' + $(this).val()).removeClass('hide');
			}
			else {
				$('.search-list tr.' + $(this).val()).addClass('hide');
			}
		});
		$('input[name="cChild"]').each(function() {
			if (!($(this).prop('checked'))) {
				$('.search-list tr.' + $(this).val()).addClass('hide');
			}
		});
		let iCount = 0;
		$('.search-list tr').each(function() {
			if (!$(this).hasClass('hide')) {
				iCount++;
				if (iCount % 2) {
					$(this).removeClass('gray');
				}
				else {
					$(this).addClass('gray');
				}
			}
		});
		if (iCount == 0) {
			$('.search-result .message').text('(検索結果が見つかりませんでした)');
			$('.search-list tr.header').addClass('hide');
		}
		else {
			$('.search-result .message').text('(' + iCount + '件の検索結果が見つかりました)');
			$('.search-list tr.header').removeClass('hide');
		}
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.3.3 絞り込み検索フォーム-2

(1) 説明

  • 絞り込み条件を指定してリストから該当項目の絞り込みを行う検索フォームです。
  • 絞り込み条件は、チェックボックスに加えて検索文字による絞り込みが可能です。
  • 選択肢 m と選択肢 c の両方が満たされているレコードが表示されます。さらに、検索文字が指定されていると検索文字による絞り込みも実施します。
  • 本方式は、あらかじめ全てのレコードのテーブルタグを作成しておき、条件に合致しないレコードを非表示にする方式です。

(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)を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/33-form-3
    • index.html
    • images
      • icon-chk.svg
    • js
      • jquery-3.6.0.min.js
(b) 画像
  • チェック (icon-chk.svg:チェック)
(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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* リスト絞り込み領域の設定 */
.wrapper {								/* リスト絞り込み領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
.wrapper .box {
	padding: 20px;
}
.wrapper .box ul.check-box-list {
	list-style: none;
	overflow: hidden;
}
.wrapper .box ul.check-box-list li {
	width: calc(100% / 6 - 30px);
	margin: 15px 15px;
	float: left;
}
@media screen and (max-width: 960px) {
	.wrapper .box ul.check-box-list li {
		width: calc(100% / 3 - 30px);
	}
}
@media screen and (max-width: 760px) {
	.wrapper .box ul.check-box-list li {
		width: calc(100% / 2 - 30px);
	}
}

/* 検索条件の設定 */
.wrapper .box ul.check-box-list li {
	margin: 5px 15px;
	border: none;
}
.wrapper .box ul.check-box-list label {
	display: block;
	width: 100%;
}
.wrapper .box ul.check-box-list label input {
	display: none;
}
.wrapper .box ul.check-box-list label span {
	font-size: 1.0rem;
	position: relative;
}
.wrapper .box ul.check-box-list label span::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	border: 1px #888 solid;
	vertical-align: middle;
	box-sizing: border-box;
}
.wrapper .box ul.check-box-list label input:checked + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label:hover input + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.wrapper .box ul.check-box-list span.all-select {
	color: red;
}
/* 検索文字列 */
.wrapper .box ul.search-message {
	margin: 10px 0 10px 20px;
}
.wrapper .box input#search {
	width: 40%;
	padding: 5px;
	font-size: 1rem;
}
/* 検索ボタン */
.wrapper .box div.search-button {
	width: calc(100% / 1 - 30px);
	padding: 10px;
	margin: 15px auto;
	border-radius: 30px;
	background: steelblue;
	font-size: 1.1rem;
	color: white;
	text-align: center;
}
.wrapper .box div.search-button:hover {
	opacity: 0.6;
	cursor: pointer;
}
/* 検索結果メッセージ */
.wrapper .box span.message {
	color: red;
}
/* 検索結果リスト */
.wrapper .box table.search-list {
	width: 100%;
	font-size: 1.0rem;
	border-collapse: collapse;
	background-color: white;
}
.wrapper .box table.search-list tr th,
.wrapper .box table.search-list tr td {
	word-break: break-all;
}
.wrapper .box table.search-list tr th:nth-child(1),
.wrapper .box table.search-list tr td:nth-child(1) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(2),
.wrapper .box table.search-list tr td:nth-child(2) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(3),
.wrapper .box table.search-list tr td:nth-child(3) {
	width: calc(100% - 100px - 100px);
}
.wrapper .box table.search-list tr.gray {
	background-color: #eee;
}
.wrapper .box table.search-list tr.hide {
	display: none;
}
.wrapper .box table.search-list tr th {
	padding: 5px 0px 5px 0px;
	text-align: center;
	border: 1px #ccc solid;
	background-color: #666;
	color: white;
}
.wrapper .box table.search-list tr td {
	padding: 5px 5px 5px 5px;
	border: 1px #ccc solid;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- リスト絞り込み領域の定義 -->
	<div class="wrapper">
		<div class="title">リストの絞り込み検索</div>
		<div class="box">
			<div class="sub-title">選択肢m</div>
			<ul class="check-box-list">
				<li><label for="m00"><input type="checkbox" name="mParent" id="m00" value="m00"><span class="all-select">全選択</span></label></li>
				<li><label for="m01"><input type="checkbox" name="mChild" id="m01" value="m01"><span>選択肢m01</span></label></li>
				<li><label for="m02"><input type="checkbox" name="mChild" id="m02" value="m02"><span>選択肢m02</span></label></li>
				<li><label for="m03"><input type="checkbox" name="mChild" id="m03" value="m03"><span>選択肢m03</span></label></li>
				<li><label for="m04"><input type="checkbox" name="mChild" id="m04" value="m04"><span>選択肢m04</span></label></li>
				<li><label for="m05"><input type="checkbox" name="mChild" id="m05" value="m05"><span>選択肢m05</span></label></li>
			</ul>
			<div class="sub-title">選択肢c</div>
			<ul class="check-box-list">
				<li><label for="c00"><input type="checkbox" name="cParent" id="c00" value="c00"><span class="all-select">全選択</span></label></li>
				<li><label for="c01"><input type="checkbox" name="cChild" id="c01" value="c01"><span>選択肢c01</span></label></li>
				<li><label for="c02"><input type="checkbox" name="cChild" id="c02" value="c02"><span>選択肢c02</span></label></li>
				<li><label for="c03"><input type="checkbox" name="cChild" id="c03" value="c03"><span>選択肢c03</span></label></li>
				<li><label for="c04"><input type="checkbox" name="cChild" id="c04" value="c04"><span>選択肢c04</span></label></li>
				<li><label for="c05"><input type="checkbox" name="cChild" id="c05" value="c05"><span>選択肢c05</span></label></li>
			</ul>
			<div class="sub-title">文字列での絞り込み</div>
			<ul class="search-message">
				<li>上記の選択肢での絞り込み結果から、さらに文字列での絞り込みを行います。</li>
				<li>絞り込み文字列を空白で区切って指定します。(すべての文字列を含むものを検索します)</li>
				<li>文字列が指定されていない場合は、文字列での絞り込みを行いません。</li>
			</ul>
			<div><label for="search"> 検索文字列 <input type="text" name="search" id="search" value=""></label>
			<div class="search-button">検索開始</div>
			<div class="sub-title search-result">検索結果<span class="message"></span></div>
			<table class="search-list">
				<tr class="header hide"><th>選択肢m</th><th>選択肢c</th><th>名称</th></tr>
				<tr class="m01 c01 hide"><td>選択肢m01</td><td>選択肢c01</td><td>選択肢m01 - 選択肢c01 あいうえお abc def</td></tr>
				<tr class="m01 c02 hide"><td>選択肢m01</td><td>選択肢c02</td><td>選択肢m01 - 選択肢c02 あいうえお ABC DEF</td></tr>
				<tr class="m01 c03 hide"><td>選択肢m01</td><td>選択肢c03</td><td>選択肢m01 - 選択肢c03 あいうえお ghi jkl</td></tr>
				<tr class="m01 c04 hide"><td>選択肢m01</td><td>選択肢c04</td><td>選択肢m01 - 選択肢c04 あいうえお GHI JKL</td></tr>
				<tr class="m01 c05 hide"><td>選択肢m01</td><td>選択肢c05</td><td>選択肢m01 - 選択肢c05 かきくけこ mno pqr</td></tr>
				<tr class="m02 c01 hide"><td>選択肢m02</td><td>選択肢c01</td><td>選択肢m02 - 選択肢c01 かきくけこ MNO PQR</td></tr>
				<tr class="m02 c02 hide"><td>選択肢m02</td><td>選択肢c02</td><td>選択肢m02 - 選択肢c02 かきくけこ stu vwx</td></tr>
				<tr class="m03 c03 hide"><td>選択肢m03</td><td>選択肢c03</td><td>選択肢m03 - 選択肢c03 かきくけこ STU VWX</td></tr>
				<tr class="m03 c04 hide"><td>選択肢m03</td><td>選択肢c04</td><td>選択肢m03 - 選択肢c04 さしすせそ abc def</td></tr>
				<tr class="m04 c05 hide"><td>選択肢m04</td><td>選択肢c05</td><td>選択肢m04 - 選択肢c05 さしすせそ ABC DEF</td></tr>
				<tr class="m04 c01 hide"><td>選択肢m04</td><td>選択肢c01</td><td>選択肢m04 - 選択肢c01 さしすせそ ghi jkl</td></tr>
				<tr class="m05 c02 hide"><td>選択肢m05</td><td>選択肢c02</td><td>選択肢m05 - 選択肢c02 さしすせそ GHI JKL</td></tr>
				<tr class="m05 c03 hide"><td>選択肢m05</td><td>選択肢c03</td><td>選択肢m05 - 選択肢c03 たちつてと mno pqr</td></tr>
				<tr class="m01 c04 hide"><td>選択肢m01</td><td>選択肢c04</td><td>選択肢m01 - 選択肢c04 たちつてと MNO PQR</td></tr>
				<tr class="m01 c05 hide"><td>選択肢m01</td><td>選択肢c05</td><td>選択肢m01 - 選択肢c05 たちつてと stu vwx</td></tr>
				<tr class="m02 c01 hide"><td>選択肢m02</td><td>選択肢c01</td><td>選択肢m02 - 選択肢c01 たちつてと STU CWX</td></tr>
				<tr class="m02 c02 hide"><td>選択肢m02</td><td>選択肢c02</td><td>選択肢m02 - 選択肢c02 なにぬねの 123 456</td></tr>
			</table>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- 検索画面の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {							// 選択肢mの全件選択処理
	$('#m00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="mChild"]').prop('checked', true);
		}
		else {
			$('input[name="mChild"]').prop('checked', false);
	    }
	});
});
$(function() {							// 選択肢cの全件選択処理
	$('#c00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="cChild"]').prop('checked', true);
		}
		else {
			$('input[name="cChild"]').prop('checked', false);
	    }
	});
});
$(function() {							// 検索ボタン押下処理
	$('.search-button').click(function() {
		$('.search-list tr.header').addClass('hide');
		$('input[name="mChild"]').each(function() {
			if ($(this).prop('checked')) {
				$('.search-list tr.' + $(this).val()).removeClass('hide');
			}
			else {
				$('.search-list tr.' + $(this).val()).addClass('hide');
			}
		});
		$('input[name="cChild"]').each(function() {
			if (!($(this).prop('checked'))) {
				$('.search-list tr.' + $(this).val()).addClass('hide');
			}
		});
		sSearch = $('#search').val().trim();
		if (sSearch != "") {
			vSearch = sSearch.split(/\s+/);
			vSearch.forEach(function(s) {
				let sIn = convString(s);
				$('.search-list tr').each(function() {
					if (!$(this).hasClass('header')) {
						let sHtml = convString($(this).text());
						if (!sHtml.includes(sIn)) {
							$(this).addClass('hide');
						}
					}
				});
			});
		}
		let iCount = 0;
		$('.search-list tr').each(function() {
			if (!$(this).hasClass('hide')) {
				iCount++;
				if (iCount % 2) {
					$(this).removeClass('gray');
				}
				else {
					$(this).addClass('gray');
				}
			}
		});
		if (iCount == 0) {
			$('.search-result .message').text('(検索結果が見つかりませんでした)');
			$('.search-list tr.header').addClass('hide');
		}
		else {
			$('.search-result .message').text('(' + iCount + '件の検索結果が見つかりました)');
			$('.search-list tr.header').removeClass('hide');
		}
	});
});
function convString(textIn) {			// 文字列内の数字、英字、カタカナを全角(小文字)に変換
	var aftnum = new Array(
		"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
	);
	var aftalph = new Array(
		"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", 
		"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", 
		"U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", 
		"e", "f", "g", "h", "i", "j", "k", "l", "m", "n", 
		"o", "p", "q", "r", "s", "t", "u", "v", "w", "x", 
		"y", "z"
	);
	var aftkigo = new Array(
		' ', '!', '”', '#', '$', '%', '&', '’', '(', ')', 
		'=', '~', '^', '|', '‘', '@', '{', '[', '「', '+', 
		';', '*', ':', '}', ']', '」', '<', ',', '、', '>', 
		'.', '。', '?', '・', '/', '_'
	);
	var aftkana = new Array(
		"ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", 
		"サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", 
		"ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ", 
		"マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ", "リ", 
		"ル", "レ", "ロ", "ワ", "ヲ", "ン", "―", "ー", "-", "‐"
	);
	var aftdaku = new Array(
		"ヴ", "ガ", "ギ", "グ", "ゲ", "ゴ", "ザ", "ジ", "ズ", "ゼ", 
		"ゾ", "ダ", "ヂ", "ヅ", "デ", "ド", "バ", "ビ", "ブ", "ベ", 
		"ボ", "パ", "ピ", "プ", "ペ", "ポ"
	);
	var befnum = new Array(
		"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
	);
	var befalph = new Array(
		"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", 
		"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", 
		"U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", 
		"e", "f", "g", "h", "i", "j", "k", "l", "m", "n", 
		"o", "p", "q", "r", "s", "t", "u", "v", "w", "x", 
		"y", "z"
	);
	var befkigo = new Array(
		' ', '!', '\"', '#', '\\$', '%', '&', '\'', '\\(', '\\)', 
		'=', '~', '\\^', '\\|', '`', '@', '\\{', '\\[', '「', '\\+', 
		';', '\\*', ':', '\\}', '\\]', '」', '<', ',', '、', '>', 
		'\\.', '。', '\\?', '・', '\\/', '_'
	);
	var befkana = new Array(
		"ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", 
		"サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", 
		"ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ", 
		"マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ", "リ", 
		"ル", "レ", "ロ", "ワ", "ヲ", "ン", "-", "-", "-", "-"
	);
	var befdaku = new Array(
		"ヴ", "ガ", "ギ", "グ", "ゲ", "ゴ", "ザ", "ジ", "ズ", "ゼ", 
		"ゾ", "ダ", "ヂ", "ヅ", "デ", "ド", "バ", "ビ", "ブ", "ベ", 
		"ボ", "パ", "ピ", "プ", "ペ", "ポ"
	);

	var bef = befnum.concat(befalph, befkigo, befkana);
	var aft = aftnum.concat(aftalph, aftkigo, aftkana);
	for(i = 0; i < aftdaku.length; i++) {
		reg = new RegExp(befdaku[i], "g");
		textIn = textIn.replace(reg, aftdaku[i]);
	}
	for(i = 0; i < aft.length; i++) {
		reg = new RegExp(bef[i],"g");
		textIn = textIn.replace(reg, aft[i]);
	}
	textIn = textIn.replace(/\\/g,"¥");
	return(textIn.toLowerCase());
}
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P13.3.4 絞り込み検索フォーム-3

(1) 説明

  • 絞り込み条件を指定してリストから該当項目の絞り込みを行う検索フォームです。
  • 絞り込み条件は、チェックボックスに加えて検索文字による絞り込みが可能です。
  • 選択肢 m と選択肢 c の両方が満たされているレコードが表示されます。さらに、検索文字が指定されていると検索文字による絞り込みも実施します。(動作は、「絞り込み検索フォーム-2」と同じです)
  • 本方式は、レコードの情報を JavaScript の配列で保持しておき、検索条件によって JavaScript(jQuery)で動的にテーブルタグを作成する方式です。レコード情報が JavaScript 部分に記述されていますのでレコード情報を JavaScript ファイルとして外だしにすることができます。

(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)を記述してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 13-other/34-form-4
    • index.html
    • images
      • icon-chk.svg
    • js
      • jquery-3.6.0.min.js
(b) 画像
  • チェック (icon-chk.svg:チェック)
(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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* リスト絞り込み領域の設定 */
.wrapper {								/* リスト絞り込み領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
.wrapper .box {
	padding: 20px;
}
.wrapper .box ul.check-box-list {
	list-style: none;
	overflow: hidden;
}
.wrapper .box ul.check-box-list li {
	width: calc(100% / 6 - 30px);
	margin: 15px 15px;
	float: left;
}
@media screen and (max-width: 960px) {
	.wrapper .box ul.check-box-list li {
		width: calc(100% / 3 - 30px);
	}
}
@media screen and (max-width: 760px) {
	.wrapper .box ul.check-box-list li {
		width: calc(100% / 2 - 30px);
	}
}

/* 検索条件の設定 */
.wrapper .box ul.check-box-list li {
	margin: 5px 15px;
	border: none;
}
.wrapper .box ul.check-box-list label {
	display: block;
	width: 100%;
}
.wrapper .box ul.check-box-list label input {
	display: none;
}
.wrapper .box ul.check-box-list label span {
	font-size: 1.0rem;
	position: relative;
}
.wrapper .box ul.check-box-list label span::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	border: 1px #888 solid;
	vertical-align: middle;
	box-sizing: border-box;
}
.wrapper .box ul.check-box-list label input:checked + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label:hover input + span::before {
	border: 2px #888 solid;
}
.wrapper .box ul.check-box-list label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.wrapper .box ul.check-box-list span.all-select {
	color: red;
}
/* 検索文字列 */
.wrapper .box ul.search-message {
	margin: 10px 0 10px 20px;
}
.wrapper .box input#search {
	width: 40%;
	padding: 5px;
	font-size: 1rem;
}
/* 検索ボタン */
.wrapper .box div.search-button {
	width: calc(100% / 1 - 30px);
	padding: 10px;
	margin: 15px auto;
	border-radius: 30px;
	background: steelblue;
	font-size: 1.1rem;
	color: white;
	text-align: center;
}
.wrapper .box div.search-button:hover {
	opacity: 0.6;
	cursor: pointer;
}
/* 検索結果メッセージ */
.wrapper .box span.message {
	color: red;
}
/* 検索結果リスト */
.wrapper .box table.search-list {
	width: 100%;
	font-size: 1.0rem;
	border-collapse: collapse;
	background-color: white;
}
.wrapper .box table.search-list tr th,
.wrapper .box table.search-list tr td {
	word-break: break-all;
}
.wrapper .box table.search-list tr th:nth-child(1),
.wrapper .box table.search-list tr td:nth-child(1) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(2),
.wrapper .box table.search-list tr td:nth-child(2) {
	width: 100px;
}
.wrapper .box table.search-list tr th:nth-child(3),
.wrapper .box table.search-list tr td:nth-child(3) {
	width: calc(100% - 100px - 100px);
}
.wrapper .box table.search-list tr.gray {
	background-color: #eee;
}
.wrapper .box table.search-list tr.hide {
	display: none;
}
.wrapper .box table.search-list tr th {
	padding: 5px 0px 5px 0px;
	text-align: center;
	border: 1px #ccc solid;
	background-color: #666;
	color: white;
}
.wrapper .box table.search-list tr td {
	padding: 5px 5px 5px 5px;
	border: 1px #ccc solid;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- リスト絞り込み領域の定義 -->
	<div class="wrapper">
		<div class="title">リストの絞り込み検索</div>
		<div class="box">
			<div class="sub-title">選択肢m</div>
			<ul class="check-box-list">
				<li><label for="m00"><input type="checkbox" name="mParent" id="m00" value="m00"><span class="all-select">全選択</span></label></li>
				<li><label for="m01"><input type="checkbox" name="mChild" id="m01" value="m01"><span>選択肢m01</span></label></li>
				<li><label for="m02"><input type="checkbox" name="mChild" id="m02" value="m02"><span>選択肢m02</span></label></li>
				<li><label for="m03"><input type="checkbox" name="mChild" id="m03" value="m03"><span>選択肢m03</span></label></li>
				<li><label for="m04"><input type="checkbox" name="mChild" id="m04" value="m04"><span>選択肢m04</span></label></li>
				<li><label for="m05"><input type="checkbox" name="mChild" id="m05" value="m05"><span>選択肢m05</span></label></li>
			</ul>
			<div class="sub-title">選択肢c</div>
			<ul class="check-box-list">
				<li><label for="c00"><input type="checkbox" name="cParent" id="c00" value="c00"><span class="all-select">全選択</span></label></li>
				<li><label for="c01"><input type="checkbox" name="cChild" id="c01" value="c01"><span>選択肢c01</span></label></li>
				<li><label for="c02"><input type="checkbox" name="cChild" id="c02" value="c02"><span>選択肢c02</span></label></li>
				<li><label for="c03"><input type="checkbox" name="cChild" id="c03" value="c03"><span>選択肢c03</span></label></li>
				<li><label for="c04"><input type="checkbox" name="cChild" id="c04" value="c04"><span>選択肢c04</span></label></li>
				<li><label for="c05"><input type="checkbox" name="cChild" id="c05" value="c05"><span>選択肢c05</span></label></li>
			</ul>
			<div class="sub-title">文字列での絞り込み</div>
			<ul class="search-message">
				<li>上記の選択肢での絞り込み結果から、さらに文字列での絞り込みを行います。</li>
				<li>絞り込み文字列を空白で区切って指定します。(すべての文字列を含むものを検索します)</li>
				<li>文字列が指定されていない場合は、文字列での絞り込みを行いません。</li>
			</ul>
			<div><label for="search"> 検索文字列 <input type="text" name="search" id="search" value=""></label>
			<div class="search-button">検索開始</div>
			<div class="sub-title search-result">検索結果<span class="message"></span></div>
			<table class="search-list"></table>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- 検索画面の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>

const search_result = [
	[ "m01", "c01", "選択肢m01", "選択肢c01", "選択肢m01 - 選択肢c01 あいうえお abc def" ],
	[ "m01", "c02", "選択肢m01", "選択肢c02", "選択肢m01 - 選択肢c02 あいうえお ABC DEF" ],
	[ "m01", "c03", "選択肢m01", "選択肢c03", "選択肢m01 - 選択肢c03 あいうえお ghi jkl" ],
	[ "m01", "c04", "選択肢m01", "選択肢c04", "選択肢m01 - 選択肢c04 あいうえお GHI JKL" ],
	[ "m01", "c05", "選択肢m01", "選択肢c05", "選択肢m01 - 選択肢c05 かきくけこ mno pqr" ],
	[ "m02", "c01", "選択肢m02", "選択肢c01", "選択肢m02 - 選択肢c01 かきくけこ MNO PQR" ],
	[ "m02", "c02", "選択肢m02", "選択肢c02", "選択肢m02 - 選択肢c02 かきくけこ stu vwx" ],
	[ "m03", "c03", "選択肢m03", "選択肢c03", "選択肢m03 - 選択肢c03 かきくけこ STU VWX" ],
	[ "m03", "c04", "選択肢m03", "選択肢c04", "選択肢m03 - 選択肢c04 さしすせそ abc def" ],
	[ "m04", "c05", "選択肢m04", "選択肢c05", "選択肢m04 - 選択肢c05 さしすせそ ABC DEF" ],
	[ "m04", "c01", "選択肢m04", "選択肢c01", "選択肢m04 - 選択肢c01 さしすせそ ghi jkl" ],
	[ "m05", "c02", "選択肢m05", "選択肢c02", "選択肢m05 - 選択肢c02 さしすせそ GHI JKL" ],
	[ "m05", "c03", "選択肢m05", "選択肢c03", "選択肢m05 - 選択肢c03 たちつてと mno pqr" ],
	[ "m01", "c04", "選択肢m01", "選択肢c04", "選択肢m01 - 選択肢c04 たちつてと MNO PQR" ],
	[ "m01", "c05", "選択肢m01", "選択肢c05", "選択肢m01 - 選択肢c05 たちつてと stu vwx" ],
	[ "m02", "c01", "選択肢m02", "選択肢c01", "選択肢m02 - 選択肢c01 たちつてと STU CWX" ],
	[ "m02", "c02", "選択肢m02", "選択肢c02", "選択肢m02 - 選択肢c02 なにぬねの 123 456" ],
];

$(function() {							// 選択肢mの全件選択処理
	$('#m00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="mChild"]').prop('checked', true);
		}
		else {
			$('input[name="mChild"]').prop('checked', false);
	    }
	});
});

$(function() {							// 選択肢cの全件選択処理
	$('#c00').change(function() {
		if ($(this).prop('checked')) {
			$('input[name="cChild"]').prop('checked', true);
		}
		else {
			$('input[name="cChild"]').prop('checked', false);
	    }
	});
});

$(function() {							// 検索ボタン押下処理
	$('.search-button').click(function() {
		let html = '<tr class="header"><th>選択肢m</th><th>選択肢c</th><th>名称</th></tr>';
		let iCount = 0;
		for (let i = 0; i < search_result.length; i++) {
			let m_code = search_result[i][0];
			let c_code = search_result[i][1];
			let data1 = search_result[i][2];
			let data2 = search_result[i][3];
			let data3 = search_result[i][4];
			let putFlag = true;
			$('input[name="mChild"]').each(function() {
				if (!($(this).prop("checked"))) {
					if (m_code == $(this).val()) {
						putFlag = false;
					}
				}
			});
			$('input[name="cChild"]').each(function() {
				if (!($(this).prop("checked"))) {
					if (c_code == $(this).val()) {
						putFlag = false;
					}
				}
			});
			let sSearch = $('#search').val().trim();
			if (sSearch != "") {
				let vSearch = sSearch.split(/\s+/);
				vSearch.forEach(function(s) {
					let sIn = convString(s);
					let sText = convString(data1 + data2 + data3);
					if (!sText.includes(sIn)) {
						putFlag = false;
					}
				});
			}
			if (putFlag) {
				html = html + '<tr><td>' + data1 + '</td><td>' + data2 + '</td><td>' + data3 + '</td></tr>';
				iCount++;
			}
		}
		if (iCount == 0) {
			$('.search-result .message').text('(検索結果が見つかりませんでした)');
			html = "";
		}
		else {
			$('.search-result .message').text('(' + iCount + '件の検索結果が見つかりました)');
		}
		$('.search-list').html(html);
		$("html,body").animate({ scrollTop:$('.search-result').offset().top });
	});
});

function convString(textIn) {			// 文字列内の数字、英字、カタカナを全角(小文字)に変換
	var aftnum = new Array(
		"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
	);
	var aftalph = new Array(
		"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", 
		"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", 
		"U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", 
		"e", "f", "g", "h", "i", "j", "k", "l", "m", "n", 
		"o", "p", "q", "r", "s", "t", "u", "v", "w", "x", 
		"y", "z"
	);
	var aftkigo = new Array(
		' ', '!', '”', '#', '$', '%', '&', '’', '(', ')', 
		'=', '~', '^', '|', '‘', '@', '{', '[', '「', '+', 
		';', '*', ':', '}', ']', '」', '<', ',', '、', '>', 
		'.', '。', '?', '・', '/', '_'
	);
	var aftkana = new Array(
		"ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", 
		"サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", 
		"ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ", 
		"マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ", "リ", 
		"ル", "レ", "ロ", "ワ", "ヲ", "ン", "―", "ー", "-", "‐"
	);
	var aftdaku = new Array(
		"ヴ", "ガ", "ギ", "グ", "ゲ", "ゴ", "ザ", "ジ", "ズ", "ゼ", 
		"ゾ", "ダ", "ヂ", "ヅ", "デ", "ド", "バ", "ビ", "ブ", "ベ", 
		"ボ", "パ", "ピ", "プ", "ペ", "ポ"
	);
	var befnum = new Array(
		"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
	);
	var befalph = new Array(
		"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", 
		"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", 
		"U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", 
		"e", "f", "g", "h", "i", "j", "k", "l", "m", "n", 
		"o", "p", "q", "r", "s", "t", "u", "v", "w", "x", 
		"y", "z"
	);
	var befkigo = new Array(
		' ', '!', '\"', '#', '\\$', '%', '&', '\'', '\\(', '\\)', 
		'=', '~', '\\^', '\\|', '`', '@', '\\{', '\\[', '「', '\\+', 
		';', '\\*', ':', '\\}', '\\]', '」', '<', ',', '、', '>', 
		'\\.', '。', '\\?', '・', '\\/', '_'
	);
	var befkana = new Array(
		"ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", 
		"サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", 
		"ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ", 
		"マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ", "リ", 
		"ル", "レ", "ロ", "ワ", "ヲ", "ン", "-", "-", "-", "-"
	);
	var befdaku = new Array(
		"ヴ", "ガ", "ギ", "グ", "ゲ", "ゴ", "ザ", "ジ", "ズ", "ゼ", 
		"ゾ", "ダ", "ヂ", "ヅ", "デ", "ド", "バ", "ビ", "ブ", "ベ", 
		"ボ", "パ", "ピ", "プ", "ペ", "ポ"
	);

	var bef = befnum.concat(befalph, befkigo, befkana);
	var aft = aftnum.concat(aftalph, aftkigo, aftkana);
	for(i = 0; i < aftdaku.length; i++) {
		reg = new RegExp(befdaku[i], "g");
		textIn = textIn.replace(reg, aftdaku[i]);
	}
	for(i = 0; i < aft.length; i++) {
		reg = new RegExp(bef[i],"g");
		textIn = textIn.replace(reg, aft[i]);
	}
	textIn = textIn.replace(/\\/g,"¥");
	return(textIn.toLowerCase());
}

</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

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