HTML-CSS 入門講座

HTML-CSS 入門講座

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

WebParts-6
アコーディオン

目次

P6.1 はじめに

P6.1.1 概要

アコーディオンは、コンテンツの折りたたみを行える機能です。見出し領域をクリックすることでコンテンツの開閉が行えます。

P6.2 アコーディオン

P6.2.1 detailsタグ

(1) 説明

  • details タグを使用したアコーディオンパネルです。

(2) 表示形式

  • 項目をクリックしてアコーディオン動作を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

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

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSだけのアコーディオンパネルのサンプル</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;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* CSSだけのアコーディオンパネルの設定 */
h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6em;
	background: steelblue;
	color: #fff;
	text-align: center;
}
h2 {
	font-size: 1.4em;
	padding: 10px;
	color: #333;
}
.accordion-wrapper details {
	padding: 10px;
	margin: 10px 0;
	border: #ccc 1px solid;
}
.accordion-wrapper details summary {
	padding: 0 10px;
}
.accordion-wrapper details p {
	padding: 20px;
	margin: 10px 10px 10px 10px;
	background: #eee;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- CSSだけのアコーディオンパネルの定義 -->
	<div class="wrapper">
		<div class="accordion-wrapper">
			<details>
				<summary>項目-01</summary>
				<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
			</details>
			<details>
				<summary>項目-02</summary>
				<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
			</details>
			<details>
				<summary>項目-03</summary>
				<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
			</details>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P6.2.2 jQuery-1

(1) 説明

  • jQuery で作成したアコーディオンパネルです。

(2) 表示形式

  • 項目をクリックしてアコーディオン動作を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 06-accordion/22-accordion-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,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) ▼▼▼ */
/* アコーディオンパネルの設定 */
.accordion-area {
	list-style: none;
}
.accordion-area li {
	margin: 10px 0;
}
.accordion-area section {
	border: #ccc 1px solid;
}
.title {								/* アコーディオンのタイトル */
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 10px 10px 10px 50px;
	transition: all .5s ease;
}
.title::before,							/* アコーディオンのアイコン */
.title::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	background: #333;
}
.title::before {
	top: 48%;
	left: 15px;
	transform: rotate(0deg);
}
.title::after {
	top: 48%;
	left: 15px;
	transform: rotate(90deg);
}
.title.close::before {
	transform: rotate(45deg);
}
.title.close::after {
	transform: rotate(-45deg);
}
.box {									/* アコーディオンの内容 */
	display: none;
	padding: 20px;
	margin: 0 20px 20px 20px;
	background: #eee;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- アコーディオンパネルの定義 -->
	<div class="wrapper">
		<ul class="accordion-area">
			<li>
				<section>
					<h2 class="title">項目-01</h2>
					<div class="box">
						<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
			<li>
				<section>
					<h2 class="title">項目-02</h2>
					<div class="box">
						<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
			<li>
				<section>
					<h2 class="title">項目-03</h2>
					<div class="box">
						<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$('.title').on('click', function() {	// タイトル要素をクリックしたら内容を表示
	var findElm = $(this).next(".box");
	$(findElm).slideToggle();
	if ($(this).hasClass('close')) {	// アイコン(+と×)を反転
		$(this).removeClass('close');
	}
	else {
		$(this).addClass('close');
	}
});
$(window).on('load', function() {		// ページ読み込み時に先頭を開く時は下記を有効に!
/*
	$('.accordion-area li:first-of-type section').addClass("open");
		$(".open").each(function(index, element) {
		var Title =$(element).children('.title');
		$(Title).addClass('close');
		var Box =$(element).children('.box');
		$(Box).slideDown(500);
	});
*/
});
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</script>

</body>
</html>

P6.2.3 jQuery(1ヶ所表示)

(1) 説明

  • jQuery で作成したアコーディオンパネルです。
  • 常に 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) ファイル配置
  • 06-accordion/23-accordion-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,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) ▼▼▼ */
/* アコーディオンパネルの設定 */
.accordion-area {
	list-style: none;
}
.accordion-area li {
	margin: 10px 0;
}
.accordion-area section {
	border: #ccc 1px solid;
}
.title {								/* アコーディオンのタイトル */
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 10px 10px 10px 50px;
	transition: all .5s ease;
}
.title::before,							/* アコーディオンのアイコン */
.title::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	background: #333;
}
.title::before {
	top: 48%;
	left: 15px;
	transform: rotate(0deg);
}
.title::after {
	top: 48%;
	left: 15px;
	transform: rotate(90deg);
}
.title.close::before {
	transform: rotate(45deg);
}
.title.close::after {
	transform: rotate(-45deg);
}
.box {									/* アコーディオンの内容 */
	display: none;
	padding: 20px;
	margin: 0 20px 20px 20px;
	background: #eee;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- アコーディオンパネルの定義 -->
	<div class="wrapper">
		<ul class="accordion-area">
			<li>
				<section>
					<h2 class="title">項目-01</h2>
					<div class="box">
						<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
			<li>
				<section>
					<h2 class="title">項目-02</h2>
					<div class="box">
						<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
			<li>
				<section>
					<h2 class="title">項目-03</h2>
					<div class="box">
						<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
					</div>
				</section>
			</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$('.title').on('click', function() {	// タイトル要素をクリックしたら内容を表示
	$('.box').slideUp(500);				// すべてのアコーディオンを閉じる
	var findElm = $(this).next(".box");
	if ($(this).hasClass('close')) {	// アイコン(+と×)を反転
		$(this).removeClass('close');
	}
	else {
		$('.close').removeClass('close');
		$(this).addClass('close');
		$(findElm).slideDown(500);
	}
});
$(window).on('load', function() {		// ページ読み込み時に先頭を開く時は下記を有効に!
/*
	$('.accordion-area li:first-of-type section').addClass("open");
		$(".open").each(function(index, element) {
		var Title =$(element).children('.title');
		$(Title).addClass('close');
		var Box =$(element).children('.box');
		$(Box).slideDown(500);
	});
*/
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

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