テキスト装飾は、テキストに対する各種の装飾です。
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>下線が伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景が伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>上下の線が伸びて背景になるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>線が伸びて枠になるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>枠のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リボンのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
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 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>
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 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>
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 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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン（波打つ）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン（背景が左右に分かれる）のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.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>
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 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>
（icon-file.png：ファイルアイコン）
（icon-folder.png：フォルダアイコン）HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォルダ・ファイル構成表示のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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="<div class='inner-cap'><p>出現するツールチップです。</p><p>ツールチップ内にHTMLも使えます。</p></div>">ツールチップ</span>が出現します。</p>
<button class="btn tooltip" data-tippy-content="<div class='inner-cap'><p>出現するツールチップです。</p><p>ツールチップ内にHTMLも使えます。</p></div>">ツールチップが出現するボタン</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>
（icon-chk.svg：チェック）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 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>
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 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>
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 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>
