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

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

(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,		/* ボタンの3本線 */
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;				/* 3本線の色 */
    position: absolute;
}
div.hamburger-menu .menu-btn span:before {
    bottom: 10px;						/* 上の線は上方向に10px移動 */
}
div.hamburger-menu .menu-btn span:after {
    top: 10px;							/* 下の線は下方向に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: none 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>メニュー 01<br><span>MENU-01</span></a></li>
				<li><a>メニュー 02<br><span>MENU-02</span></a></li>
				<li><a>メニュー 03<br><span>MENU-03</span></a></li>
				<li><a>メニュー 04<br><span>MENU-04</span></a></li>
				<li><a>メニュー 05<br><span>MENU-05</span></a></li>
			</ul>
		</div>
	</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
	<div class="space">					<!-- ダミー領域 -->
		<p>コンテンツ本文</p>
	</div>
</div>

</body>
</html>

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

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

JavaScript

使用しません。

jQuery

使用しません。

個別ライブラリィ

使用しません。

(4) 実装手順

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

(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-right: 1px #ccc solid;		/* メニュー間の区切り線 */
}
nav.menu-wrapper .menu-content ul li:first-child {
	border-left: 1px #ccc solid;		/* メニュー間の区切り線 */
}
nav.menu-wrapper .menu-content ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #333;						/* メニューの文字色 */
	font-size: 1rem;					/* メニュー（1段目）を文字サイズ */
	font-weight: bold;					/* メニュー（1段目）を太字 */
}
nav.menu-wrapper .menu-content ul li a span {
	font-size: 90%;						/* メニュー（2段目）の文字サイズ */
	font-weight: normal;				/* メニュー（2段目）を通常文字 */
}
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,		/* ボタンの3本線 */
	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;				/* 3本線の色 */
	    position: absolute;
	}
	nav.menu-wrapper .menu-btn span:before {
	    bottom: 10px;						/* 上の線は上方向に10px移動 */
	}
	nav.menu-wrapper .menu-btn span:after {
	    top: 10px;							/* 下の線は下方向に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-right: none;
	    border-top: solid 1px #fff;			/* メニュー項目間の線色 */
	}
	nav.menu-wrapper .menu-content ul li:first-child {
		border-left: none;
	}
	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>

</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
メニュー