HTML-CSS入門講座

濱屋太郎

WebParts-5
テキスト装飾パーツ

目次

P5.1 はじめに

P5.1.1 概要

  • 「テキスト装飾パーツ」は、テキストナビゲーション、見出し、ボタン、リストなどのテキスト装飾パーツを説明します。
  • 「テキスト装飾パーツ」で説明している機能は、以下の通りです。
(1) テキストナビゲーション
テキストにオンマウス時の装飾を行います。
(2) 見出し
見出しに装飾を行います。
(3) タイプライター
テキスト表示をタイプライタ風に装飾します。
(4) ボタン
ボタンに装飾を行います。
(5) リスト
リスト表示に装飾を行います。
(6) パンくずリスト
パンくずリストに装飾を行います。
(7) フローチャート
フローチャートに装飾を行います。
(8) ニュースティッカー
テキストのニュースティッカー表示を行います。
(9) アコーディオンパネル
テキストのアコーディオン表示を行います。
(10) ツールチップ
テキストや画像に対してツールチップ表示を行います。
(11) ソースコードハイライト
ソースコードのハイライト表示を行います。

P5.2 テキストナビゲーション

P5.2.1 テキストナビゲーション(下線)

(1) 説明

  • オンマウス時に下線を表示します。CSSのアニメーション機能で実現しています。

(2) 表示形式

  • オンマウスして下線が表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-navigation-01
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 下線が伸びる設定 */

/* 基本の設定 */
.text-deco {
	padding: 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	list-style-type: none;
	float: left;
}
.text-deco li a {
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #333;
}

/* 下線が伸びる設定 */
.text-deco li a {
	position: relative;
}
.text-deco li.current a,
.text-deco li a:hover {
	color: steelblue;
}
.text-deco li a::after {				/* 線の定義 */
	content: '';
	position: absolute;
	bottom: 0;							/* 線の縦位置 */
	left: 10%;							/* 線の横位置 */
	width: 80%;							/* 線の長さ */
	height: 4px;						/* 線の太さ */
	background: steelblue;
	transition: all 0.5s;
	transform: scale(0, 1);				/* X方向0、Y方向1 */
}
.text-deco.center li a::after {			/* 中央から外に伸びる設定 */
	transform-origin: center top;		/* 上部中央基点 */
}
.text-deco.left li a::after {			/* 左から右に伸びる設定 */
	transform-origin: left top;			/* 上部左基点 */
}
.text-deco li.current a::after,
.text-deco li a:hover::after {
	transform: scale(1, 1);				/* 線を伸ばす */
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- 中央から外に下線が伸びる定義 -->
		<p>※中央から外に下線が伸びる</p>
		<ul class="text-deco center">
			<li><a href="#">サンプルテキスト-1</a></li>
			<li><a href="#">サンプルテキスト-2</a></li>
			<li><a href="#">サンプルテキスト-3</a></li>
		</ul>
		<!-- 左から右に下線が伸びる定義 -->
		<p>※左から右に下線が伸びる</p>
		<ul class="text-deco left">
			<li><a href="#">サンプルテキスト-1</a></li>
			<li><a href="#">サンプルテキスト-2</a></li>
			<li><a href="#">サンプルテキスト-3</a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.2.2 テキストナビゲーション(伸びる背景)

(1) 説明

  • オンマウス時に伸びる背景を表示します。CSSのアニメーション機能で実現しています。

(2) 表示形式

  • オンマウスして伸びる背景が表示されることを確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-navigation-02
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 背景が伸びる設定 */

/* 基本の設定 */
.text-deco {
	padding: 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	list-style-type: none;
	float: left;
}
.text-deco li a {
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #333;
}

/* 背景が伸びる設定 */
.text-deco li a {
	position: relative;
}
.text-deco li.current a,
.text-deco li a:hover {
	color: steelblue;
}
.text-deco li a::after {				/* 背景の定義 */
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 0;							/* 背景の縦位置 */
	left: 0;							/* 背景の横位置 */
	width: 0;							/* 背景の長さ */
	height: 100%;						/* 背景の高さ */
	background: steelblue;
	transition: all 0.5s;
	opacity: 0;							/* 透過 */
}
.text-deco li.current a,
.text-deco li a:hover {
	color: #fff;						/* 文字色 */
}
.text-deco li.current a::after,
.text-deco li a:hover::after {
	width: 100%;						/* 背景の長さ */
	opacity: 1;							/* 非透過 */
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- 背景伸びる定義 -->
		<p>※左から右に背景が伸びる</p>
		<ul class="text-deco">
			<li><a href="#">サンプルテキスト-1</a></li>
			<li><a href="#">サンプルテキスト-2</a></li>
			<li><a href="#">サンプルテキスト-3</a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.2.3 テキストナビゲーション(上下の線が伸びて背景)

(1) 説明

  • オンマウス時に上下の線が伸びて背景が塗りつぶされます。CSSのアニメーション機能で実現しています。

(2) 表示形式

  • オンマウスして上下の線が伸びて背景が塗りつぶされることを確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-navigation-03
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 上下の線が伸びて背景になる設定 */

/* 基本の設定 */
.text-deco {
	padding: 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	list-style-type: none;
	float: left;
}
.text-deco li a {
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #333;
}

/* 上下の線が伸びて背景になる */
.text-deco li a {
	position: relative;
	overflow: hidden;
	transition: all .2s;
}
.text-deco li.current a,
.text-deco li a:hover {
	background: steelblue;
	color: #fff;
}
.text-deco li a:hover {
	transition-delay: .5s;
}
.text-deco li a::before,				/* 線の定義 */
.text-deco li a::after {
	content: '';
	position: absolute;
	left: 0;							/* 線の横位置 */
	width: 100%;						/* 線の長さ */
	height: 2px;						/* 線の太さ */
	background: steelblue;
	transition: all 0.5s;
}
.text-deco li a::before {				/* 上の定義 */
	top: 0;
	transform: translateX(-100%);
}
.text-deco li a::after {				/* 下線の定義 */
	bottom: 0;
	transform: translateX(100%);
}
.text-deco li.current a,
.text-deco li a:hover {
	color: #fff;						/* 文字色 */
}
.text-deco li a:hover::before ,
.text-deco li a:hover::after {
	transform: translateX(0);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- 上下の線が伸びて背景になる定義 -->
		<p>※上下の線が伸びて背景になる</p>
		<ul class="text-deco">
			<li><a href="#">サンプルテキスト-1</a></li>
			<li><a href="#">サンプルテキスト-2</a></li>
			<li><a href="#">サンプルテキスト-3</a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.2.4 テキストナビゲーション(線が伸びて四方を囲む)

(1) 説明

  • オンマウス時に線が伸びて四方を囲みます。CSSのアニメーション機能で実現しています。

(2) 表示形式

  • オンマウスして線が伸びて四方を囲むことを確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-navigation-04
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 線が伸びて枠になる設定 */

/* 基本の設定 */
.text-deco {
	padding: 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3 - 10px);
	margin: 0 5px;
	list-style-type: none;
	float: left;
}
.text-deco li a {
	display: block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #333;
}

/* 線が伸びて枠になる */
/* 上線:li::before(遅延:0.0s 描画:0.2s) */
/* 右線:li span::before(遅延:0.2s 描画:0.1s) */
/* 下線:li::after(遅延:0.3s 描画:0.2s) */
/* 左線:li span::after(遅延:0.5s 描画:0.1s) */
.text-deco li {
	position: relative;
}
.text-deco li::before,					/* 線の定義 */
.text-deco li::after {
	content: '';
	position: absolute;
	background: steelblue;
	width: 0;							/* 横線の長さ */
	height: 2px;						/* 横線の太さ */
	transition: all 0.2s linear;
}
.text-deco li::before {
	right: 0;
	bottom: 0;
}
.text-deco li::after {
	left: 0;
	top: 0;
}
.gnavi li span {
	display: block;
}
.text-deco li span::before,				/* 線の定義 */
.text-deco li span::after {
	content: "";
	position: absolute;
	background: steelblue;
	width: 2px;							/* 縦線の長さ */
	height: 0;							/* 縦線の太さ */
	transition: all 0.1s linear;
}
.text-deco li span::before{
	left: 0;
	bottom: 0;
}
.text-deco li span::after {
	right: 0;
	top: 0;
}
.text-deco li.current::before,
.text-deco li.current::after,
.text-deco li:hover::before,
.text-deco li:hover::after {
	width: 100%;
}
.text-deco li:hover::after {
	transition-delay: 0s;
}
.text-deco li:hover::before{
  transition-delay: 0.3s;
}
.text-deco li.current span::before,
.text-deco li.current span::after,
.text-deco li:hover span::before,
.text-deco li:hover span::after{
	height: 100%;
}
.text-deco li:hover span::before{
	transition-delay: 0.5s;
}
.text-deco li:hover span::after{
	transition-delay: 0.2s;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- 線が伸びて枠になる定義 -->
		<p>※線が伸びて枠になる</p>
		<ul class="text-deco">
			<li><a href="#"><span>サンプルテキスト-1</span></a></li>
			<li><a href="#"><span>サンプルテキスト-2</span></a></li>
			<li><a href="#"><span>サンプルテキスト-3</span></a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.3 見出し

P5.3.1 見出し

(1) 説明

  • 見出しの装飾です。

(2) 表示形式

  • 色々な見出しの装飾サンプルを確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-heading-01
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください) ▼▼▼ */
/* 見出しの設定 */
h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6em;
	background: steelblue;
	color: #fff;
	text-align: center;
}
h2 {
	font-size: 1.6em;
	padding: 10px 10px 10px 20px;
	margin-bottom: 20px;
	color: #333;
}
/* 見出しサンプル-01(赤の蛍光ペン) */
.heading-01 {
	padding-left: 0;
}
.heading-01 span {
	display: inline;
	padding: 0 10px;
	margin-bottom: 10px;
	background-image: linear-gradient(rgba(0,0,0,0) 60%, #ff66ff 90%);
}
/* 見出しサンプル-02(緑の蛍光ペン) */
.heading-02 {
	padding-left: 0;
}
.heading-02 span {
	display: inline;
	padding: 0 10px;
	margin-bottom: 10px;
	background-image: linear-gradient(rgba(0,0,0,0) 60%, #66FFCC 90%);
}
/* 見出しサンプル-03(青の蛍光ペン) */
.heading-03 {
	padding-left: 0;
}
.heading-03 span {
	display: inline;
	padding: 0 10px;
	margin-bottom: 10px;
	background-image: linear-gradient(rgba(0,0,0,0) 60%, #66ccff 90%);
}
/* 見出しサンプル-04(付箋紙) */
.heading-04 {
	position: relative;
	display: inline-block;
	background-color: #feeaac;
	padding: 10px 20px;
	border-radius: 2px;
}
.heading-04:before {
	content: '';
	width: 46%;
	height: 60%;
	display: block;
	position: absolute;
	left: 52%;
	top: 29%;
	background-color: #b3b3b3;
	z-index: -1;
	box-shadow: 0 0 8px 8px #b3b3b3;
	transform: rotate(3deg);
}
/* 見出しサンプル-05(タグ) */
.heading-05 {
	padding-left: 0;
}
.heading-05 span {
	position: relative;
	display: inline-block;
	padding: 1rem 2rem 1rem 4rem;
	color: #fff;
	border-radius: 100vh 0 0 100vh;
	background: #445bab;
}
.heading-05 span::before {
	position: absolute;
	top: calc(50% - 7px);
	left: 20px;
	width: 14px;
	height: 14px;
	content: '';
	border-radius: 50%;
	background: #fff;
}
/* 見出しサンプル-06(リボン) */
.heading-06 {
	padding-left: 40px;
}
.heading-06 span {
	display: inline-block;
	line-height: 60px;
	color: #fff;
	background: pink;
	position: relative;
}
.heading-06 span::before,
.heading-06 span::after {
	content: '';
	position: absolute;
	top: 0;
	display: block;
	border: pink 30px solid;
}
.heading-06 span::before {
	left: -45px;
	border-left: transparent 15px solid;
}
.heading-06 span::after {
	right: -45px;
	border-right: transparent 15px solid;
}
/* 見出しサンプル-07(背景に半透明の文字) */
.heading-07 {
	position: relative;
	padding: 45px 0 0 0;
	font-size: 26px;
}
.heading-07::before {
	content: attr(data-en);
	position: absolute;
	top: -20px;
	left: 220px;
	transform: translateX(-50%);
	color: rgba(255,141,0,0.3);
	font-size: 2.5em;
	font-style: italic;
}
/* 見出しサンプル-08(背景に丸) */
.heading-08 {
	display: inline-block;
	padding-top: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	position: relative;
}
.heading-08:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	z-index: -1;
	background: #9be579;
}
/* 見出しサンプル-09(左右に線) */
.heading-09 {
	display: flex;
	align-items: center;
	padding-left: 0;
}
.heading-09::before,
.heading-09::after {
	content: '';
	width: 50px;
	height: 5px;
	background-color: #2341bf;
}
.heading-09::before {
	margin-right: 20px;
}
.heading-09::after {
	margin-left: 20px;
}
/* 見出しサンプル-10(下線を破線) */
.heading-10 {
	padding-bottom: 4px;
	padding-left: 20px;
	background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
	background-size: 6px 6px;
	background-repeat: repeat-x;
	background-position: center bottom;
}
/* 見出しサンプル-11(下線を斜め線) */
.heading-11 {
	position: relative;
	padding-bottom: 4px;
	padding-left: 20px;
}

.heading-11::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(-45deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 6px 6px;
}
/* 見出しサンプル-12(下線を二重線) */
.heading-12 {
	border-bottom: #333 1px solid;
	padding-bottom:  0px;
	padding-left: 20px;
	position: relative;
}
.heading-12:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 3px;
	background: #333;
}
/* 見出しサンプル-13(手書き線) */
.heading-13 {
	padding-left: 20px;
	border-bottom: solid 8px rgb(209 57 57 / 60%);
	border-radius: 0px 0px 160px 180px / 0px 0px 40px 8px;
}
/* 見出しサンプル-14(番号付き) */
.heading-14 {
	position: relative;
	overflow: hidden;
	padding: 1rem 0 1rem 130px;
	border: 2px solid steelblue;
}
.heading-14:before {
	content: '';
	position: absolute;
	top: -150%;
	left: -90px;
	width: 200px;
	height: 300%;
	transform: rotate(25deg);
	background: steelblue;
}
.heading-14 span {
	display: block;
	position: absolute;
	top: -4px;
	left: 0px;
	padding-top: 3px;
	padding-left: 16px;
	font-size: 3rem;
	z-index: 1;
	color: #fff;
}
/* 見出しサンプル-15(エンボス) */
.heading-15 {
	background: #ece5da;
}
.heading-15 span {
	display: block;
	color: #8d6665;
	text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;
}
/* 見出しサンプル-16(背景に格子柄) */
.heading-16 {
	color: #fff;
	text-shadow: 1px 0px 2px #333, -1px 0px 2px #333, 0px 1px 2px #333, 0px -1px 2px #333;
	background-color: black;
	background-image: linear-gradient(45deg, #25a58f 25%, transparent 25%, transparent 75%, #25a58f 75%, #25a58f), 
					  linear-gradient(45deg, #25a58f 25%, transparent 25%, transparent 75%, #25a58f 75%, #25a58f);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください) ▼▼▼ -->
	<!-- 見出しの定義 -->
	<div class="wrapper">
		<h2 class="heading-01"><span>見出しサンプル-01(赤の蛍光ペン)</span></h2>
		<h2 class="heading-02"><span>見出しサンプル-02(緑の蛍光ペン)</span></h2>
		<h2 class="heading-03"><span>見出しサンプル-03(青の蛍光ペン)</span></h2>
		<h2 class="heading-04">見出しサンプル-04(付箋紙)</h2>
		<h2 class="heading-05"><span>見出しサンプル-05(タグ)</span></h2>
		<h2 class="heading-06"><span>見出しサンプル-06(リボン)</span></h2>
		<h2 class="heading-07" data-en="Heading">見出しサンプル-07(背景に半透明の文字)</h2>
		<h2 class="heading-08">見出しサンプル-08(背景に丸)</h2>
		<h2 class="heading-09">見出しサンプル-09(左右に線)</h2>
		<h2 class="heading-10">見出しサンプル-10(下線を破線)</h2>
		<h2 class="heading-11">見出しサンプル-11(下線を斜め線)</h2>
		<h2 class="heading-12">見出しサンプル-12(下線を二重線)</h2>
		<h2 class="heading-13">見出しサンプル-13(手書き線)</h2>
		<h2 class="heading-14"><span>14</span>見出しサンプル-14(番号付き)</h2>
		<h2 class="heading-15"><span>見出しサンプル-15(エンボス)</span></h2>
		<h2 class="heading-16">見出しサンプル-16(背景に格子柄)</h2>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.4 タイプライター

P5.4.1 タイプライター(iTyped.js その1)

(1) 説明

  • iTyped.jsプラグインを使用したタイプライタ風表示です。
  • iTyped.jsは、jQueryを使用しない軽いプラグインです。

(2) 表示形式

  • タイプライタ風表示を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-typing-01
    • index.html

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイピング(ityped)のサンプル</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;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* タイピング(ityped)の設定 */
.ityped-01 {
	font-size: 2rem;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- タイピング(ityped)の定義 -->
	<p class="ityped-01"><span id="ityped-01"></span></p>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- タイピング(ityped)の制御 -->
<script src="https://unpkg.com/ityped@1.0.3"></script>
<script>
ityped.init('#ityped-01', {
	strings: [
	'タイプライター風に文字列を表示します。', 
	'itypedを使用すると簡単に設置できます。', 
	'動きのあるWebページが作れます。'],
	typeSpeed: 100,
	backSpeed: 100,
	startDelay: 300,
	backDelay: 1000,
	loop: true,
	showCursor: true,
	cursorChar: "|",
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.4.2 タイプライター(iTyped.js その2)

(1) 説明

  • iTyped.jsプラグインを使用したタイプライタ風表示です。
  • iTyped.jsは、jQueryを使用しない軽いプラグインです。

(2) 表示形式

  • タイプライタ風表示を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-typing-02
    • index.html

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイピング(ityped)のサンプル</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;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* タイピング(ityped)の設定 */
.ityped-01 {
	max-width: 960px;
	padding: 20px;
	margin: 20px auto;
	font-size: 2rem;
	text-align: center;
	background-color: #000;
	color: #fff;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- タイピング(ityped)の定義 -->
	<p class="ityped-01"><span id="ityped-01"></span></p>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- タイピング(ityped)の制御 -->
<script src="https://unpkg.com/ityped@1.0.3"></script>
<script>
ityped.init('#ityped-01', {
	strings: [
	'タイプライター風に文字列を表示します。', 
	'itypedを使用すると簡単に設置できます。', 
	'動きのあるWebページが作れます。'],
	typeSpeed: 100,
	backSpeed: 100,
	startDelay: 300,
	backDelay:  1000,
	loop: true,
	showCursor: true,
	cursorChar: "|",
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.4.3 タイプライター(t.js)

(1) 説明

  • t.jsプラグインを使用したタイプライタ風表示です。
  • t.jsは、複数行表示が可能なタイプライタ風表示です。

(2) 表示形式

  • タイプライタ風表示を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-typing-03
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイピング(t)のサンプル</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;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* タイピング(t)の設定 */
.wrapper {
	max-width: 960px;
	margin: 20px auto;
}
#t-01 {
	font-size: 2rem;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- タイピング(t)の定義 -->
	<div class="wrapper">
		<p id="t-01">
			タイプライター風に文字列を表示します。<br>
			jQueryとtを使用すると簡単に設置できます。<br>
			動きのあるWebページが作れます。
		</p>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- タイピング(t)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>
<script>
$(function(){
	$("#t-01").t()
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.5 ボタン

P5.5.1 ボタン(波打つ)

(1) 説明

  • 波打つをイメージしたボタン装飾です。

(2) 表示形式

  • オンマウスして装飾を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-button-01
    • index.html
    • js
      • jquery-3.6.0.min.js

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;
	border: #fff 1px solid;
}
.warpper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ボタン(波打つ)の設定 */
.button-wrapper {
	padding: 40px 0;
	overflow: hidden;
}
.button-su {
	display: inline-block;
	width: calc(100% / 4 - 40px);
	margin: 0 20px;
	background: #ad2828;
	border-radius: 30px;
	position: relative;
	overflow: hidden;
	float: left;
}
.su-button-circle {
	border-radius: 1000px;
	position: absolute;
	pointer-events: none;
}
.button-su-inner {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	width: 100%;
	text-align: center;
	transition: 400ms;
	text-decoration: none;
	padding: 10px;
}
.button-text-container {
	position:relative;
	z-index: 10000;
}
.explode-circle {
	animation: explode 0.5s forwards;
}
.desplode-circle {
	animation: desplode 0.5s forwards;
}
@keyframes explode {
	0% {
		width: 0px;
		height: 0px;
		margin-left: 0px;
		margin-top: 0px;
		background: rgba(42, 53, 80, 0.2);
	}
	100% {
		width: 400px;
		height: 400px;
		margin-left: -200px;
		margin-top: -200px;
		background: rgba(20, 180, 87, 0.8);
	}
}
@keyframes desplode {
	0% {
		width: 400px;
		height: 400px;
		margin-left: -200px;
		margin-top: -200px;
		background: rgba(20, 180, 87, 0.8);
	}
	100% {
		width: 0px;
		height: 0px;
		margin-left: 0px;
		margin-top: 0px;
		background: rgba(129, 80, 108, 0.6);
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="warpper">
		<p>※ボタン(波打つ)</p>
		<!-- ボタン(波打つ)の定義 -->
		<div class="button-wrapper">
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a href="#" class="button-su-inner"><span class="button-text-container">ボタン-1</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a href="#" class="button-su-inner"><span class="button-text-container">ボタン-2</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a href="#" class="button-su-inner"><span class="button-text-container">ボタン-3</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a href="#" class="button-su-inner"><span class="button-text-container">ボタン-4</span></a>
			</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ボタン(波打つ)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$('.button-su-inner').mouseenter(function(e) {
	var parentOffset = $(this).offset(); 
	var relX = e.pageX - parentOffset.left;
	var relY = e.pageY - parentOffset.top;
	$(this).prev('.su-button-circle').css({ 'left': relX, 'top': relY });
	$(this).prev('.su-button-circle').removeClass('desplode-circle');
	$(this).prev('.su-button-circle').addClass('explode-circle');
});
$('.button-su-inner').mouseleave(function(e) {
	 var parentOffset = $(this).offset(); 
	 var relX = e.pageX - parentOffset.left;
	 var relY = e.pageY - parentOffset.top;
	 $(this).prev('.su-button-circle').css({ 'left': relX, 'top': relY });
	 $(this).prev('.su-button-circle').removeClass('explode-circle');
	 $(this).prev('.su-button-circle').addClass('desplode-circle');
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.5.2 ボタン(背景が左右に別れる)

(1) 説明

  • 左右に分かれるボタン装飾です。

(2) 表示形式

  • オンマウスして装飾を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-button-02
    • index.html

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;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ボタン(背景が左右に分かれる)の設定 */
.button-wrapper {						/* ボタン枠の定義 */
	padding: 40px 0;
	overflow: hidden;
}
.button-item {							/* ボタンの定義 */
	display: block;
	width: calc(100% / 4 - 40px);		/* ボタンの個数 */
	float: left;
	padding: 10px 30px;
	margin: 0 20px;
	border-radius: 30px;
	background: #d5eaff;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	position: relative;
	transition: ease 0.5s;
}
.button-item span {						/* 文字部分を背景の前面に */
	position: relative;
	z-index: 3;
	color: #333;
}
.button-item:hover span {
	color: #fff;
}
.button-item::before {					/* 背景の定義 */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: steelblue;
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: top;
}
.button-item:hover::before {
	transform: scale(1, 1);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<p>※ボタン(背景が左右に分かれる)</p>
		<!-- ボタン(背景が左右に分かれる)の定義 -->
		<div class="button-wrapper">
			<div><a href="#" class="button-item"><span>ボタン-1</span></a></div>
			<div><a href="#" class="button-item"><span>ボタン-2</span></a></div>
			<div><a href="#" class="button-item"><span>ボタン-3</span></a></div>
			<div><a href="#" class="button-item"><span>ボタン-4</span></a></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.6 リスト

P5.6.1 リスト(フォルダ/ファイル構成表示)

(1) 説明

  • フォルダやファイルの構成を表示します。

(2) 表示形式

  • フォルダやファイルの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-list-01
    • index.html
    • images
      • icon-file.png
      • icon-folder.png

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;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* フォルダ・ファイル構成表示のの設定 */
.folder-list ul {
	list-style-type: none;
}
.folder-list ul ul {
	padding-left: 20px;
}
.folder-list li.folder {
	line-height: 1.2;
}
.folder-list li.folder:before {
	content: url('images/icon-folder.png');
	display: inline-block;
    padding-right: 0.5rem;
	vertical-align: middle;
}
.folder-list li.file {
	line-height: 1.2;
}
.folder-list li.file:before {
	content: url('images/icon-file.png');
	display: inline-block;
    padding-right: 0.5rem;
	vertical-align: middle;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- フォルダ・ファイル構成表示のの定義 -->
	<div class="folder-list">
		<ul>
			<li class="folder">sample-folder
				<ul>
					<li class="file">index.html</li>
					<li class="folder">css
						<ul>
							<li class="file">style.css</li>
						</ul>
					</li>
					<li class="folder">images
						<ul>
							<li class="file">sample1.png</li>
							<li class="file">sample2.jpg</li>
						</ul>
					</li>
					<li class="folder">js
						<ul>
							<li class="file">jquery.min.js</li>
							<li class="file">user.js</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>
■ 画像
  • ファイルアイコン (icon-file.png:ファイルアイコン)
  • フォルダアイコン (icon-folder.png:フォルダアイコン)

P5.7 パンくず

P5.7.1 パンくずリスト

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-breadcrumb-01
    • index.html

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 Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	padding: 10px;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください) ▼▼▼ */
/* パンくずリストの設定 */
h2 {
	font-size: 1.4em;
	padding: 10px;
	color: #333;
}
nav {
	padding: 10px;
	border: #ccc 1px solid;
}
/* パンくずリストサンプル-01 */
.breadcrumb-01 ol {
	padding-left: 0;
	list-style-type: none;
}
.breadcrumb-01 ol li {
	display: inline;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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を選択してコピーしてください) ▼▼▼ -->
	<!-- パンくずリストの定義 -->
	<!-- パンくずリストサンプル-01 -->
	<div class="wrapper">
		<h2>パンくずリストサンプル-01</h2>
		<nav aria-label="Breadcrumb" class="breadcrumb-01">
			<ol>
				<li><a href="#">ホーム</a></li>
				<li><a href="#">レベル-1</a></li>
				<li><a href="#">レベル-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 href="#">ホーム</a></li>
				<li><a href="#">レベル-1</a></li>
				<li><a href="#">レベル-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 href="#">ホーム</a></li>
				<li><a href="#">レベル-1</a></li>
				<li><a href="#">レベル-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 href="#">ホーム</a></li>
				<li><a href="#">レベル-1</a></li>
				<li><a href="#">レベル-2</a></li>
				<li><span aria-current="page">パンくずリストサンプル-04</span></li>
			</ol>
		</nav>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.8 フローチャート

P5.8.1 フローチャート(横方向)

(1) 説明

  • 横方向に流れるフォローチャートです。

(2) 表示形式

  • フローチャートの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-flowchart-01
    • index.html

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: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* フローチャートの設定 */
.flow {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
}
.flow > li {
	flex-basis: calc(100% / 4 - 25px);;
}
.flow > li .icon {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	line-height: 50px;
	width: 50px;
	color: #fff;
	background: steelblue;
	margin: 0 auto 15px auto;
	display: block;
	border-radius: 50%;
	text-align: center;
	position: relative;
	letter-spacing: 2px;
}
.flow > li .icon::before {
	content: "";
	border: solid transparent;
	border-width: 8px;
	border-top-color: steelblue;
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.flow > li dl {
	padding: 15px;
	margin: 0;
	border: 3px solid steelblue;
	border-radius: 10px;
	position: relative;
}
.flow > li:not(:last-child) dl::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-right: 10px;
	display: inline-block;
	border-top: 4px solid steelblue;
	border-right: 4px solid steelblue;
	position: absolute;
	top: calc(50% - 14px);
	left: 104%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.flow > li dl dt {
	font-size: 20px;
	font-weight: 600;
	color: steelblue;
	-ms-flex-preferred-size: 20%;
	flex-basis: 20%;
	margin-bottom: 1vh;
	text-align: center;
}
.flow > li dl dd {
	margin-left: 0;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<div class="wrapper">
		<ul class="flow">
			<li>
				<span class="icon">01</span>
				<dl>
					<dt>ステップ-01</dt>
					<dd>フローチャートのステップ-01の説明です。</dd>
				</dl>
			</li>
			<li>
				<span class="icon">02</span>
				<dl>
					<dt>ステップ-02</dt>
					<dd>フローチャートのステップ-02の説明です。</dd>
				</dl>
			</li>
			<li>
				<span class="icon">03</span>
				<dl>
					<dt>ステップ-03</dt>
					<dd>フローチャートのステップ-03の説明です。</dd>
				</dl>
			</li>
			<li>
				<span class="icon">04</span>
				<dl>
					<dt>ステップ-04</dt>
					<dd>フローチャートのステップ-04の説明です。</dd>
				</dl>
			</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.8.2 フローチャート(縦方向 その1)

(1) 説明

  • 縦方向に流れるフローチャートです。

(2) 表示形式

  • フローチャートの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-flowchart-02
    • index.html

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: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* フローチャートの設定 */
.flow {
	border: 3px solid steelblue;
}
.flow > li {
	padding: 30px 20px 20px 40px;
	list-style-type: none;
}
.flow > li:not(:last-child) {
	border-bottom: 3px solid steelblue;
	position: relative;
}
.flow > li:not(:last-child)::before,
.flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 116px;
	border: transparent solid;
	transform: translateX(-50%);
}
.flow > li:not(:last-child)::before {
	border-width: 22px;
	border-top-color: steelblue;
}
.flow > li:not(:last-child)::after {
	border-width: 18px;
	border-top-color: #fff;
}
.flow > li dl {
	margin: 0;
	overflow: hidden;
}
.flow > li dl dt {
	float: left;
	width: 150px;
	font-size: 1.2rem;
	font-weight: bold;
	color: steelblue;
	text-align: center;
}
.flow > li dl dt .icon {
	display: block;
	padding: 5px 0;
	margin-bottom: 10px;
	font-size: 1.2rem;
	color: #fff;
	background: steelblue;
	border-radius: 1.2rem;
}
.flow > li dl dd {
	width: calc(100% - 150px);
	margin-left: 220px;
}
.flow > li dl dd ul li {
	list-style-type: disc;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<div class="wrapper">
		<ul class="flow">
			<li>
				<dl>
					<dt><span class="icon">01</span>ステップ-01</dt>
					<dd>
						<ul>
							<li>フローチャートのステップ-01の説明です。</li>
							<li>説明内容</li>
							<li>説明内容</li>
						</ul>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt><span class="icon">02</span>ステップ-02</dt>
					<dd>
						<ul>
							<li>フローチャートのステップ-02の説明です。</li>
							<li>説明内容</li>
							<li>説明内容</li>
						</ul>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt><span class="icon">03</span>ステップ-03</dt>
					<dd>
						<ul>
							<li>フローチャートのステップ-03の説明です。</li>
							<li>説明内容</li>
							<li>説明内容</li>
						</ul>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt><span class="icon">04</span>ステップ-04</dt>
					<dd>
						<ul>
							<li>フローチャートのステップ-04の説明です。</li>
							<li>説明内容</li>
							<li>説明内容</li>
						</ul>
					</dd>
				</dl>
			</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.8.3 フローチャート(縦方向 その2)

(1) 説明

  • 縦方向に流れるフローチャートです。

(2) 表示形式

  • フローチャートの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-flowchart-03
    • index.html

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: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* フローチャートの設定 */
.flow {
	border-left: 2px dashed;
	list-style-type: none;
}
.flow > li {
	margin-left: 2em;
	position: relative;
}
.flow > li h2 {
	font-size: 1.4rem;
}
.flow > li:before {
	position: absolute;
	top: 0.7em;
	left: calc(-2em - 6px);
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #000;
}
.flow > li:after{
	position: absolute;
	top: 1em;
	left: -2em; 
	content: "";
	width: 1.5em;
	border-bottom: 1px solid;
	background: #000;
}
.flow > li ul {
	padding-left: 25px;
	list-style-type: disc;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<div class="wrapper">
		<ol class="flow">
			<li>
				<h2>ステップ-01</h2>
				<ul>
					<li>フローチャートのステップ-01の説明です。</li>
					<li>説明内容</li>
					<li>説明内容</li>
				</ul>
			</li>
			<li>
				<h2>ステップ-02</h2>
				<ul>
					<li>フローチャートのステップ-02の説明です。</li>
					<li>説明内容</li>
					<li>説明内容</li>
				</ul>
			</li>
			<li>
				<h2>ステップ-03</h2>
				<ul>
					<li>フローチャートのステップ-03の説明です。</li>
					<li>説明内容</li>
					<li>説明内容</li>
				</ul>
			</li>
			<li>
				<h2>ステップ-04</h2>
				<ul>
					<li>フローチャートのステップ-04の説明です。</li>
					<li>説明内容</li>
					<li>説明内容</li>
				</ul>
			</li>
		</ol>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.8.4 フローチャート(縦方向 その3)

(1) 説明

  • 縦方向に流れるフローチャートです。

(2) 表示形式

  • フローチャートの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-flowchart-04
    • index.html

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: 400px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* フローチャートの設定 */
.flow {
    list-style-type: none;
}
.flow::before {
    content: attr(data-title)"";
    display: block;
    padding: 10px 0;
    margin-bottom: 30px;
    background: steelblue;
	color: #fff;
    text-align: center;
    font-weight: bold;
}
.flow li {
    position: relative;
    padding: 10px;
    border: #333 2px solid;
    text-align: center;
}
.flow li.connect {
	border-radius: 2rem;
}
.flow li:not(:last-child) {
    margin-bottom: 30px;
}
.flow li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -32px;
	width: 2px;
	height: 32px;
	background: #333;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<div class="wrapper">
		<ol class="flow"  data-title="フローチャートのサンプル">
			<li class="connect">開始</li>
			<li>フローチャートのステップ-01の説明です。</li>
			<li>フローチャートのステップ-02の説明です。</li>
			<li>フローチャートのステップ-03の説明です。</li>
			<li>フローチャートのステップ-04の説明です。<br>複数行の記述があるとこんな形になります。<br>さらに三行目の記述です。</li>
			<li class="connect">終了</li>
		</ol>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.9 ニュースティッカー

P5.9.1 ニュースティッカー(jquery.simpleTicker.js)

(1) 説明

  • jquery.simpleTicker.jsプラグインを使用したニュースティッカーです。

(2) 表示形式

  • ニュースティッカーの表示を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-newsticker-01
    • index.html
    • css
      • jquery.simpleTicker.css
    • js
      • jquery.simpleTicker.js
      • jquery-3.6.0.min.js

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(ここから/使用する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;
}
/* ニュースティッカーのサンプル-01(下から) */
#ticker-01 {
	width: calc(100% - 22px);
	box-sizing: content-box;
	padding: 10px 20px;
	border: #ccc 1px solid;
	position: relative;
	overflow: hidden;
}
#ticker-01 ul {
	width: 100%;
	position: relative;
	list-style-type: none;
}
#ticker-01 ul li {
	width: 100%;
	display: none;
}
/* ニュースティッカーのサンプル-02(右から) */
#ticker-02 {
	width: calc(100% - 22px);
	box-sizing: content-box;
	padding: 10px 20px;
	border: #ccc 1px solid;
	position: relative;
	overflow: hidden;
}
#ticker-02 ul {
	width: 100%;
	position: relative;
	list-style-type: none;
}
#ticker-02 ul li {
	width: 100%;
	display: none;
}
/* ニュースティッカーのサンプル-03(フェードイン) */
#ticker-03 {
	width: calc(100% - 22px);
	box-sizing: content-box;
	padding: 10px 20px;
	border: #ccc 1px solid;
	position: relative;
	overflow: hidden;
}
#ticker-03 ul {
	width: 100%;
	position: relative;
	list-style-type: none;
}
#ticker-03 ul li {
	width: 100%;
	display: none;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください) ▼▼▼ -->
	<!-- ニュースティッカーの定義 -->
	<div class="wrapper">
		<!-- ニュースティッカーのサンプル-01(下から) -->
		<h2>ニュースティッカーのサンプル-01(下から)</h2>
		<div id="ticker-01">
		  <ul>
		    <li>ニュース-01 1行目<br>ニュース-01 2行目<br>ニュース-01 3行目<br>ニュース-01 4行目</li>
		    <li>ニュース-02 1行目<br>ニュース-02 2行目<br>ニュース-02 3行目<br>ニュース-02 4行目</li>
		    <li>ニュース-03 1行目<br>ニュース-03 2行目<br>ニュース-03 3行目<br>ニュース-03 4行目</li>
		  </ul>
		</div>
		<!-- ニュースティッカーのサンプル-01(右から) -->
		<h2>ニュースティッカーのサンプル-02(右から)</h2>
		<div id="ticker-02">
		  <ul>
		    <li>ニュース-01 1行目<br>ニュース-01 2行目<br>ニュース-01 3行目<br>ニュース-01 4行目</li>
		    <li>ニュース-02 1行目<br>ニュース-02 2行目<br>ニュース-02 3行目<br>ニュース-02 4行目</li>
		    <li>ニュース-03 1行目<br>ニュース-03 2行目<br>ニュース-03 3行目<br>ニュース-03 4行目</li>
		  </ul>
		</div>
		<!-- ニュースティッカーのサンプル-03(フェードイン) -->
		<h2>ニュースティッカーのサンプル-03(フェードイン)</h2>
		<div id="ticker-03">
		  <ul>
		    <li>ニュース-01 1行目<br>ニュース-01 2行目<br>ニュース-01 3行目<br>ニュース-01 4行目</li>
		    <li>ニュース-02 1行目<br>ニュース-02 2行目<br>ニュース-02 3行目<br>ニュース-02 4行目</li>
		    <li>ニュース-03 1行目<br>ニュース-03 2行目<br>ニュース-03 3行目<br>ニュース-03 4行目</li>
		  </ul>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ニュースティッカーの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.simpleTicker.js"></script>
<script>
$(function(){
	$.simpleTicker($("#ticker-01"),{'effectType':'roll'});
});
$(function(){
	$.simpleTicker($("#ticker-02"),{'effectType':'slide'});
});
$(function(){
	$.simpleTicker($("#ticker-03"),{'effectType':'fade'});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.10 アコーディオンパネル

P5.10.1 アコーディオンパネル(detailsタグ)

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-accordion-01
    • index.html

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(ここから) ▼▼▼ */
/* 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(ここから) ▼▼▼ -->
	<!-- 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>

P5.10.2 アコーディオンパネル(jQuery その1)

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-accordion-02
    • index.html
    • js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* アコーディオンパネルの設定 */
.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(ここから) ▼▼▼ -->
	<!-- アコーディオンパネルの定義 -->
	<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(ここから) ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<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>

P5.10.3 アコーディオンパネル(jQuery その2)

(1) 説明

  • jQueryで作成したアコーディオンパネルです。
  • 常に1か所しか開かないように制御しています。

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-accordion-03
    • index.html
    • js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* アコーディオンパネルの設定 */
.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(ここから) ▼▼▼ -->
	<!-- アコーディオンパネルの定義 -->
	<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(ここから) ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<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>

P5.11 ツールチップ

P5.11.1 ツールチップ(その1)

(1) 説明

  • CSSで実現するツールチップです。テキストに適用できます。

(2) 表示形式

  • オンマウスして確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-tooltip-01
    • index.html

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;
	padding: 40px 0;
	text-align: center;
	overflow: hidden;
}
.wrapper div {
	display: inline-block;
	padding: 10px;
	margin: 20px;
	border: #ccc 1px solid;
	text-align: center;
}
.wrapper div span {
	color: steelblue;
	font-weight: bold;
}

/* ツールチップの設定 */
[tooltip] {
	position: relative;
}
[tooltip]::before,
[tooltip]::after {
	position: absolute;
	text-transform: none;
	font-size: 0.9em;
	line-height: 1;
	user-select: none;
	pointer-events: none;
	display: none;
	opacity: 0;
}
[tooltip]::before {
	content: '';
	border: transparent 5px solid;
	z-index: 1001;
}
[tooltip]::after {
	content: attr(tooltip);
	min-width: 3em;
	max-width: 21em;
	padding: 10px;
	font-size: 0.8em;
	text-align: center;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	background: #333;
	color: #fff;
	z-index: 1000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
	display: block;
}
[tooltip='']::before,
[tooltip='']::after {
	display: none !important;
}
[tooltip]:not([flow])::before,			/* 上ツールチップ */
[tooltip][flow^="up"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
	bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
	left: 50%;
	transform: translate(-50%, -0.5em);
}
[tooltip][flow^="down"]::before {		/* 下ツールチップ */
	top: 100%;
	border-top-width: 0;
	border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
	top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
	left: 50%;
	transform: translate(-50%, 0.5em);
}
[tooltip][flow^="left"]::before {		/* 左ツールチップ */
	top: 50%;
	border-right-width: 0;
	border-left-color: #333;
	left: calc(0em - 5px);
	transform: translate(-0.5em, -50%);
}
[tooltip][flow^="left"]::after {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-0.5em, -50%);
}
[tooltip][flow^="right"]::before {		/* 右ツールチップ */
	top: 50%;
	border-left-width: 0;
	border-right-color: #333;
	right: calc(0em - 5px);
	transform: translate(0.5em, -50%);
}
[tooltip][flow^="right"]::after {
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(0.5em, -50%);
}
@keyframes tooltips-vert {
	to {
		opacity: 0.9;
		transform: translate(-50%, 0);
	}
}
@keyframes tooltips-horz {
	to {
		opacity: 0.9;
		transform: translate(0, -50%);
	}
}
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
	animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
	animation: tooltips-horz 300ms ease-out forwards;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<div class="wrapper">
		<div>上に<span tooltip="上に出現するツールチップ" flow="up">ツールチップ</span>が出現します。</div>
		<div>下に<span tooltip="下に出現するツールチップ" flow="down">ツールチップ</span>が出現します。</div>
		<div>右に<span tooltip="右に出現するツールチップ" flow="right">ツールチップ</span>が出現します。</div>
		<div>左に<span tooltip="左に出現するツールチップ" flow="left">ツールチップ</span>が出現します。</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.11.2 ツールチップ(その2)

(1) 説明

  • CSSで実現するツールチップです。画像に適用できます。

(2) 表示形式

  • オンマウスして確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-tooltip-02
    • index.html
    • images
      • sample-256x128-01.jpg
      • sample-256x128-02.jpg
      • sample-256x128-03.jpg
      • sample-256x128-04.jpg

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;
	padding: 20px 0;
	text-align: center;
	overflow: hidden;
}
.wrapper > div {
	width: calc(100% / 2);
	padding: 5px;
	float:left
}
.wrapper p {
	padding: 10px 0;
}

/* ツールチップの設定 */
.tooltip {								/* 上に出現するツールチップ */
	width: 100%;
	display: inline-block;
	border: #ccc 1px solid;
	position: relative;
}
.tooltip img {
	width: 100%;
	vertical-align: middle;
}
.tooltip span {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px;
	font-size: 0.8em;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	border-radius: 5px;
	background: #000;
	z-index: 999;
}
.tooltip span::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: transparent 10px solid;
	border-top: 10px solid #000;
	margin-left: -10px;
}
.tooltip:hover span {
	display: block;
}
.tooltip.down span {					/* 下に出現するツールチップ */
	top: calc(100% + 10px);
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
}
.tooltip.down span::before {
	top: -20px;
	bottom: auto;
	transform: rotateZ(180deg);
}
.tooltip.right span {					/* 右に出現するツールチップ */
	top: 0;
	bottom: auto;
	left: calc(100% + 10px);
	transform: translateX(0);
}
.tooltip.right span::before {
	top: 8px;
	left: -10px;
	transform: rotateZ(90deg);
}
.tooltip.left span {					/* 左に出現するツールチップ */
	top: 0;
	bottom: auto;
	left: auto;
	right: calc(100% + 10px);
	transform: translateX(0);
}
.tooltip.left span::before {
	top: 8px;
	left: auto;
	right: -20px;
	transform: rotateZ(270deg);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<div class="wrapper">
		<div>
		    <p>上にツールチップが出現します。</p>
			<div class="tooltip up"><img src="images/sample-256x128-01.jpg" alt="サンプル画像"><span>上に出現するツールチップ</span></div>
		</div>
		<div>
		    <p>下にツールチップが出現します。</p>
			<div class="tooltip down"><img src="images/sample-256x128-02.jpg" alt="サンプル画像"><span>下に出現するツールチップ</span></div>
		</div>
		<div>
		    <p>右にツールチップが出現します。</p>
			<div class="tooltip right"><img src="images/sample-256x128-03.jpg" alt="サンプル画像"><span>右に出現するツールチップ</span></div>
		</div>
		<div>
		    <p>左にツールチップが出現します。</p>
			<div class="tooltip left"><img src="images/sample-256x128-04.jpg" alt="サンプル画像"><span>左に出現するツールチップ</span></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.11.3 ツールチップ(Tippy.js)

(1) 説明

  • Tippy.jsプラグインを使用したツールチップです。

(2) 表示形式

  • オンマウスして確認してください。

別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-tooltip-03
    • index.html

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(ここから) ▼▼▼ -->
<!-- ツールチップ出現用のアニメーションを指定します。指定がない時はフェードインで出現します。 -->
<link href="https://unpkg.com/tippy.js@5.0.3/animations/shift-toward-subtle.css" rel="stylesheet" type="text/css">
<!--ツールチップの色を指定しますS。指定がない時は黒色で出現します。 -->
<link href="https://unpkg.com/tippy.js@5.0.3/themes/light-border.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label,button {
	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;
	padding: 20px 0;
	text-align: center;
	overflow: hidden;
}

/* ツールチップの設定 */
p.caption {
	margin: 40px 0;
	text-align: center;
}
.inner-cap p {
	font-size:0.8rem;
}
.btn {
	display: block;
	padding: 10px 20px;
	margin: 0 auto;
	background: steelblue;
	color: #fff;
	border: #ccc 1px solid;
 	border-radius: 10px;
}
.btn:hover {
	opacity: 0.6;
}
span {
	background: linear-gradient(transparent 60%, #ffb7e6 60%);
	cursor: pointer;
}
a {
	color:#333;
}
a:hover{
  text-decoration: none;  
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<div class="wrapper">
		<p class="caption">下線部にカーソルを合わせると<span class="tooltip" data-tippy-content="&lt;div class='inner-cap'&gt;&lt;p&gt;出現するツールチップです。&lt;/p&gt;&lt;p&gt;ツールチップ内にHTMLも使えます。&lt;/p&gt;&lt;/div&gt;">ツールチップ</span>が出現します。</p>
		<button class="btn tooltip" data-tippy-content="&lt;div class='inner-cap'&gt;&lt;p&gt;出現するツールチップです。&lt;/p&gt;&lt;p&gt;ツールチップ内にHTMLも使えます。&lt;/p&gt;&lt;/div&gt;">ツールチップが出現するボタン</button>
  	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ツールチップの制御 -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script>
tippy('.tooltip', {
	/* ---------------------------------
	  ツールチップの表示位置を指定します。
	  top、top-start、top-end、right、right-start、right-end、
	  bottom、bottom-start、bottom-end、left、left-start、left-end
	  ※指定がない時はtopになります。
	------------------------------------*/
	placement: 'top-start',
	/* ---------------------------------
	  ツールチップ出現の動きを指定します。
	  shift-away、shift-away-subtle、shift-away-extreme、
	  shift-toward、shift-toward-subtle、shift-toward-extreme、
	  scale、scale-subtle、scale-extreme、
	  perspective、perspective-subtle、perspective-extreme
	  ※「https://unpkg.com/browse/tippy.js@5.0.3/animations/」
	    から任意の動きを選び<head>内に読み込む必要があります。
	  ※指定がない時はfadeになります。
	------------------------------------*/
	animation: 'shift-toward-subtle',
	/* ---------------------------------
	  ツールチップのテーマの色を指定します。
	  light、light-border、material、translucent
	  ※指定がない時は黒色で表示します。
	  ※「https://unpkg.com/browse/tippy.js@5.0.3/themes/」
	    からテーマを選び<head>内に読み込む必要があります。
	------------------------------------*/
	theme: 'light-border',
	/* ---------------------------------
	  ツールチップの出現の速さをミリ秒単位で指定します。
	------------------------------------*/
	duration: 200,
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P5.12 ソースコードハイライト

P5.12.1 ソースコードハイライト(highlight.js 基本形)

(1) 説明

  • highlight.jsプラグインを使用したソースコードハイライトです。
  • 読み込んだソースコードを自動判定してハイライト表示を行います。

(2) 表示形式

  • 各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(highlight.js)
    公式サイト:highlight.js(https://highlightjs.org/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-01
    • index.html
    • css
      • agate.min.css
    • js
      • highlight.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(highight)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ソースコードハイライト(highight)の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
}
h2 {
	font-size: 1.2rem;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(highight)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
pre {
	line-height: 1.4em;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(highight)の定義 -->
	<div class="wrapper">
		<h1>highightサンプル(初期状態)</h1>
		<h2>HTML</h2>
		<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
		</code></pre>
		<h2>CSS</h2>
		<pre><code>

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
		</code></pre>
		<h2>JavaScript</h2>
		<pre><code>

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
		</code></pre>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.2 ソースコードハイライト(highlight.js ファイル種別追加)

(1) 説明

  • highlight.jsプラグインを使用したソースコードハイライトです。
  • ファイル種別のタグ表示機能を追加しました。

(2) 表示形式

  • 各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(highlight.js)
    公式サイト:highlight.js(https://highlightjs.org/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-02
    • index.html
    • css
      • agate.min.css
    • js
      • highlight.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(highight)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ソースコードハイライト(highight)の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(highight)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
pre {
	position: relative;
	margin-bottom: 1em;
	line-height: 1.4em;
	tab-size: 4;
}
pre span.tag {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2rem;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	padding: 0 15px;
	margin: 0;
}
pre span.html {
	background-color: #0c92a5;
}
pre span.css {
	background-color: #07a056;
}
pre span.javascript {
	background-color: #d44747;
}
pre span.jquery {
	background-color: #c74690;
}
pre code.code {
	padding: 1em 2em;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(highight)の定義 -->
	<div class="wrapper">
		<h1>highightサンプル(種別表示追加)</h1>
		<h2>HTML</h2>
		<pre><span class="tag html">HTML</span><code class="code">

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
		</code></pre>
		<h2>CSS</h2>
		<pre><span class="tag css">CSS</span><code class="code">

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
		</code></pre>
		<h2>JavaScript</h2>
		<pre><span class="tag javascript">JavaScript</span><code class="code">

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
		</code></pre>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.3 ソースコードハイライト(highlight.js 折り込み追加)

(1) 説明

  • highlight.jsプラグインを使用したソースコードハイライトです。
  • 折り込み機能を追加しました。

(2) 表示形式

  • 折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(highlight.js)
    公式サイト:highlight.js(https://highlightjs.org/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-03
    • index.html
    • css
      • jquery.bxslider.css
    • images
      • bx_loader.gif
      • controls.png
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery.bxslider.min.js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(highight)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/agate.min.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ソースコードハイライト(highight)の制御 -->
<script src="js/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(highight)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
pre {
	position: relative;
	margin-bottom: 1em;
	line-height: 1.4em;
	tab-size: 4;
}
pre span.tag {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2rem;
	color: #fff;
	font-weight: bold;
	line-height: 1.8;
	padding: 0 15px;
	margin: 0;
}
pre span.html {
	background-color: #0c92a5;
}
pre span.css {
	background-color: #07a056;
}
pre span.javascript {
	background-color: #d44747;
}
pre span.jquery {
	background-color: #c74690;
}
pre code.code {
	padding: 1em 2em;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(highight)の定義 -->
	<div class="wrapper">
		<h1>highightサンプル(折り畳み機能追加)</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>HTML</h2>
			<pre><span class="tag html">HTML</span><code class="code">

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
			</code></pre>
			<h2>CSS</h2>
			<pre><span class="tag css">CSS</span><code class="code">

ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
			</code></pre>
			<h2>JavaScript</h2>
			<pre><span class="tag javascript">JavaScript</span><code class="code">

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
			</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.4 ソースコードハイライト(Prism.js 基本形)

(1) 説明

  • Prism.jsプラグインを使用したソースコードハイライトです。
  • 豊富なオプション(行番号表示、Copyボタンなど)を持っています。

(2) 表示形式

  • 各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(Prism.js)
    公式サイト:Prism.js(https://prismjs.com/)
    CDN(オプション機能により選択):https://cdnjs.com/libraries/prism

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-04
    • index.html
    • css
      • prism.css
    • js
      • prism.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(prism)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(prism)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(prism)の定義 -->
	<div class="wrapper">
		<h1>prismサンプル(初期値状態)</h1>
		<h2>言語設定:language-html</h2>
		<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
		<h2>言語設定:language-css</h2>
		<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
		<h2>言語設定:language-javascript</h2>
		<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.5 ソースコードハイライト(Prism.js ファイル種別追加)

(1) 説明

  • Prism.jsプラグインを使用したソースコードハイライトです。
  • ファイル種別表示機能を追加しました。

(2) 表示形式

  • 各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(Prism.js)
    公式サイト:Prism.js(https://prismjs.com/)
    CDN(オプション機能により選択):https://cdnjs.com/libraries/prism

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-05
    • index.html
    • css
      • prism.css
    • js
      • prism.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(prism)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(prism)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(prism)の定義 -->
	<div class="wrapper">
		<h1>prismサンプル(種別表示機能追加)</h1>
		<h2>言語設定:language-html</h2>
		<p class="label-html">HTML</p>
		<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
		<h2>言語設定:language-css</h2>
		<p class="label-css">CSS</p>
		<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
		<h2>言語設定:language-javascript</h2>
		<p class="label-javascript">JavaScript</p>
		<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.6 ソースコードハイライト(Prism.js 折り込み追加)

(1) 説明

  • Prism.jsプラグインを使用したソースコードハイライトです。
  • 折り込み機能を追加しました。

(2) 表示形式

  • 折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(Prism.js)
    公式サイト:Prism.js(https://prismjs.com/)
    CDN(オプション機能により選択):https://cdnjs.com/libraries/prism

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-06
    • index.html
    • css
      • prism.css
    • js
      • prism.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(prism)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(prism)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(prism)の定義 -->
	<div class="wrapper">
		<h1>prismサンプル(折り畳み機能追加)</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>言語設定:language-html</h2>
			<p class="label-html">HTML</p>
			<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
			<h2>言語設定:language-css</h2>
			<p class="label-css">CSS</p>
			<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
			<h2>言語設定:language-javascript</h2>
			<p class="label-javascript">JavaScript</p>
			<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P5.12.7 ソースコードハイライト(Prism.js 色カスタマイズ)

(1) 説明

  • Prism.jsプラグインを使用したソースコードハイライトです。
  • 表示色のカスタマイズをしました。

(2) 表示形式

  • 折り込みの閉開を行って各ソースコードのハイライト表示を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • コードハイライト(Prism.js)
    公式サイト:Prism.js(https://prismjs.com/)
    CDN(オプション機能により選択):https://cdnjs.com/libraries/prism

(4) ソースコード

ソースコード表示
■ ファイル配置
  • text-sourcecode-07
    • index.html
    • css
      • prism.css
    • js
      • prism.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソースコードハイライト(prism)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/prism.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<script src="js/prism.js"></script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

<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;
	border: #fff 1px solid;
}
h1 {
	font-size: 1.4rem;
	padding-left: 10px;
	padding-bottom: 10px;
}
h2 {
	font-size: 1.2rem;
	padding-left: 10px;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ソースコードハイライト(prism)の設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
div.container div.wrapper pre,
div.container div.wrapper pre code {
	line-height: 1.4em;
}
details summary {
	width: 200px;
	font-size: 1.2em;
	line-height: 2.6;
	text-align: center;
	padding: 0 1.5em;
	margin: 1em 0;
	color: #fff;
	background-color: #336699;
	border-radius: 1.3em;
}
details summary:hover {
	cursor: pointer;
	opacity: 0.6;
}
p[class*="label-"] {
    display: inline-block;
    line-height: 2;
	padding: 0 1.5em;
	margin: 0;
    color: #fff;
}
p.label-html {
    background-color: #0c92a5;
}
p.label-css {
    background-color: #07a056;
}
p.label-javascript {
    background-color: #d44747;
}
pre[class*="language-"] {
	margin: 0 0 10px 0;
    border-radius: 0;
}
/* 表示色カスタマイズ */
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
    color: #62ffcc;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ソースコードハイライト(prism)の定義 -->
	<div class="wrapper">
		<h1>prismサンプル(表示色カスタマイズ)</h1>
		<details>
			<summary>ソースコード表示</summary>
			<h2>言語設定:language-html</h2>
			<p class="label-html">HTML</p>
			<pre class="line-numbers"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTMLサンプル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;ul&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;hr&gt;
	&lt;ol&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
		&lt;li&gt;(リスト要素)&lt;/li&gt;
	&lt;/ol&gt;
	&lt;hr&gt;
	&lt;dl&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
		&lt;dt&gt;(説明する言葉)&lt;/dt>&lt;dd&gt;(説明文)&lt;/dd&gt;
	&lt;/dl&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
			<h2>言語設定:language-css</h2>
			<p class="label-css">CSS</p>
			<pre class="line-numbers"><code class="language-css">
ul {
	padding: 0;
	margin: 0;
}
.container {
	max-width: 960px;
	margin: 20px auto;
}
#slide {
	max-width: 640px;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	position: absolute;
	left: 0;
	top: 0;
}
</code></pre>
			<h2>言語設定:language-javascript</h2>
			<p class="label-javascript">JavaScript</p>
			<pre class="line-numbers"><code class="language-javascript">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>
		</details>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

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