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

WebParts-5
メニュー

P5.1 はじめに

P5.1.1 概要

メニューは、Web サイトに格納されているコンテンツを表示するためのナビゲーション情報です。すべてのページに共通に設定されている主要ページへのリンク情報をグローバルナビゲーションと呼びます。

ハンバーガー: 三本線で表示されるメニューです。三本線をクリックするとメニューが表示されます。
ドリルダウン: メニュー項目をクリックすると折りたたんであるサブメニューを表示する形状のメニューです。
ドロップダウン: メニュー項目にマウスオーバーすると直下にサブメニュー項目が表示される形状のメニューです。
タブ: タブをクリックするとコンテンツが切り替わる形状のメニューです。
パンくずリスト: 表示しているページの位置を簡易的に表示したリンクリストです。

P5.2 ハンバーガー

P5.2.1 ハンバーガー（単独）

(1) 説明

CSS だけで実現するハンバーガーメニューです。
三本線のハンバーガーボタンでメニューの閉開を行えます。

(2) 表示形式

右上のハンバーガーメニューをクリックしてメニューの閉開を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用します。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
/body タグの直前に動作指示スクリプト（※4）を記述してください。このスクリプトはハンバーガーメニューでページ内リンクを使用した場合にクリックするとハンバーガーメニューを消去します。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/21-hamburger-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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.space {
	height: 430px;
}
.space p {
	padding-top: 45vh;
	text-align: center;
}

/* ハンバーガーメニューの設定 */
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
div.hamburger-menu {
	display: block;						/* 初期状態で非表示にする場合は「none」を設定 */
}
@media screen and (max-width: 760px) {
	div.hamburger-menu {
		display: block;
	}
}
div.hamburger-menu .menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(0,0,0,0.3);
	cursor: pointer;
	border-radius: 10px;
}
div.hamburger-menu .menu-btn span,
div.hamburger-menu .menu-btn span:before,
div.hamburger-menu .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 35px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
}
div.hamburger-menu .menu-btn span:before {
    bottom: 10px;
}
div.hamburger-menu .menu-btn span:after {
    top: 10px;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
div.hamburger-menu #menu-btn-check {
    display: none;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-content {
    left: calc(100% - 220px);			/* メニュー領域の引き出し位置（0にすると左端まで） */
}
div.hamburger-menu .menu-content {
	width: 100%;
	height: 100vh;						/* autoにするとコンテンツ領域分までに */
    position: fixed;
    top: 0;
    left: 100%;
	overflow: auto;
    z-index: 80;
    padding: 0 10px;
    background-color: rgba(0,0,0,0.7);
    transition: all 0.5s;				/* メニュー領域の引き出しスピード */
}
div.hamburger-menu .menu-content ul {
	display: block;
	width: 200px;						/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
    padding-top: 80px;
}
div.hamburger-menu .menu-content ul li {
    border-top: solid 1px #fff;
    list-style: none;
}
div.hamburger-menu .menu-content ul li:last-child {
    border-bottom: solid 1px #fff;
}
div.hamburger-menu .menu-content ul li a {
	display: block;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
	font-weight: bold;
    padding: 10px 0px;
    text-align: center;
}
div.hamburger-menu .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
}
div.hamburger-menu .menu-content ul li a:hover {
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ハンバーガーメニューの定義 -->
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
    <div class="hamburger-menu">
		<input type="checkbox" id="menu-btn-check" value="">
		<label for="menu-btn-check" class="menu-btn"><span></span></label>
		<div class="menu-content">
			<ul>
				<li><a href="#">メニュー 01<br><span>MENU-01</span></a></li>
				<li><a href="#">メニュー 02<br><span>MENU-02</span></a></li>
				<li><a href="#">メニュー 03<br><span>MENU-03</span></a></li>
				<li><a href="#">メニュー 04<br><span>MENU-04</span></a></li>
				<li><a href="#">メニュー 05<br><span>MENU-05</span></a></li>
			</ul>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div class="space">					<!-- ダミー領域 -->
		<p>コンテンツ本文</p>
	</div>
</div>

<!-- ページ内リンク時のハンバーガーメニュー消去 -->
<!-- ▼▼▼ HTML（ここから）（※4） ▼▼▼ -->
<script>
	let a = document.querySelectorAll('div.hamburger-menu a')
	for (let i = 0; i < a.length; i++) {
		a[i].addEventListener('click', () => { document.getElementById('menu-btn-check').checked = false; })
	}
</script>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->

</body>
</html>

P5.2.2 ハンバーガー（複合）

(1) 説明

PC 用の通常メニューとスマホ用のハンバーガーメニューの複合メニューです。
一つのメニュー定義で PC 用とスマホ用の両方のメニュー表示ができます。
760px をブレークポイントに PC 用とスマホ用を切り替えます。
ハンバーガーメニューは、CSS だけで実現しています。

(2) 表示形式

画面幅を変更して PC 用とスマホ用が切り替わることを確認してください。
右上のハンバーガーメニューをクリックしてメニューの閉開を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用します。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
スタイル定義（※2）をスタイルシート（CSS）ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート（CSS）ファイルに記述してください。
HTML ファイルの対象領域に表示定義（※3）を記述してください。
/body タグの直前に動作指示スクリプト（※4）を記述してください。このスクリプトはハンバーガーメニューでページ内リンクを使用した場合にクリックするとハンバーガーメニューを消去します。

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/22-hamburger-2
- 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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.space {
	height: 430px;
}
.space p {
	padding-top: 45vh;
	text-align: center;
}

/* メニューの共通設定 */
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
nav.menu-wrapper #menu-btn-check {
    display: none;						/* チェックボックスは非表示 */
}
/* PCメニューの設定 */
nav.menu-wrapper {
	max-width: 960px;
	margin: 0 auto;
}
nav.menu-wrapper .menu-content ul {
	display: flex;
    list-style: none;
}
nav.menu-wrapper .menu-content ul li {
	width: calc(100% / 5);
	padding: 5px 0;
	border-left: 1px #ccc solid;
}
nav.menu-wrapper .menu-content ul li:last-child {
	border-right: 1px #ccc solid;
}
nav.menu-wrapper .menu-content ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #333;
	font-size: 1rem;
	font-weight: bold;
}
nav.menu-wrapper .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
}
nav.menu-wrapper .menu-content ul li a:hover {
	opacity: 0.6;
}

/* スマホメニューの設定 */
@media screen and (max-width: 760px) {
	nav.menu-wrapper .menu-btn {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    height: 60px;
	    width: 60px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background-color: rgba(0,0,0,0.3);
		cursor: pointer;
		border-radius: 10px;
	}
	nav.menu-wrapper .menu-btn span,
	nav.menu-wrapper .menu-btn span:before,
	nav.menu-wrapper .menu-btn span:after {
	    content: '';
	    display: block;
	    height: 6px;
	    width: 35px;
	    border-radius: 3px;
	    background-color: #fff;
	    position: absolute;
	}
	nav.menu-wrapper .menu-btn span:before {
	    bottom: 10px;
	}
	nav.menu-wrapper .menu-btn span:after {
	    top: 10px;
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span {
	    background-color: rgba(255, 255, 255, 0);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::before {
	    bottom: 0;
	    transform: rotate(45deg);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::after {
	    top: 0;
	    transform: rotate(-45deg);
	}
	nav.menu-wrapper #menu-btn-check:checked ~ .menu-content {
	    left: calc(100% - 220px);			/* メニュー領域の引き出し位置（0にすると左端まで） */
	}
	nav.menu-wrapper .menu-content {
		width: 100%;
		height: 100vh;						/* autoにするとコンテンツ領域分までに */
	    position: fixed;
	    top: 0;
	    left: 100%;
		overflow: auto;
	    z-index: 80;
	    padding: 0 10px;
	    background-color: rgba(0,0,0,0.7);
	    transition: all 0.5s;
	}
	nav.menu-wrapper .menu-content ul {
		display: block;
		width: 200px;						/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
	    padding-top: 80px;
	    list-style: none;
	}
	nav.menu-wrapper .menu-content ul li {
		width: 100%;
		border-left: none;
	    border-top: solid 1px #fff;
	}
	nav.menu-wrapper .menu-content ul li:last-child {
		border-right: none;
	    border-bottom: solid 1px #fff;
	}
	nav.menu-wrapper .menu-content ul li a {
		display: block;
	    font-size: 16px;
	    text-decoration: none;
	    color: #fff;
		font-weight: bold;
	    padding: 10px 0px;
	    text-align: center;
	}
	nav.menu-wrapper .menu-content ul li a span {
		font-size: 90%;
		font-weight: normal;
	}
	nav.menu-wrapper .menu-content ul li a:hover {
		opacity: 0.6;
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- メニューの定義 -->
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
    <nav class="menu-wrapper">
		<input type="checkbox" id="menu-btn-check" value="">
		<label for="menu-btn-check" class="menu-btn"><span></span></label>
		<div class="menu-content">
			<ul>
				<li><a href="#">メニュー 01<br><span>MENU-01</span></a></li>
				<li><a href="#">メニュー 02<br><span>MENU-02</span></a></li>
				<li><a href="#">メニュー 03<br><span>MENU-03</span></a></li>
				<li><a href="#">メニュー 04<br><span>MENU-04</span></a></li>
				<li><a href="#">メニュー 05<br><span>MENU-05</span></a></li>
			</ul>
		</div>
	</nav>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div class="space">					<!-- ダミー領域 -->
		<p>コンテンツ本文</p>
	</div>
</div>

<!-- ページ内リンク時のハンバーガーメニュー消去 -->
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<script>
	let a = document.querySelectorAll('div.menu-content a')
	for (let i = 0; i < a.length; i++) {
		a[i].addEventListener('click', () => { document.getElementById('menu-btn-check').checked = false; })
	}
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P5.3 ドリルダウン

P5.3.1 ドリルダウン

(1) 説明

CSS だけで実現したドリルダウンメニューです。
子メニュー項目、孫メニュー項目を設定することができます。

(2) 表示形式

メニューをクリックして子メニュー、孫メニューが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/31-drilldown-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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* アコーディオンメニューの設定 */
nav {
	background: #333;
	color: #fff;						/* メニュー部の背景色 */
	text-align: center;
}
nav ul {								/* 親メニューの枠 */
	list-style: none;
}
nav ul li {
	position: relative;
	background: #333;					/* 親メニューの背景色 */
	border-bottom: #fff 1px solid;		/* 親メニューの区切り線（下） */
}
nav ul li:last-child {
	border-bottom: none;
}
nav ul li a {
	display: block;
	text-decoration: none;
	color:  #fff;						/* 親メニューの文字色 */
	padding: 15px 0;					/* 親メニューの上下余白 */
	transition:all .3s;
}
nav ul li a:hover {
	color: #ccc; 						/* 親メニューの文字色（オンマウス時） */
}
nav ul li.child::before {				/* 親メニュー（子メニューあり）の下矢印 */
	content: '';
	position: absolute;
	left: 20px;
	top: 24px;
	width: 6px;
	height: 6px;
	border-top:  2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}
nav ul li ul {							/* 子・孫メニューの枠 */
	display: none;
}
nav ul li ul li {
	background: #555;					/* 子・孫メニューの背景色 */
	border-bottom: #fff 1px solid;		/* 子・孫メニューの区切り線（下） */
}
nav ul li ul li:first-child {
	border-top: #fff 1px solid;			/* 子・孫メニューの区切り線（上） */
}
nav ul li ul li a {
	padding: 10px 0;					/* 子・孫メニューの上下余白 */
}
nav ul li.child ul li.child::before {	/* 子メニュー（孫メニューあり）の右矢印 */
	content: '';
	position: absolute;
	left: 20px;
	top: 19px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(135deg);
}
nav ul li ul li a:hover,
nav ul li ul li a:active {
	background: #444;					/* 子・孫メニューの背景色（オンマウス時） */
}
nav ul li ul li ul li {
	background: #777;					/* 孫メニューの背景色 */
}
nav ul li ul li ul li a:hover,
nav ul li ul li ul li a:active {
	background: #444;					/* 孫メニューの背景色（オンマウス時） */
}
nav ul li.active::before,				/* 親・子メニューの矢印を上矢印に変更（アクティブ時） */
nav ul li.child ul li.child.active::before {
	transform: rotate(-45deg);
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- アコーディオンメニューの定義 -->
	<!-- 子メニューや孫メニューがあるliタグにはchildクラスを設定 -->
	<nav>
		<ul>
			<li><a>メニュー 01</a></li>
			<li><a>メニュー 02</a></li>
			<li class="child"><a>メニュー 03</a>
				<ul>
					<li><a>メニュー 03-01</a></li>
					<li><a>メニュー 03-02</a></li>
					<li class="child"><a>メニュー 03-03</a>
						<ul>
							<li><a>メニュー 03-03-01</a></li>
							<li><a>メニュー 03-03-02</a></li>
							<li><a>メニュー 03-03-03</a></li>
							<li><a>メニュー 03-03-04</a></li>
							<li><a>メニュー 03-03-05</a></li>
						</ul>
					</li>
					<li class="child"><a>メニュー 03-04</a>
						<ul>
							<li><a>メニュー 03-04-01</a></li>
							<li><a>メニュー 03-04-02</a></li>
							<li><a>メニュー 03-04-03</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="child"><a>メニュー 04</a>
				<ul>
					<li><a>メニュー 04-01</a></li>
					<li><a>メニュー 04-02</a></li>
					<li><a>メニュー 04-03</a></li>
					<li><a>メニュー 04-04</a></li>
					<li><a>メニュー 04-05</a></li>
				</ul>
			</li>
		</ul>
	</nav>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- アコーディオンメニューの制御 -->
<script src="js/jquery-3.5.0.min.js"></script>
<script>
function changeLayout() {
	var width = $(window).width();
	$(".child > a").off('click');								// aタグのonイベントの複数登録を避ける為に一旦初期状態へ
	$(".child > a").on('click', function() {					// childクラスがついたaタグをクリック時
		var parentElem =  $(this).parent();						// aタグから見た親要素のliタグを取得し
		$(parentElem).toggleClass('active');					// 矢印方向を変更するためにactiveクラス名を付与
		$(parentElem).children('ul').stop().slideToggle(500);	// liの子要素のスライドを指定時間で開閉
		return false;											// リンクの無効化 */
	});
}
$(window).resize(function() {									// ページのリサイズ時
	changeLayout();
});
$(window).on('load',function(){									// ページの読込時
	changeLayout();
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P5.4 ドロップダウン

P4.4.1 ドロップダウン

(1) 説明

CSS だけで実現するドロップダウンメニューです。
子メニュー項目、孫メニュー項目を設定することができます。

(2) 表示形式

メニューのオンマウスして子メニュー、孫ニュウーが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/41-dropdown-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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.container > div {
	height: 330px;
}
.container > div p {
	padding-top: 35vh;
	text-align: center;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ドロップダウンメニューの設定 */
nav {
	background: #333;
	color: #fff;						/* メニュー部の背景色 */
	text-align: center;
}
nav ul {
	max-width: 960px;					/* メニュー部の最大幅 */
	margin: 0 auto;
	list-style: none;
	display: flex;
	justify-content: center;
}
nav ul li {
	width: calc(100% / 4);				/* 親メニューの項目幅（親メニューの個数） */
	position: relative;
	background: #333;					/* 親メニューの背景色 */
	border-left: 1px #fff solid;		/* 親メニューの区切り線（左） */
}
nav ul li:last-child {
	border-right: 1px #fff solid;		/* 親メニューの区切り線（最後の右） */
}
nav ul li a {
	display: block;
	text-decoration: none;
	color:  #fff;						/* 親メニューの文字色 */
	padding: 15px 0;					/* 親メニューの上下余白 */
	transition:all .3s;
}
@media screen and (max-width: 760px) {
	nav ul li a {
		font-size: 0.6rem;
		line-height: 2.5;
	}
}
nav ul li a:hover {
	color: #ccc; 						/* 親メニューの文字色（オンマウス時） */
}
nav ul li.child::before {				/* 親メニュー（子メニューあり）の下矢印 */
	content: '';
	position: absolute;
	left: 15px;
	top: 22px;
	width: 6px;
	height: 6px;
	border-top:  2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}
@media screen and (max-width: 760px) {
	nav ul li.child::before {
		border: none;
	}
}
nav ul li ul {
	display: none;
	width: 100%;
	position: absolute;
	left: 0;							/* 子メュウーの横位置（親メニューの左部から） */
	top: 56px;							/* 子メニューの縦位置（親メニューの上部から） */
	z-index: 4;
	transition: all .3s;
}
nav ul li.child:hover > ul,
nav ul li.child ul li:hover > ul,
nav ul li.child:active > ul,
nav ul li.child ul li:active > ul {
	display: block;
}
nav ul li ul li {
	width: 100%;
	background: #555;					/* 子メニューの背景色 */
	border-left: none;
	border-right: none;
	border-bottom: #fff 1px solid;		/* 子メニュー・孫メニューの区切り線（下） */
}
nav ul li ul li:last-child {
	border-right: none;
}
nav ul li ul li a {
	padding: 10px 0;					/* 子メニューの上下余白 */
	color: #fff;						/* 子メニューの文字色 */
}
nav ul li.child ul li.child::before {	/* 子メニュー（孫メニューあり）の右矢印 */
	content: '';
	position: absolute;
	left: 15px;
	top: 17px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
}
nav ul li ul li a:hover,
nav ul li ul li a:active {
	background: #444;					/* 子メニューの背景色（オンマウス時） */
}
nav ul li ul li ul {
	left: 100%;							/* 孫メニューの横位置（子メニューの左部から） */
	top: 0;								/* 孫メニューの縦位置（子メニューの上部から） */
}
nav ul li ul li ul li {
	background: #777;					/* 孫メニューの背景色 */
}
nav ul li ul li ul li a:hover,
nav ul li ul li ul li a:active {
	background: #444;					/* 孫メニューの背景色（オンマウス時） */
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ドロップダウンメニューの定義 -->
	<!-- 子メニューや孫メニューがあるliタグにはchildクラスを設定 -->
	<nav>
		<ul>
			<li><a>メニュー 01</a></li>
			<li><a>メニュー 02</a></li>
			<li class="child"><a>メニュー 03</a>
				<ul>
					<li><a>メニュー 03-01</a></li>
					<li><a>メニュー 03-02</a></li>
					<li class="child"><a>メニュー 03-03</a>
						<ul>
							<li><a>メニュー 03-03-01</a></li>
							<li><a>メニュー 03-03-02</a></li>
							<li><a>メニュー 03-03-03</a></li>
							<li><a>メニュー 03-03-04</a></li>
							<li><a>メニュー 03-03-05</a></li>
						</ul>
					</li>
					<li class="child"><a>メニュー 03-04</a>
						<ul>
							<li><a>メニュー 03-04-01</a></li>
							<li><a>メニュー 03-04-02</a></li>
							<li><a>メニュー 03-04-03</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="child"><a>メニュー 04</a>
				<ul>
					<li><a>メニュー 04-01</a></li>
					<li><a>メニュー 04-02</a></li>
					<li><a>メニュー 04-03</a></li>
					<li><a>メニュー 04-04</a></li>
					<li><a>メニュー 04-05</a></li>
				</ul>
			</li>
		</ul>
	</nav>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div>								<!-- ダミー領域の確保 -->
		<p>コンテン本文</p>
	</div>
</div>

</body>
</html>

P5.4.2 ドリルダウン併用

(1) 説明

CSS だけで実現したドロップダウンメニューとドリルダウンメニューの組み合わせです。。
ウィンドウの幅が広い時はドロップダウンメニューで表示し、ウィンドウの幅が760px未満になるとドリルダウンメニューに変化します。

(2) 表示形式

メニューのオンマウスして子メニュー、孫ニュウーが表示されることを確認してください。
ウィンドウ幅を760px未満にしてアコーディオンメニューに変化することを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/42-dropdown-2
- 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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.container > div {
	height: 330px;
}
.container > div p {
	padding-top: 35vh;
	text-align: center;
}
@media screen and (max-width:760px) {	/* 横メニューと縦メニューのブレークポイント */
	.container > div {
		height: 0px;
	}
	.container > div p {
		display: none;
	}
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ドロップダウンメニュー＋アコーディオンメニューの設定 */
nav {
	background: #333;
	color: #fff;						/* メニュー部の背景色 */
	text-align: center;
}
nav ul {
	max-width: 960px;					/* メニュー部の最大幅 */
	margin: 0 auto;
	list-style: none;
	display: flex;
	justify-content: center;
}
nav ul li {
	width: calc(100% / 4);				/* 親メニューの項目幅（親メニューの個数） */
	position: relative;
	background: #333;					/* 親メニューの背景色 */
	border-left: 1px #fff solid;		/* 親メニューの区切り線（左） */
}
nav ul li:last-child {
	border-right: 1px #fff solid;		/* 親メニューの区切り線（最後の右） */
}
nav ul li a {
	display: block;
	text-decoration: none;
	color:  #fff;						/* 親メニューの文字色 */
	padding: 15px 0;					/* 親メニューの上下余白 */
	transition:all .3s;
}
nav ul li a:hover {
	color: #ccc; 						/* 親メニューの文字色（オンマウス時） */
}
nav ul li.child::before {				/* 親メニュー（子メニューあり）の下矢印 */
	content: '';
	position: absolute;
	left: 15px;
	top: 22px;
	width: 6px;
	height: 6px;
	border-top:  2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}
nav ul li ul {
	display: none;
	width: 100%;
	position: absolute;
	left: 0;							/* 子メュウーの横位置（親メニューの左部から） */
	top: 56px;							/* 子メニューの縦位置（親メニューの上部から） */
	z-index: 4;
	transition: all .3s;
}
nav ul li.child:hover > ul,
nav ul li.child ul li:hover > ul,
nav ul li.child:active > ul,
nav ul li.child ul li:active > ul {
	display: block;
}
nav ul li ul li {
	width: 100%;
	background: #555;					/* 子メニューの背景色 */
	border-left: none;
	border-right: none;
	border-bottom: #fff 1px solid;		/* 子メニュー・孫メニューの区切り線（下） */
}
nav ul li ul li:last-child {
	border-right: none;
}
nav ul li ul li a {
	padding: 10px 0;					/* 子メニューの上下余白 */
	color: #fff;						/* 子メニューの文字色 */
}
nav ul li.child ul li.child::before {	/* 子メニュー（孫メニューあり）の右矢印 */
	content: '';
	position: absolute;
	left: 15px;
	top: 17px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
}
nav ul li ul li a:hover,
nav ul li ul li a:active {
	background: #444;					/* 子メニューの背景色（オンマウス時） */
}
nav ul li ul li ul {
	left: 100%;							/* 孫メニューの横位置（子メニューの左部から） */
	top: 0;								/* 孫メニューの縦位置（子メニューの上部から） */
}
nav ul li ul li ul li {
	background: #777;					/* 孫メニューの背景色 */
}
nav ul li ul li ul li a:hover,
nav ul li ul li ul li a:active {
	background: #444;					/* 孫メニューの背景色（オンマウス時） */
}

@media screen and (max-width:760px) {	/* 横メニューと縦メニューのブレークポイント */
	nav {
		padding: 0;
	}
	nav ul {
		display: block;					/* 縦並びに変更 */
	}
	nav ul li {
		width: 100%;
		border-left: none;
		border-bottom: #fff 1px solid;	/* 親メニューの区切り線（下） */
	}
	nav ul li:last-child {
		border-right: none;
		border-bottom: none;
	}
	nav ul li.child::before {			/* 親メニュー（子メニューあり）の下矢印 */
		top: 24px;
	}
	nav ul li ul li:first-child {
		border-top: #fff 1px solid;		/* 子・孫メニューの区切り線（上） */
	}
	nav ul li ul,
	nav ul li ul li ul {				/* 子・孫メニューの表示位置をリセット */
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		visibility: visible;
		opacity: 1;
		display: none;
		transition: none;
	}
	nav ul li.child ul li.child::before {/* 子メニュー（孫メニューあり）の右矢印 */
		top: 19px;
	}
	nav ul li.child::before,			/* 親・子メニューの矢印を下矢印に変更 */
	nav ul li.child ul li.child::before {
		transform: rotate(135deg);
		left: 20px;
	}
	nav ul li.active::before,			/* 親・子メニューの矢印を上矢印に変更（アクティブ時） */
	nav ul li.child ul li.child.active::before {
		transform: rotate(-45deg);
	}
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- ドロップダウンメニュー＋アコーディオンメニューの定義 -->
	<!-- 子メニューや孫メニューがあるliタグにはchildクラスを設定 -->
	<nav>
		<ul>
			<li><a>メニュー 01</a></li>
			<li><a>メニュー 02</a></li>
			<li class="child"><a>メニュー 03</a>
				<ul>
					<li><a>メニュー 03-01</a></li>
					<li><a>メニュー 03-02</a></li>
					<li class="child"><a>メニュー 03-03</a>
						<ul>
							<li><a>メニュー 03-03-01</a></li>
							<li><a>メニュー 03-03-02</a></li>
							<li><a>メニュー 03-03-03</a></li>
							<li><a>メニュー 03-03-04</a></li>
							<li><a>メニュー 03-03-05</a></li>
						</ul>
					</li>
					<li class="child"><a>メニュー 03-04</a>
						<ul>
							<li><a>メニュー 03-04-01</a></li>
							<li><a>メニュー 03-04-02</a></li>
							<li><a>メニュー 03-04-03</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="child"><a>メニュー 04</a>
				<ul>
					<li><a>メニュー 04-01</a></li>
					<li><a>メニュー 04-02</a></li>
					<li><a>メニュー 04-03</a></li>
					<li><a>メニュー 04-04</a></li>
					<li><a>メニュー 04-05</a></li>
				</ul>
			</li>
		</ul>
	</nav>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div>								<!-- ダミー領域の確保 -->
		<p>コンテンツ本文</p>
	</div>
</div>

<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- ドロップダウンメニュー＋アコーディオンメニューの制御 -->
<script src="js/jquery-3.5.0.min.js"></script>
<script>
function changeLayout() {
	var width = $(window).width();
	if (width <= 760) {												// 横幅が760px以下の場合
		$(".child>a").off('click');									// aタグのonイベントの複数登録を避ける為に一旦初期状態へ
		$(".child>a").on('click', function() {						// childクラスがついたaタグをクリック時
			var parentElem =  $(this).parent();						// aタグから見た親要素のliタグを取得し
			$(parentElem).toggleClass('active');					// 矢印方向を変更するためにactiveクラス名を付与
			$(parentElem).children('ul').stop().slideToggle(500);	// liの子要素のスライドを指定時間で開閉
			return false;											// リンクの無効化
		});
	}
	else {															// 横幅が760px以上の場合
		$(".child>a").off('click');									// aタグのonイベントの複数登録を避ける為に一旦初期状態へ
		$(".child>a").removeClass('active');						// 矢印方向を元に戻すためにactiveクラスを削除
		$('.child').children('ul').css("display","");				// スライドトグルで動作したdisplayを無効化
	}
}
$(window).resize(function() {										// ページのリサイズ時
	changeLayout();
});
$(window).on('load',function(){										// ページの読込時
	changeLayout();
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->

</body>
</html>

P5.5 タブ

P5.5.1 タブ

(1) 説明

CSS だけで実現したタブメニューです。
タブをクリックすることで表示されるコンテンツを切り替えることができます。

(2) 表示形式

タブをクリックすることで表示されるコンテンツが変化することを確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/51-tab-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,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 PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* タブメニューの設定 */
.tabs {									/* タブ全体 */
	background: #000;
}
.tab_item {								/* タブ項目 */
	display: block;
	width: calc(100% / 4);				/* タブ項目の数 */
	line-height: 3;
	border-left: #fff 1px solid;
	border-bottom: #fff 1px solid;
	background: #000;
	font-size: 16px;
	text-align: center;
	color: #ccc;
	font-weight: bold;
	transition: all 0.2s ease;
	float: left;
}
.tab_item:nth-child(2) {
	border-left: none;
}
.tab_item:hover {
	color: #888;
}
.tabs input:checked + .tab_item {		/* 選択中のタブスタイルの変更 */
	background: #666;
	color: #fff;
}
input[name="tab_item"] {				/* ラジオボタンを非表示に設定 */
	display: none;
}
.tab_content {							/* タブのコンテンツ */
	display: none;
	color: #fff;
	padding: 20px;
	clear: both;
	overflow: hidden;
}
.tab_content ul {
	padding-left: 20px;
}
.tab_content ul li {
	padding: 5px 0;
}
.tab_content ul li a {
	text-decoration: none;
	color: #fff;
}
.tab_content ul li a:hover {
	opacity: 0.6;
}
#menu01:checked ~ #menu01_content,		/* 選択中のコンテンツのみ表示 */
#menu02:checked ~ #menu02_content,
#menu03:checked ~ #menu03_content,
#menu04:checked ~ #menu04_content {
	display: block;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
	<!-- タブメニューの定義 -->
	<div class="tabs">
		<input id="menu01" type="radio" name="tab_item" checked>
		<label class="tab_item" for="menu01">タブ01</label>
		<input id="menu02" type="radio" name="tab_item">
		<label class="tab_item" for="menu02">タブ02</label>
		<input id="menu03" type="radio" name="tab_item">
		<label class="tab_item" for="menu03">タブ03</label>
		<input id="menu04" type="radio" name="tab_item">
		<label class="tab_item" for="menu04">タブ04</label>
		<div class="tab_content" id="menu01_content">
			<ul>
				<li><a>タブ01の項目01</a></li>
				<li><a>タブ01の項目02</a></li>
				<li><a>タブ01の項目03</a></li>
				<li><a>タブ01の項目04</a></li>
				<li><a>タブ01の項目05</a></li>
			</ul>
		</div>
		<div class="tab_content" id="menu02_content">
			<ul>
				<li><a>タブ02の項目01</a></li>
				<li><a>タブ02の項目02</a></li>
				<li><a>タブ02の項目03</a></li>
				<li><a>タブ02の項目04</a></li>
				<li><a>タブ02の項目05</a></li>
			</ul>
		</div>
		<div class="tab_content" id="menu03_content">
			<ul>
				<li><a>タブ03の項目01</a></li>
				<li><a>タブ03の項目02</a></li>
				<li><a>タブ03の項目03</a></li>
				<li><a>タブ03の項目04</a></li>
				<li><a>タブ03の項目05</a></li>
			</ul>
		</div>
		<div class="tab_content" id="menu04_content">
			<ul>
				<li><a>タブ04の項目01</a></li>
				<li><a>タブ04の項目02</a></li>
				<li><a>タブ04の項目03</a></li>
				<li><a>タブ04の項目04</a></li>
				<li><a>タブ04の項目05</a></li>
			</ul>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

P5.6 パンくずリスト

P5.6.1 パンくずリスト

(1) 説明

パンくずリストの装飾です。

(2) 表示形式

パンくずリストの装飾を確認してください。

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示

(a) ファイル配置

05-menu/61-breadcrumb-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 {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	padding: 10px;
}

/* ▼▼▼ CSS（ここから／使用するCSSを選択してコピーしてください）（※2） ▼▼▼ */
/* パンくずリストの設定 */
h2 {
	font-size: 1.4em;
	padding: 10px;
	color: #333;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1em;
	}
}
nav {
	padding: 10px;
	border: #ccc 1px solid;
}
/* パンくずリストサンプル-01 */
.breadcrumb-01 ol {
	padding-left: 0;
	list-style-type: none;
}
.breadcrumb-01 ol li {
	display: inline;
}
@media screen and (max-width: 760px) {
	.breadcrumb-01 ol li {
		font-size: 0.8rem;
	}
}
.breadcrumb-01 ol li::before {
	content: "→";
	padding: 0 0.2em;
	color: #555;
}
.breadcrumb-01 li:first-child::before {
	content: "";
}
.breadcrumb-01 ol li a {
	text-decoration: none;
	color: #2568bb;
}
@media screen and (max-width: 760px) {
	.breadcrumb-01 ol li a {
		font-size: 0.8rem;
	}
}
.breadcrumb-01 ol li a:hover {
	opacity: 0.6;
}
/* パンくずリストサンプル-02 */
.breadcrumb-02 ol {
	padding-left: 0;
	list-style-type: none;
}
.breadcrumb-02 ol li {
	padding-left: 0;
	display: inline;
}
@media screen and (max-width: 760px) {
	.breadcrumb-02 ol li {
		font-size: 0.8rem;
	}
}
.breadcrumb-02 ol li::before {
	content: ">";
	padding: 0 0.2em;
	color: #555;
}
.breadcrumb-02 li:first-child::before {
	content: "";
}
.breadcrumb-02 ol li a {
	text-decoration: none;
	color: #2568bb;
}
@media screen and (max-width: 760px) {
	.breadcrumb-02 ol li a {
		font-size: 0.8rem;
	}
}
.breadcrumb-02 ol li a:hover {
	opacity: 0.6;
}
/* パンくずリストサンプル-03 */
.breadcrumb-03 ol {
	padding-left: 0;
	list-style-type: none;
	overflow: hidden;
}
.breadcrumb-03 ol li {
	margin-right: 14px;
	float: left;
	position: relative;
}
@media screen and (max-width: 760px) {
	.breadcrumb-03 ol li {
		font-size: 0.8rem;
	}
}
.breadcrumb-03 ol li::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 100%;
	border: transparent 14px solid;
	border-left-color: #e7dc8e;
	width: 0;
	height: 0;
}
.breadcrumb-03 ol li a {
	display: inline-block;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	color: #2568bb;
	text-decoration: none;
	background: #e7dc8e;
}
@media screen and (max-width: 760px) {
	.breadcrumb-03 ol li a {
		font-size: 0.8rem;
	}
}
.breadcrumb-03 ol li span {
	display: inline-block;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	background: #e7dc8e;
}
.breadcrumb-03 ol li a:hover {
	opacity: 0.6;
}
/* パンくずリストサンプル-04 */
.breadcrumb-04 ol {
	padding-left: 0;
	list-style-type: none;
	overflow: hidden;
}
.breadcrumb-04 ol li {
	margin-right: 14px;
	float: left;
	position: relative;
}
@media screen and (max-width: 760px) {
	.breadcrumb-04 ol li {
		font-size: 0.8rem;
	}
}
.breadcrumb-04 ol li::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 100%;
	border: transparent 14px solid;
	border-left-color: #ff6b33;
	width: 0;
	height: 0;
}
.breadcrumb-04 ol li a {
	display: inline-block;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	color: #fff;
	text-decoration: none;
	background: #ff6b33;
}
@media screen and (max-width: 760px) {
	.breadcrumb-04 ol li a {
		font-size: 0.8rem;
	}
}
.breadcrumb-04 ol li span {
	display: inline-block;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	color: #fff;
	background: #ff6b33;
}
.breadcrumb-04 ol li a:hover {
	opacity: 0.6;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML（ここから／使用するHTMLを選択してコピーしてください）（※3） ▼▼▼ -->
	<!-- パンくずリストの定義 -->
	<!-- パンくずリストサンプル-01 -->
	<div class="wrapper">
		<h2>パンくずリストサンプル-01</h2>
		<nav aria-label="Breadcrumb" class="breadcrumb-01">
			<ol>
				<li><a>ホーム</a></li>
				<li><a>レベル-1</a></li>
				<li><a>レベル-2</a></li>
				<li><span aria-current="page">サンプル-01</span></li>
			</ol>
		</nav>
		<!-- パンくずリストサンプル-02 -->
		<h2>パンくずリストサンプル-02</h2>
		<nav aria-label="Breadcrumb" class="breadcrumb-02">
			<ol>
				<li><a>ホーム</a></li>
				<li><a>レベル-1</a></li>
				<li><a>レベル-2</a></li>
				<li><span aria-current="page">サンプル-02</span></li>
			</ol>
		</nav>
		<!-- パンくずリストサンプル-03 -->
		<h2>パンくずリストサンプル-03</h2>
		<nav aria-label="Breadcrumb" class="breadcrumb-03">
			<ol>
				<li><a>ホーム</a></li>
				<li><a>レベル-1</a></li>
				<li><a>レベル-2</a></li>
				<li><span aria-current="page">サンプル-03</span></li>
			</ol>
		</nav>
		<!-- パンくずリストサンプル-04 -->
		<h2>パンくずリストサンプル-04</h2>
		<nav aria-label="Breadcrumb" class="breadcrumb-04">
			<ol>
				<li><a>ホーム</a></li>
				<li><a>レベル-1</a></li>
				<li><a>レベル-2</a></li>
				<li><span aria-current="page">サンプル-04</span></li>
			</ol>
		</nav>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>

</body>
</html>

PAGE
TOP

WebParts-5 メニュー

目次

P5.1 はじめに

P5.1.1 概要

P5.2 ハンバーガー

P5.2.1 ハンバーガー（単独）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.2.2 ハンバーガー（複合）

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.3 ドリルダウン

P5.3.1 ドリルダウン

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.4 ドロップダウン

P4.4.1 ドロップダウン

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.4.2 ドリルダウン併用

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.5 タブ

P5.5.1 タブ

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

P5.6 パンくずリスト

P5.6.1 パンくずリスト

(1) 説明

(2) 表示形式

(3) 使用機能

(4) 実装手順

(5) サンプルコード

(a) ファイル配置

(b) ソースコード

WebParts-5
メニュー