HTML-CSS 入門講座

HTML-CSS 入門講座

WebParts-8
テキスト装飾

目次

P8.1 はじめに

P8.1.1 概要

テキスト装飾は、テキストに対する各種の装飾です。

ナビゲーション
項目にマウスオーバーすると線や色などが変化します。
見出し
見出し項目の装飾です。
タイピング
テキストのタイプライター風表示です。
ボタン
ボタンの装飾です。
リスト
リスト形態の装飾です。
フローチャート
フローチャートの装飾です。
ニュースティッカー
お知らせなどのアニメーション表示です。
ツールチップ
マウスオーバー時に表示される補足説明などの枠です。
フォーム
入力フォームなどで使用するパーツです。
プログレスバー
進捗状況表示などで使用するパーツです。

P8.2 ナビゲーション

P8.2.1 ナビゲーション(下線)

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

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

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>下線が伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

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

/* 基本の設定 */
.text-deco {
	padding: 40px 10px 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	list-style-type: none;
	text-align: center;
	float: left;
}
@media screen and (max-width: 760px) {
	.text-deco li {
		width: 100%;
		float: none;
	}
}
.text-deco li a {
	display: inline-block;
	padding: 10px 10px;
	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: 0%;							/* 線の横位置 */
	width: 100%;						/* 線の長さ */
	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;			/* 上部左基点 */
}
/* 最初から線が表示された状態にするには、liタグにcurrentクラスを設定 */
.text-deco li.current a::after,
.text-deco li a:hover::after {
	transform: scale(1, 1);				/* 線を伸ばす */
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

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

</body>
</html>

P8.2.2 伸びる背景

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/22-navigation-2
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景が伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

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

/* 基本の設定 */
.text-deco {
	padding: 40px 10px 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	text-align: center;
	list-style-type: none;
	float: left;
}
@media screen and (max-width: 760px) {
	.text-deco li {
		width: 100%;
		float: none;
	}
}
.text-deco li a {
	display: inline-block;
	padding: 10px 20px;
	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(ここから)(※3) ▼▼▼ -->
	<div class="wrapper">
		<!-- 背景伸びる定義 -->
		<p>※左から右に背景が伸びる</p>
		<ul class="text-deco">
			<li><a>サンプルテキスト-1</a></li>
			<li><a>サンプルテキスト-2</a></li>
			<li><a>サンプルテキスト-3</a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.2.3 上下の線

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/23-navigation-3
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>上下の線が伸びて背景になるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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(ここから)(※2) ▼▼▼ */
/* 上下の線が伸びて背景になる設定 */

/* 基本の設定 */
.text-deco {
	padding: 40px 10px 40px 0;
	overflow: hidden;
}
.text-deco li {
	width: calc(100% / 3);
	text-align: center;
	list-style-type: none;
	float: left;
}
@media screen and (max-width: 760px) {
	.text-deco li {
		width: 100%;
		float: none;
	}
}
.text-deco li a {
	display: inline-block;
	padding: 10px 20px;
	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(ここから)(※3) ▼▼▼ -->
	<div class="wrapper">
		<!-- 上下の線が伸びて背景になる定義 -->
		<p>※上下の線が伸びて背景になる</p>
		<ul class="text-deco">
			<li><a>サンプルテキスト-1</a></li>
			<li><a>サンプルテキスト-2</a></li>
			<li><a>サンプルテキスト-3</a></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.2.4 四方を囲む

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/24-navigation-4
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>線が伸びて枠になるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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(ここから)(※2) ▼▼▼ */
/* 線が伸びて枠になる設定 */

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

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

<body>

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

</body>
</html>

P8.3 見出し

P8.3.1 見出し

(1) 説明

  • 見出しの装飾です。

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/31-heading-1
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* 見出しの設定 */
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;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 0.8em;
	}
}
/* 見出しサンプル-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;
}
@media screen and (max-width: 760px) {
	.heading-07 {
		padding: 10px 0 0 0;
		font-size: 12px;
	}
}
.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;
}
@media screen and (max-width: 760px) {
	.heading-07::before {
		left: 120px;
	}
}
/* 見出しサンプル-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;
}
@media screen and (max-width: 760px) {
	.heading-08 {
		padding-top: 20px;
		padding-left: 20px;
		padding-bottom: 10px;
	}
	.heading-08:before {
		height: 50px;
		width: 50px;
	}
}


/* 見出しサンプル-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;
}
@media screen and (max-width: 760px) {
	.heading-14 {
		padding: 1rem 0 1rem 110px;
	}
	.heading-14:before {
		left: -125px;
	}
	.heading-14 span {
		top: 7px;
		left: 2px;
		font-size: 1.4rem;
	}
}
/* 見出しサンプル-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;
}
@media screen and (max-width: 760px) {
	.heading-16 {
		background-size: 20px 20px;
		background-position: 0 0, 10px 10px;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
	<!-- 見出しの定義 -->
	<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>

P8.3.2 フレーム

(1) 説明

  • 枠(フレーム)のサンプルです。

(2) 表示形式

  • 枠(フレーム)の表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/32-heading-2
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>枠のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	padding-top: 20px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* 枠サンプル-01(ずれた二重線) */
.frame-01 {								/* 全体のスタイル */
	width: calc(100% - 3px);			/* ずれた分を差し引く */
	padding: 26px 10px 20px 30px;
	margin-bottom: 40px;
	color: #333;
	font-size: 1.6em;
	border: steelblue 2px solid;
	position: relative;
}
@media screen and (max-width: 760px) {
	.frame-01 {
		font-size: 1rem;
	}
}
.frame-01::before{						/* タイトル部 */
	position: absolute;
	top: -14px;
	left: 18px;
	content: 'タイトル';
	color: steelblue;
	font-size: 0.8em;
	padding: 2px 10px;
	background: #fff;
	text-align: center;
}										/* ずれた線 */
.frame-01::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	border: steelblue 2px solid;
	z-index: -1;
}
/* 枠サンプル-02(内側に白い線) */
.frame-02 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 50px;
	font-size: 1.6em;
	background: #2c9564;
	color: #fff;
	border-radius: 5px;
	position: relative;
	z-index: 0;
}
@media screen and (max-width: 760px) {
	.frame-02 {
		font-size: 1rem;
	}
}
.frame-02::before{						/* 白い線 */
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: block;
	margin: 4px;
	border: #fff 2px solid;
	border-radius: 5px;
	z-index: -1;
}
/* 枠サンプル-03(左に太線) */
.frame-03 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 50px;
	color: #333;
	font-size: 1.6em;
	background: #fff8e8;
	border-left: solid 10px #ffc06e;
}
@media screen and (max-width: 760px) {
	.frame-03 {
		font-size: 1rem;
	}
}
/* 枠サンプル-04(ステッチ) */
.frame-04 {								/* 全体のスタイル */
	max-width: calc(760px - 16px);
	margin: 0 auto 50px auto;
	padding: 12px 10px 12px 30px;
	color: #333;
	font-size: 1.6em;
	background: #ffeaea;
	box-shadow: 0px 0px 0px 8px #ffeaea;
	border: dashed 2px #ffc3c3;
	border-radius: 5px;
}
@media screen and (max-width: 760px) {
	.frame-04 {
		font-size: 1rem;
	}
}
/* 枠サンプル-05(交差している線) */
.frame-05 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 50px;
	font-size: 1.6em;
	color: #333;
	border-top: #000 2px solid;
	border-bottom: #000 2px solid;
	position: relative;
}
@media screen and (max-width: 760px) {
	.frame-05 {
		font-size: 1rem;
	}
}
.frame-05::before,						/* 左の線 */
.frame-05::after {						/* 右の線 */
	content: '';
	position: absolute;
	top: -10px;
	width: 2px;
	height: calc(100% + 20px);
	background: #000;
}
.frame-05::before {						/* 左の線 */
	left: 10px;
}
.frame-05::after {						/* 右の線 */
	right: 10px;
}
/* 枠サンプル-06(枠線の上にタイトル) */
.frame-06 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 60px;
	border: steelblue 2px solid;
	border-radius: 5px;
	position: relative;
}
.frame-06 span {						/* タイトル */
	position: absolute;
	top: -8px;
	left: 12px;
	display: inline-block;
	padding: 0 10px;
	line-height: 1;
	font-size: 1.2em;
	background: #FFF;
	color: steelblue;
	font-weight: bold;
}
.frame-06 p {							/* 本文の文字 */
	font-size: 1.6em;
	color: #333;
}
@media screen and (max-width: 760px) {
	.frame-06 p {
		font-size: 1rem;
	}
}
/* 枠サンプル-07(枠の外にタイトル) */
.frame-07 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 40px;
	border: #62c1ce 3px solid;
	position: relative;
}
.frame-07 span {						/* タイトル */
	position: absolute;
	top: -36px;
	left: -3px;
	display: inline-block;
	padding: 4px 20px;
	height: 25px;
	line-height: 25px;
	font-size: 1.2em;
	background: #62c1ce;
	color: #fff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.frame-07 p {							/* 本文の文字 */
	font-size: 1.6em;
	color: #333;
}
@media screen and (max-width: 760px) {
	.frame-07 p {
		font-size: 1rem;
	}
}
/* 枠サンプル-08(枠の中にタイトル) */
.frame-08 {								/* 全体のスタイル */
	padding: 40px 10px 20px 30px;
	margin-bottom: 40px;
	border: #ffc107 3px solid;
	position: relative;
}
.frame-08 span {						/* タイトル */
    position: absolute;
    top: -3px;
    left: -3px;
    display: inline-block;
    padding: 4px 20px;
    height: 25px;
    line-height: 25px;
    font-size: 1.2em;
    background: #ffc107;
    color: #fff;
    font-weight: bold;
}
.frame-08 p {							/* 本文の文字 */
	font-size: 1.6em;
	color: #333;
}
@media screen and (max-width: 760px) {
	.frame-08 p {
		font-size: 1rem;
	}
}
/* 枠サンプル-09(枠の上部にタイトル) */
.frame-09 {								/* 全体のスタイル */
	margin-bottom: 30px;
}
.frame-09 span {						/* タイトル */
	display: block;
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}
.frame-09 p {							/* 本文の文字 */
	padding: 20px 10px 20px 30px;
	font-size: 1.6em;
	color: #333;
    background: #eee;
}
@media screen and (max-width: 760px) {
	.frame-09 p {
		font-size: 1rem;
	}
}
/* 枠サンプル-10(大き目のドット) */
.frame-10 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 40px;
	font-size: 1.6em;
    background: #ffffe0;
    border: #ffa500 5px dotted;
    color: #333;
}
@media screen and (max-width: 760px) {
	.frame-10 {
		font-size: 1rem;
	}
}
/* 枠サンプル-11(テープで貼り付け) */
.frame-11 {								/* 全体のスタイル */
	max-width: 300px;
	padding: 30px 0;
	margin: 0 auto 30px auto;
	font-size: 1.6em;
	background: #f7f092;
	color: #333;
	text-align: center;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.03);
	transform: rotate(2deg);
	position: relative;
}
@media screen and (max-width: 760px) {
	.frame-11 {
		font-size: 1rem;
	}
}
.frame-11::before {						/* テープ */
	content: "";
	position: absolute;
	top: 6px;
	left: 100px;
    width: 100px;
    height: 35px;
    margin: -25px auto 0 auto;
    background: #999;
    transform: rotate(-3deg);
    opacity: 0.15;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- 枠の定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
		<div class="frame-01">枠サンプル-01(ずれた二重線)</div>
		<div class="frame-02">枠サンプル-02(内側に白い線)</div>
		<div class="frame-03">枠サンプル-03(左に太線)</div>
		<div class="frame-04">枠サンプル-04(ステッチ)</div>
		<div class="frame-05">枠サンプル-05(交差した線)</div>
		<div class="frame-06">
			<span>タイトル</span>
			<p>枠サンプル-06(枠線の上にタイトル)</p>
		</div>
		<div class="frame-07">
			<span>タイトル</span>
			<p>枠サンプル-07(枠の外にタイトル)</p>
		</div>
		<div class="frame-08">
			<span>タイトル</span>
			<p>枠サンプル-08(枠の中にタイトル)</p>
		</div>
		<div class="frame-09">
			<span>タイトル</span>
			<p>枠サンプル-09(枠の上部にタイトル)</p>
		</div>
		<div class="frame-10">枠サンプル-10(大き目のドット)</div>
		<div class="frame-11">枠サンプル-11<br>(テープで貼り付け)</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

</body>
</html>

P8.3.3 リボン

(1) 説明

  • リボンのサンプルです。

(2) 表示形式

  • リボンの表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/33-heading-3
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リボンのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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;
	padding-top: 20px;
	margin: 0 auto;
	text-align: center;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* リボンサンプル-01(端を山形) */
.ribbon-01 {							/* 全体のスタイル */
	display: inline-block;
	padding: 20px 60px 20px 60px;
	margin-bottom: 40px;
	font-size: 1.6em;
	background: #3ccf84;
	color: #fff;
	box-sizing: border-box;
	position: relative;
}
.ribbon-01::before,						/* 左の山 */
.ribbon-01::after {						/* 右の山 */
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	z-index: 1;
}
.ribbon-01::before {					/* 左の山 */
	top: 0;
	left: 0;
	border-width: 40px 0px 40px 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
}
.ribbon-01::after {						/* 右の山 */
	top: 0;
	right: 0;
	border-width: 40px 30px 40px 0px;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
}
@media screen and (max-width: 760px) {
	.ribbon-01 {
		font-size: 0.82em;
	}
	.ribbon-01::before {				/* 左の山 */
		border-width: 32px 0px 32px 30px;
	}
	.ribbon-01::after {					/* 右の山 */
		border-width: 32px 30px 32px 0px;
	}
}
/* リボンサンプル-02(ステッチ) */
.ribbon-02 {							/* 全体のスタイル */
	display: inline-block;
	padding: 10px 0 10px 0;
	margin-bottom: 40px;
	font-size: 1.6em;
	background: #f76fc1;
	color: #fff;
	box-sizing: border-box;
	position: relative;
}
.ribbon-02::before,						/* 左の山 */
.ribbon-02::after {						/* 右の山 */
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	z-index: 1;
}
.ribbon-02::before {					/* 左の山 */
	top: 0;
	left: 0;
	border-width: 40px 0px 40px 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
}
.ribbon-02::after {						/* 右の山 */
	top: 0;
	right: 0;
	border-width: 40px 30px 40px 0px;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
}
.ribbon-02 span {						/* 本文の文字 */
	display: inline-block;
	padding: 10px 60px 10px 60px;
	border-top: dashed 2px #fff;
	border-bottom: dashed 2px #fff;
}
@media screen and (max-width: 760px) {
	.ribbon-02 {
		font-size: 0.82em;
	}
	.ribbon-02::before {				/* 左の山 */
		border-width: 32px 0px 32px 30px;
	}
	.ribbon-02::after {					/* 右の山 */
		border-width: 32px 30px 32px 0px;
	}
}
/* リボンサンプル-03(端に折り目) */
.ribbon-03 {							/* 全体のスタイル */
	display: inline-block;
	margin-bottom: 40px;
	position: relative;
}
.ribbon-03::before,						/* 左の山 */
.ribbon-03::after {						/* 右の山 */
	content: '';
	position: absolute;
	bottom: -10px;
	width: 30px;
	z-index: -2;
	border-style: solid;
}
.ribbon-03::before {					/* 左の山 */
	left: -45px;
	bottom: -10px;
	border-width: 40px 0px 40px 30px;
	border-color: #56adf3 #56adf3 #56adf3 #fff;
}

.ribbon-03::after {						/* 右の山 */
	right: -45px;
	bottom: -10px;
	border-width: 40px 30px 40px 0px;
	border-color: #56adf3 #fff #56adf3 #56adf3;
}
.ribbon-03 span {						/* 本文の文字 */
	display: inline-block;
	padding: 20px 40px;
	position: relative;
	font-size: 1.6em;
	color: #fff;
	background: #2196f3;
}
.ribbon-03 span::before,				/* 左の折り込み */
.ribbon-03 span::after {				/* 右の折り込み */
	position: absolute;
	content: '';
	top: 100%;
	border: none;
	border-bottom: solid 10px transparent;
}
.ribbon-03 span::before {				/* 左の折り込み */
	left: 0;
	border-right: solid 15px #397eb5;
}
.ribbon-03 span::after {				/* 右の折り込み */
	right: 0;
	border-left: solid 15px #397eb5;
}
@media screen and (max-width: 760px) {
	.ribbon-03 span {
		font-size: 0.82em;
	}
	.ribbon-03::before {				/* 左の山 */
		border-width: 32px 0px 32px 30px;
	}

	.ribbon-03::after {					/* 右の山 */
		border-width: 32px 30px 32px 0px;
	}
}
/* リボンサンプル-04(ストライプ) */
.ribbon-04 {							/* 全体のスタイル */
	display: inline-block;
	margin-bottom: 40px;
	position: relative;
}
.ribbon-04::before,						/* 左の山 */
.ribbon-04::after {						/* 右の山 */
	content: '';
	position: absolute;
	bottom: -10px;
	width: 30px;
	z-index: -2;
	border-style: solid;
}
.ribbon-04::before {					/* 左の山 */
	left: -45px;
	bottom: -10px;
	border-width: 40px 0px 40px 30px;
	border-color: #b0daff #b0daff #b0daff #fff;
}
.ribbon-04::after {						/* 右の山 */
	right: -45px;
	bottom: -10px;
	border-width: 40px 30px 40px 0px;
	border-color: #b0daff #fff #b0daff #b0daff;
}
.ribbon-04 span {						/* 本文の文字 */
	display: inline-block;
	padding: 20px 40px 20px 40px;
	position: relative;
	font-size: 1.6em;
	color: #0660ad;
	background: repeating-linear-gradient(-45deg, #b0daff, #b0daff 3px,#cfe8ff 3px, #cfe8ff 7px);
}
.ribbon-04 span::before,				/* 左の折り込み */
.ribbon-04 span::after {				/* 右の折り込み */
	position: absolute;
	content: '';
	top: 100%;
	border: none;
	border-bottom: solid 10px transparent;
}
.ribbon-04 span::before {				/* 左の折り込み */
	left: 0;
	border-right: solid 15px #8ba7c1;
}
.ribbon-04 span::after {				/* 右の折り込み */
	right: 0;
	border-left: solid 15px #8ba7c1;
}
@media screen and (max-width: 760px) {
	.ribbon-04 span {
		font-size: 0.82em;
	}
	.ribbon-04::before {				/* 左の山 */
		border-width: 32px 0px 32px 30px;
	}
	.ribbon-04::after {					/* 右の山 */
		border-width: 32px 30px 32px 0px;
	}
}
/* リボンサンプル-05(ボックスへ折り込み) */
.ribbon-05 {  							/* ボックス */
	display: inline-block;
	padding: 20px 0;
	margin-bottom: 40px;
	background: #b6ddd9;
	position: relative;
}
.ribbon-05 span {						/* リボン */
	position: relative;
	display: inline-block;
	padding: 10px 30px;
	margin: 0 0 0 -20px;
	font-size: 1.6rem;
	color: #fff;
	background: #2196f3;
}
.ribbon-05 span::before {				/* 折り込み */
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px #397eb5;
}
.ribbon-05 p {							/* メッセージ */
	padding-top: 20px;
	font-size: 1.6rem;
}
@media screen and (max-width: 760px) {
	.ribbon-05 span {
		font-size: 0.82em;
	}
	.ribbon-05 p {
		font-size: 0.82em;
	}
}
/* リボンサンプル-06(縦リボン) */
.ribbon-06 {							/* 全体のスタイル */
	display: inline-block;
	margin-bottom: 40px;
	position: relative;
	background: #b6ddd9;
}
.ribbon-06 span {						/* リボン */
	display: inline-block;
	position: absolute;
	top: -10px;
	right: 20px;
	width: 50px;
	padding: 5px 0;
	z-index: 2;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	background: #2196f3;
}
.ribbon-06 span::before {				/* 折り込み */
	position: absolute;
	content: '';
	top: 0;
	right: -10px;
	border: none;
	border-bottom: solid 10px #397eb5;
	border-right: solid 10px transparent;
}
.ribbon-06 span::after {				/* 山 */
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	border-left: 25px solid #2196f3;
	border-right: 25px solid #2196f3;
	border-bottom: 10px solid transparent;
}
.ribbon-06 p {							/* 本文の文字 */
	padding: 20px 80px 20px 40px;
	font-size: 1.6rem;
}
@media screen and (max-width: 760px) {
	.ribbon-06 p {
		font-size: 0.82em;
	}
}
/* リボンサンプル-07(斜めリボン) */
.ribbon-07 {							/* 全体のスタイル */
	display: inline-block;
	margin-bottom: 40px;
	background: #b6ddd9;
	position: relative;
}
.ribbon-07 div {						/* リボン領域 */
	position: absolute;
	top: -6px;
	right: -6px;
	width: 89px;
	height: 91px;
	overflow: hidden;
}
.ribbon-07 div span {					/* リボン */
	display: inline-block;
	position: absolute;
	left: -23px;
	top: 22px;
	width: 160px;
	padding: 7px 0;
	text-align: center;
	font-size: 18px;
	line-height: 16px;
	background: #2196f3;
	color: #fff;
	transform: rotate(45deg);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ribbon-07 div span::before,			/* 左の折り込み */
.ribbon-07 div span::after {			/* 右の折り込み */
	content: "";
	position: absolute;
	bottom: -4px;
	border-top: 4px solid #397eb5;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.ribbon-07 div span::before {			/* 左の折り込み */
	left: 14px;
}
.ribbon-07 div span::after {			/* 右の折り込み */
	right: 18px;
}
.ribbon-07 p {							/* 本文の文字 */
	padding: 30px 80px 30px 40px;
	font-size: 1.6rem;
}
@media screen and (max-width: 760px) {
	.ribbon-07 p {
		font-size: 0.82em;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- リボンの定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
		<div class="ribbon-01">リボンサンプル-01(端を山形)</div>
		<div class="ribbon-02"><span>リボンサンプル-02(ステッチ)</span></div>
		<div class="ribbon-03"><span>リボンサンプル-03(端に折り目)</span></div>
		<div class="ribbon-04"><span>リボンサンプル-04(ストライプ)</span></div>
		<div class="ribbon-05">
			<span>リボンサンプル-05(ボックスへ折り込み)</span>
			<p>メッセージ</p>
		</div>
		<div class="ribbon-06">
			<span>★</span>
			<p>リボンサンプル-06(縦リボン)</p>
		</div>
		<div class="ribbon-07">
			<div><span>リボン</span></div>
			<p>リボンサンプル-06(斜めリボン)</p>
		</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

</body>
</html>

P8.4 タイピング

P8.4.1 iTyped-1

(1) 説明

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

(2) 表示形式

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

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. iTyped.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Code」ボタンをクリックして「Download ZIP」メニューをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  3. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  4. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  5. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/41-typing-1
    • index.html
(b) ソースコード

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(ここから)(※2) ▼▼▼ */
/* タイピング(ityped)の設定 */
.ityped-01 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	.ityped-01 {
		font-size: 0.8rem;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

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

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- タイピング(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>

P8.4.2 iTyped-2

(1) 説明

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

(2) 表示形式

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

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. iTyped.js の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Code」ボタンをクリックして「Download ZIP」メニューをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。
  3. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  4. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  5. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/42-typing-2
    • index.html
(b) ソースコード

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

<body>

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

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- タイピング(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>

P8.4.3 t.js

(1) 説明

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

(2) 表示形式

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

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/43-typing-3
    • index.html
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイピング(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(ここから)(※2) ▼▼▼ */
/* タイピング(t)の設定 */
.wrapper {
	max-width: 960px;
	margin: 20px auto;
}
#t-01 {
	font-size: 2rem;
}
@media screen and (max-width: 760px) {
	#t-01 {
		font-size: 0.8rem;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

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

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- タイピング(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>

P8.5 ボタン

P8.5.1 波打つ

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/51-button-1
    • index.html
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン(波打つ)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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(ここから)(※2) ▼▼▼ */
/* ボタン(波打つ)の設定 */
.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;
}
@media screen and (max-width: 760px) {
	.button-su {
		width: calc(100% / 2 - 20px);
		margin: 10px;
	}
}
.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(ここから)(※3) ▼▼▼ -->
	<div class="warpper">
		<p>※ボタン(波打つ)</p>
		<!-- ボタン(波打つ)の定義 -->
		<div class="button-wrapper">
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a class="button-su-inner"><span class="button-text-container">ボタン-1</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a class="button-su-inner"><span class="button-text-container">ボタン-2</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a class="button-su-inner"><span class="button-text-container">ボタン-3</span></a>
			</div>
			<div class="button-su">
				<span class="su-button-circle"></span>
				<a class="button-su-inner"><span class="button-text-container">ボタン-4</span></a>
			</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- ボタン(波打つ)の制御 -->
<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>

P8.5.2 背景が左右に別かれる

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/text-button-02
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン(背景が左右に分かれる)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* ボタン(背景が左右に分かれる)の設定 */
.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;
}
@media screen and (max-width: 760px) {
	.button-item {
		width: calc(100% / 2 - 20px);
		padding: 10px 0px;
		margin: 10px;
	}
}
.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(ここから)(※3) ▼▼▼ -->
	<div class="wrapper">
		<p>※ボタン(背景が左右に分かれる)</p>
		<!-- ボタン(背景が左右に分かれる)の定義 -->
		<div class="button-wrapper">
			<div><a class="button-item"><span>ボタン-1</span></a></div>
			<div><a class="button-item"><span>ボタン-2</span></a></div>
			<div><a class="button-item"><span>ボタン-3</span></a></div>
			<div><a class="button-item"><span>ボタン-4</span></a></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.5.3 拡大アニメーション

(1) 説明

  • ボタンが拡大・縮小を繰り返すアニメーション装飾です。

(2) 表示形式

  • 拡大・縮小アニメーションを確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/text-button-03
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* ボタンの設定 */
.button {
    display: inline-block;
    padding: 10px 30px;
    margin: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    color: #fff;
    animation-iteration-count: infinite;
    animation-duration: 1s; 
    animation-name: btn-key;
}
@keyframes btn-key {
	0% {
		transform: scale3d(1, 1, 1);
	}
	50%{
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}
.button:hover {
	opacity: 0.6;
}
.red {
	background: red;
}
.blue {
	background: blue;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- ボタンの定義 -->
	<div class="wrapper">
		<a class="button red" href="">押してね!</a>
		<a class="button blue" href="">押してね!</a>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.6 リスト

P8.6.1 フォルダ/ファイル表示

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/61-list-1
    • index.html
    • images
      • icon-file.png
      • icon-folder.png
(b) 画像
  • ファイルアイコン (icon-file.png:ファイルアイコン)
  • フォルダアイコン (icon-folder.png:フォルダアイコン)
(c) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォルダ・ファイル構成表示のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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(ここから)(※2) ▼▼▼ */
/* フォルダ・ファイル構成表示のの設定 */
.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(ここから)(※3) ▼▼▼ -->
	<!-- フォルダ・ファイル構成表示のの定義 -->
	<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>

P8.6.2 カウントアップテキスト-1

(1) 説明

  • 自動でカウントアップするリーダーを表示します。

(2) 表示形式

  • 自動でカウントアップするリーダー表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/62-list-2
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントアップテキストのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* カウントアップテキストの設定 */
h1 {
	font-size: 1.6rem;
	line-height: 1.8;
	counter-reset: h2count 0;
}
h2 {
	font-size: 1.4rem;
	line-height: 1.8;
	counter-reset: h3count 0;
}
h2::before {
	display: inline-block;
	width: 5rem;
	line-height: 1.5;
	margin-right: 10px;
	background: #1fa35a;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	counter-increment: h2count 1;
	content: "第" counter(h2count) "章";
}
h3 {
	font-size: 1.2rem;
	line-height: 1.8;
}
h3::before {
	display: inline-block;
	width: 4rem;
	line-height: 1.5;
	margin-left: 10px;
	margin-right: 10px;
	background: #2095d9;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	counter-increment: h3count 1;
	content: counter(h2count) "-" counter(h3count);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- カウントアップテキストの定義 -->
	<div class="wrapper">
		<h1>カウントアップテキスト</h1>
		<h2>サンプル-01</h2>
		<h3>サンプル-01-01</h3>
		<h3>サンプル-01-02</h3>
		<h2>サンプル-02</h2>
		<h3>サンプル-02-01</h3>
		<h3>サンプル-02-02</h3>
		<h3>サンプル-02-03</h3>
		<h2>サンプル-03</h2>
		<h3>サンプル-03-01</h3>
		<h3>サンプル-03-02</h3>
		<h3>サンプル-03-03</h3>
		<h3>サンプル-03-04</h3>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.6.3 カウントアップテキスト-2

(1) 説明

  • 自動でカウントアップするリーダーを表示します。

(2) 表示形式

  • 自動でカウントアップするリーダー表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/63-list-3
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントアップテキストのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* カウントアップテキストの設定 */
h1 {
	font-size: 1.6rem;
	line-height: 1.8;
	counter-reset: h2count 0;
}
h2 {
	font-size: 1.4rem;
	line-height: 2;
}
h2::before {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin-right: 10px;
	border: 2px #000 solid;
	border-radius: 20px;
	text-align: center;
	box-sizing: border-box;
	counter-increment: h2count 1;
	content: counter(h2count);
}
p {
	padding: 10px;
	counter-reset: h2count 90;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- カウントアップテキストの定義 -->
	<div class="wrapper">
		<h1>カウントアップテキスト</h1>
		<h2>サンプル-01</h2>
		<h2>サンプル-02</h2>
		<h2>サンプル-03</h2>
		<h2>サンプル-04</h2>
		<h2>サンプル-05</h2>
		<p>(途中省略)</p>
		<h2>サンプル-91</h2>
		<h2>サンプル-92</h2>
		<h2>サンプル-93</h2>
		<h2>サンプル-94</h2>
		<h2>サンプル-95</h2>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.6.4 リストテキスト-1

(1) 説明

  • リストの各種リーダーを表示します。

(2) 表示形式

  • 各種リーダー表示を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/64-list-4
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マーカーカスタマイズのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* カウントアップテキストの設定 */
p {
	font-size: 1.2rem;
}

/* 01 文字の定義 */
.list-01 {
	margin-bottom: 20px;
}
.list-01 li {
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-01 li:before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
	color: steelblue;
}

/* 02 塗り丸の定義 */
.list-02 {
	margin-bottom: 20px;
}
.list-02 li {
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-02 li:before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 0.9em;
	height: 0.9em;
	background-color: steelblue;
	border-radius: 50%;
}

/* 03 白丸の定義 */
.list-03 {
	margin-bottom: 20px;
}
.list-03 li {
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-03 li:before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	border: 0.1em steelblue solid;
	border-radius: 50%;
}

/* 04 チェックマークの定義 */
.list-04 {
	margin-bottom: 20px;
}
.list-04 li{
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-04 li:before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.3em;
	transform: rotate(50deg);
	width: 0.3em;
	height: 0.6em;
	border-right: 0.2em steelblue solid;
	border-bottom: 0.2em steelblue solid;
}

/* 05 四角チェックマークの定義 */
.list-05 {
	margin-bottom: 20px;
}
.list-05 li{
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-05 li:before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0.35em;
	transform: rotate(50deg);
	width: 0.25em;
	height: 0.45em;
	border-right: 0.1em steelblue solid;
	border-bottom: 0.1em steelblue solid;
}
.list-05 li:after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	border: 0.1em steelblue solid;
	border-radius: 0.1em;
}

/* 06 三角の定義 */
.list-06 {
	margin-bottom: 20px;
}
.list-06 li{
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-06 li:before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.3em;
	width: 0;
	height: 0;
	border-width: 0.43em 0 0.43em 0.63em;
	border-style: solid;
	border-color: transparent transparent transparent steelblue;
}

/* 07 矢印の定義 */
.list-07 {
	margin-bottom: 20px;
}
.list-07 li{
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-07 li:before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 0.1em;
	transform: rotate(45deg);
	width: 0.5em;
	height: 0.5em;
	border-top: 0.1em steelblue solid;
	border-right: 0.1em steelblue solid;
}

/* 08 数字連番の定義 */
.list-08 {
	margin-bottom: 20px;
	counter-reset: list08count 0;
}
.list-08 li{
	position: relative;
	padding-left: 1.8em;
	list-style-type: none;
}
.list-08 li:before {
	counter-increment: list08count 1;
	content: "(" counter(list08count) ")";
	margin-right: 0.3em;
	position: absolute;
	top: 0;
	left: 0;
}

/* 09 数字(丸付き)連番の定義 */
.list-09 {
	margin-bottom: 20px;
	counter-reset: list09count 0;
}
.list-09 li{
	position: relative;
	padding-left: 1.8em;
	list-style-type: none;
}
.list-09 li:before {
	counter-increment: list09count 1;
	content: counter(list09count);
	margin-right: 0.3em;
	position: absolute;
	top: 0;
	left: 0.36em;
}
.list-09 li:after {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.1em;
	height: 1.1em;
	border: 0.1em #333 solid;
	border-radius: 50%;
}


/* 10 英字連番の定義 */
.list-10 {
	margin-bottom: 20px;
	counter-reset: list10count 0;
}
.list-10 li{
	position: relative;
	padding-left: 1.8em;
	list-style-type: none;
}
.list-10 li:before {
	counter-increment: list10count 1;
	content: "(" counter(list10count,lower-latin) ")";
	margin-right: 0.3em;
	position: absolute;
	top: 0;
	left: 0;
}

/* 11 英字(丸付き)連番の定義 */
.list-11 {
	margin-bottom: 20px;
	counter-reset: list11count 0;
}
.list-11 li{
	position: relative;
	padding-left: 1.8em;
	list-style-type: none;
}
.list-11 li:before {
	counter-increment: list11count 1;
	content: counter(list11count,lower-latin);
	margin-right: 0.3em;
	position: absolute;
	top: 0;
	left: 0.36em;
}
.list-11 li:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2em;
	height: 1.2em;
	border: 0.1em #333 solid;
	border-radius: 50%;
}

/* 12 ハートの定義 */
.list-12 {
	margin-bottom: 20px;
}
.list-12 li {
	position: relative;
	padding-left: 1.2em;
	list-style-type: none;
}
.list-12 li:before {
	content: "\02665";
	position: absolute;
	top: 0;
	left: 0;
	color: steelblue;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
	<div class="wrapper">
		<!-- 01 文字の定義 -->
		<p>01 文字</p>
		<ul class="list-01">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 02 塗り丸の定義 -->
		<p>02 塗り丸</p>
		<ul class="list-02">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 03 白丸の定義 -->
		<p>03 白丸</p>
		<ul class="list-03">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 04 チェックマークの定義 -->
		<p>04 チェックマーク</p>
		<ul class="list-04">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 05 四角チェックマークの定義 -->
		<p>05 四角チェックマーク</p>
		<ul class="list-05">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 06 三角の定義 -->
		<p>06 三角</p>
		<ul class="list-06">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 07 矢印の定義 -->
		<p>07 矢印</p>
		<ul class="list-07">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 08 数字連番の定義 -->
		<p>08 数字連番</p>
		<ul class="list-08">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 09 数字(丸付き)連番の定義 -->
		<p>09 数字(丸付き)連番</p>
		<ul class="list-09">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 10 英字連番の定義 -->
		<p>10 英字連番</p>
		<ul class="list-10">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 11 英字(丸付き)連番の定義 -->
		<p>11 英字(丸付き)連番</p>
		<ul class="list-11">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
		<!-- 12 ハートの定義 -->
		<p>12 ハート</p>
		<ul class="list-12">
			<li>項目1</li>
			<li>項目2<br>項目2の改行後</li>
			<li>項目3</li>
			<li>項目4</li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.7 フローチャート

P8.7.1 横方向チャート

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/71-flowchart-1
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローチャートのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* フローチャートの設定 */
.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;
}
@media screen and (max-width: 760px) {
	.flow > li dl {
		padding: 5px;
	}
}
.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;
}
@media screen and (max-width: 760px) {
	.flow > li dl dt {
		font-size: 12px;
	}
}
.flow > li dl dd {
	margin-left: 0;
}
@media screen and (max-width: 760px) {
	.flow > li dl dd {
		font-size: 12px;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<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>

P8.7.2 縦方向チャート-1

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/72-flowchart-2
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローチャートのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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(ここから)(※2) ▼▼▼ */
/* フローチャートの設定 */
.flow {
	border: 3px solid steelblue;
}
.flow > li {
	padding: 30px 20px 20px 40px;
	list-style-type: none;
}
@media screen and (max-width: 760px) {
	.flow > li {
		padding: 10px;
	}
}
.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;
}
@media screen and (max-width: 760px) {
	.flow > li dl dt {
		width: 100px;
		font-size: 1.0rem;
	}
}
.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;
}
@media screen and (max-width: 760px) {
	.flow > li dl dt .icon {
		font-size: 1rem;
	}
}
.flow > li dl dd {
	width: calc(100% - 150px);
	margin-left: 220px;
}
@media screen and (max-width: 760px) {
	.flow > li dl dd {
		width: calc(100% - 130px);
		margin-left: 130px;
	}
}
.flow > li dl dd ul li {
	list-style-type: disc;
}
@media screen and (max-width: 760px) {
	.flow > li dl dd ul li {
		font-size: 0.8rem;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<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>

P8.7.3 縦方向チャート-2

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/73-flowchart-33
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローチャートのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* フローチャートの設定 */
.flow {
	border-left: 2px dashed;
	list-style-type: none;
}
.flow > li {
	margin-left: 2em;
	position: relative;
}
.flow > li h2 {
	font-size: 1.4rem;
}
@media screen and (max-width: 760px) {
	.flow > li h2 {
		font-size: 1.0rem;
	}
}
.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;
}
@media screen and (max-width: 760px) {
	.flow > li ul li {
		font-size: 0.8rem;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<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>

P8.7.4 縦方向チャート-3

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/text-flowchart-04
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローチャートのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 400px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* フローチャートの設定 */
.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;
}
@media screen and (max-width: 760px) {
	.flow li {
	    font-size: 0.8rem;
	}
}
.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(ここから)(※3) ▼▼▼ -->
	<!-- フローチャートの定義 -->
	<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>

P8.8 ニュースティッカー

P8.8.1 simpleTicker.js

(1) 説明

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

(2) 表示形式

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

リロード  別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/81-newsticker-1
    • index.html
    • css
      • jquery.simpleTicker.css
    • js
      • jquery.simpleTicker.js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ニュースティッカーのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* ニュースティッカーの設定 */
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;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.0em;
	}
}
/* ニュースティッカーのサンプル-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を選択してコピーしてください)(※3) ▼▼▼ -->
	<!-- ニュースティッカーの定義 -->
	<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(ここから)(※4) ▼▼▼ -->
<!-- ニュースティッカーの制御 -->
<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>

P8.9 ツールチップ

P8.9.1 ツールチップ-1

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/91-tooltip-1
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ツールチップのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 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(ここから)(※3) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<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>

P8.9.2 ツールチップ-2

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/92-tooltip-2
    • index.html
    • images
      • sample-256x128-01.jpg
      • sample-256x128-02.jpg
      • sample-256x128-03.jpg
      • sample-256x128-04.jpg
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ツールチップのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
.wrapper {
	max-width: 760px;
	margin: 0 auto;
	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(ここから)(※3) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<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>

P8.9.3 Tippy.js-1

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) 実装手順

  1. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。サンプルコードは、CDN での記述です。
  2. head タグ内に「shift-toward-subtle.css」と「light-border.css」の link タグ(※1)を記述してください。このファイルは、表示する形態により選択します。
  3. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  4. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  5. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。popper.js は、tippy.js の関連ライブラリィです。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/93-tooltip-3
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ツールチップのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

<!-- ▼▼▼ 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(ここから)(※2) ▼▼▼ */
.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(ここから)(※3) ▼▼▼ -->
	<!-- ツールチップの定義 -->
	<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(ここから)(※4) ▼▼▼ -->
<!-- ツールチップの制御 -->
<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>

P8.10 フォーム

P8.10.1 checkbox-1

(1) 説明

  • フォーム要素であるチェックボックスのカスタマイズ型式です。

(2) 表示形式

  • クリックしてチェックボックスのチェック有無を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
  • 08-text/a1-checkbox-1
    • index.html
    • images
      • icon-chk.svg
(b) 画像
  • チェック (icon-chk.svg:チェック)
(c) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックスのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,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を選択してコピーしてください)(※2) ▼▼▼ */
/* チェックボックスの設定 */
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;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.2em;
	}
}
/* チェックボックスのサンプル-01(四角) */
.check-box-01 label {
	display: block;
	width: 100%;
}
.check-box-01 label input {
	display: none;
}
.check-box-01 label span {
	font-size: 1.4rem;
	position: relative;
}
@media screen and (max-width: 760px) {
	.check-box-01 label span {
		font-size: 1.2em;
	}
}
.check-box-01 label span::before {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	border: 1px #888 solid;
	vertical-align: middle;
	box-sizing: border-box;
}
.check-box-01 label input:checked + span::before {
	border: 2px #888 solid;
}
.check-box-01 label:hover input + span::before {
	border: 2px #888 solid;
}
.check-box-01 label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* チェックボックスのサンプル-02(角丸) */
.check-box-02 label {
	display: block;
	width: 100%;
}
.check-box-02 label input {
	display: none;
}
.check-box-02 label span {
	font-size: 1.4rem;
	position: relative;
}
@media screen and (max-width: 760px) {
	.check-box-02 label span {
		font-size: 1.2em;
	}
}
.check-box-02 label span::before {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	background: linear-gradient(45deg, #d0d0d0, #ffffff);
	border: 1px #888 solid;
	border-radius: 5px;
	vertical-align: middle;
	box-sizing: border-box;
}
.check-box-02 label input:checked + span::before {
	border: 2px #888 solid;
}
.check-box-02 label:hover input + span::before {
	border: 2px #888 solid;
}
.check-box-02 label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* チェックボックスのサンプル-03(青色) */
.check-box-03 label {
	display: block;
	width: 100%;
}
.check-box-03 label input {
	display: none;
}
.check-box-03 label span {
	font-size: 1.4rem;
	position: relative;
}
@media screen and (max-width: 760px) {
	.check-box-03 label span {
		font-size: 1.2em;
	}
}
.check-box-03 label span::before {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: 0.8rem;
	margin-top: -3px;
	background: linear-gradient(90deg, #779ffd, #ffffff);
	border: 1px #888 solid;
	border-radius: 5px;
	vertical-align: middle;
	box-sizing: border-box;
}
.check-box-03 label input:checked + span::before {
	border: 2px #779ffd solid;
	background: linear-gradient(270deg, #779ffd, #ffffff);
}
.check-box-03 label:hover input + span::before {
	border: 2px #779ffd solid;
	background: linear-gradient(270deg, #779ffd, #ffffff);
}
.check-box-03 label input:checked + span::after {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -13px;
	background-image: url(images/icon-chk.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
	<!-- チェックボックスの定義 -->
	<div class="wrapper">
		<!-- チェックボックスのサンプル-01(四角) -->
		<h2>チェックボックスのサンプル-01(四角)</h2>
		<div class="check-box-01">
			<label for="check01-01">
				<input type="checkbox" name="check01" id="check01-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="check01-02">
				<input type="checkbox" name="check01" id="check01-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="check01-03">
				<input type="checkbox" name="check01" id="check01-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="check01-04">
				<input type="checkbox" name="check01" id="check01-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
		<!-- チェックボックスのサンプル-02(角丸) -->
		<h2>チェックボックスのサンプル-02(角丸)</h2>
		<div class="check-box-02">
			<label for="check02-01">
				<input type="checkbox" name="check02" id="check02-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="check02-02">
				<input type="checkbox" name="check02" id="check02-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="check02-03">
				<input type="checkbox" name="check02" id="check02-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="check02-04">
				<input type="checkbox" name="check02" id="check02-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
		<!-- チェックボックスのサンプル-03(青色) -->
		<h2>チェックボックスのサンプル-03(青色)</h2>
		<div class="check-box-03">
			<label for="check03-01">
				<input type="checkbox" name="check03" id="check03-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="check03-02">
				<input type="checkbox" name="check03" id="check03-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="check03-03">
				<input type="checkbox" name="check03" id="check03-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="check03-04">
				<input type="checkbox" name="check03" id="check03-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.10.2 radio-1

(1) 説明

  • フォーム要素であるラジオボタンのカスタマイズ型式です。

(2) 表示形式

  • クリックしてラジオボタンのチェック有無を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
  • 08-text/a2-radio-1
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタンのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* ラジオボタンの設定 */
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;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.2em;
	}
}

html {
	font-size: 16px;
}

/* ラジオボタンのサンプル-01(丸) */
.radio-button-01 label {
	display: block;
	width: 100%;
}
.radio-button-01 label input {
	display: none;
}
.radio-button-01 label span {
	display: block;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0.3em 0em 0.3em 1.6em;
	position: relative;
}
@media screen and (max-width: 760px) {
	.radio-button-01 label span {
		font-size: 1.2em;
	}
}
.radio-button-01 label span::before {
	content: "";
	height: 1em;
	width: 1em;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0.05em;
	border-radius: 1em;
	border: 1px #666 solid;
	box-sizing: border-box;
}
.radio-button-01 label input:checked + span::before {
	border: 2px #666 solid;
}
.radio-button-01 label:hover input + span::before {
	border: 2px #666 solid;
}
.radio-button-01 label input:checked + span::after {
	content: "";
	height: 0.6em;
	width: 0.6em;
	display: inline-block;
	position: absolute;
	left: 0.2em;
	top: 0.25em;
	border-radius: 1em;
	background: #666;
	box-sizing: border-box;
}

/* ラジオボタンのサンプル-02(灰色) */
.radio-button-02 label {
	display: block;
	width: 100%;
}
.radio-button-02 label input {
	display: none;
}
.radio-button-02 label span {
	font-size: 1.4rem;
	position: relative;
}
@media screen and (max-width: 760px) {
	.radio-button-02 label span {
		font-size: 1.2em;
	}
}
.radio-button-02 label span::before {
	content: "";
	display: inline-block;
	width: 1.0em;
	height: 1.0em;
	margin-right: 0.6em;
	margin-top: -0.2em;
	background: #eee;
	border: 1px #888 solid;
	border-radius: 1em;
	vertical-align: middle;
	box-sizing: border-box;
}
.radio-button-02 label input:checked + span::before {
	border: 2px #888 solid;
	background: #666;
}
.radio-button-02 label:hover input + span::before {
	border: 2px #888 solid;
	background: #666;
}
.radio-button-02 label input:checked + span::after {
	border: 2px #888 solid;
	background: #666;
}

/* ラジオボタンのサンプル-03(青色) */
.radio-button-03 label {
	display: block;
	width: 100%;
}
.radio-button-03 label input {
	display: none;
}
.radio-button-03 label span {
	font-size: 1.4rem;
	position: relative;
}
@media screen and (max-width: 760px) {
	.radio-button-03 label span {
		font-size: 1.2em;
	}
}
.radio-button-03 label span::before {
	content: "";
	display: inline-block;
	width: 1.0em;
	height: 1.0em;
	margin-right: 0.6em;
	margin-top: -0.2em;
	background: #d0deff;
	border: 1px #888 solid;
	border-radius: 1em;
	vertical-align: middle;
	box-sizing: border-box;
}
.radio-button-03 label input:checked + span::before {
	border: 2px #779ffd solid;
	background: #779ffd;
}
.radio-button-03 label:hover input + span::before {
	border: 2px #779ffd solid;
	background: #779ffd;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
	<!-- ラジオボタンの定義 -->
	<div class="wrapper">
		<!-- ラジオボタンのサンプル-01(丸) -->
		<h2>ラジオボタンのサンプル-01(丸)</h2>
		<div class="radio-button-01">
			<label for="radio01-01">
				<input type="radio" name="radio01" id="radio01-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="radio01-02">
				<input type="radio" name="radio01" id="radio01-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="radio01-03">
				<input type="radio" name="radio01" id="radio01-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="radio01-04">
				<input type="radio" name="radio01" id="radio01-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
		<!-- ラジオボタンのサンプル-02(灰色) -->
		<h2>ラジオボタンのサンプル-02(灰色)</h2>
		<div class="radio-button-02">
			<label for="radio02-01">
				<input type="radio" name="radio02" id="radio02-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="radio02-02">
				<input type="radio" name="radio02" id="radio02-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="radio02-03">
				<input type="radio" name="radio02" id="radio02-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="radio02-04">
				<input type="radio" name="radio02" id="radio02-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
		<!-- ラジオボタンのサンプル-03(青色) -->
		<h2>ラジオボタンのサンプル-03(青色)</h2>
		<div class="radio-button-03">
			<label for="radio03-01">
				<input type="radio" name="radio03" id="radio03-01" value="1">
				<span>チェック項目-01</span>
			</label>
			<label for="radio03-02">
				<input type="radio" name="radio03" id="radio03-02" value="2" checked>
				<span>チェック項目-02(初期チェック)</span>
			</label>
			<label for="radio03-03">
				<input type="radio" name="radio03" id="radio03-03" value="3">
				<span>チェック項目-03</span>
			</label>
			<label for="radio03-04">
				<input type="radio" name="radio03" id="radio03-04" value="4">
				<span>チェック項目-04</span>
			</label>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P8.11 プログレスバー

P8.11.1 プログレスバー-1

(1) 説明

  • 進捗状況などを表示するためのプログレスバーです。

(2) 表示形式

  • プログレスバーの表示形式を確認してください。

別画面で表示

(3) 使用機能

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

(4) 実装手順

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

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 08-text/b1-progressbar-1
    • index.html
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログレスバーのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)(※2) ▼▼▼ */
/* プログレスバーの設定 */
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;
}
@media screen and (max-width: 760px) {
	h2 {
		font-size: 1.2em;
	}
}

/* プログレスバーのサンプル-01(progressタグ) */
.progress-01 progress {
	width: 100%;
	height: 3rem;
}

/* プログレスバーのサンプル-01(progressタグ/ラベル付き) */
.progress-02 label {
	display: inline-block;
	width: 100px;
	font-size: 1.5rem;
	vertical-align: top;
	padding-top: 7px;
}
.progress-02 progress {
	width: calc(100% - 100px - 6px);
	height: 3rem;
}

/* プログレスバーのサンプル-03(HTML/CSSで作成) */
.progress-03 div.indicator-txt {
	display: flex;
	justify-content: space-between;
}
.progress-03 div.indicator-txt div {
	position: relative;
	width: 48px;
	text-align: center;
}
.progress-03 div.indicator-txt div::before {
	content: "";
	width: 5px;
	height: 5px;
	position: absolute;
	right: 22px;
	bottom: -14px;
	border-radius: 5px;
	background: #fff;
	z-index: 1;
}
.progress-03 div.indicator-bar {
	width: 95%;
	padding-right: 8px;
	margin: 4px auto 0 auto;
	height: 14px;
	background: #ccc;
}
.progress-03 div.indicator-bar .active-bar {
	height: 14px;
	background: #666;
	position: relative;
}
.progress-03 div.indicator-bar .active-bar::after {
	content: "";
	width: 17px;
	height: 17px;
	position: absolute;
	right: -14px;
	bottom: -4px;
	border-radius: 17px;
	background: #666;
	border: 2px #fff solid;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)(※3) ▼▼▼ -->
	<!-- プログレスバーの定義 -->
	<div class="wrapper">
		<!-- サンプル-01(progressタグ) -->
		<h2>サンプル-01(progressタグ)</h2>
		<div class="progress-01">
			<progress value="0.7" max="1" title="プログレスバーのサンプル"><progress>
		</div>
		<!-- サンプル-02(progressタグ/ラベル付き) -->
		<h2>サンプル-02(progressタグ/ラベル付き)</h2>
		<div class="progress-02">
			<label for="install">進捗状況</label>
			<progress id="install" value="0.7" max="1" title="プログレスバーのサンプル"><progress>
		</div>
		<!-- サンプル-03(HTML/CSSで作成) -->
		<h2>サンプル-03(HTML/CSSで作成)</h2>
		<div class="progress-03">
			<div class="indicator-txt">
				<div>0%</div>
				<div>25%</div>
				<div>50%</div>
				<div>75%</div>
				<div>100%</div>
			</div>
			<div class="indicator-bar">
				<div class="active-bar" style="width: 40%"></div>
			</div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

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