HTML-CSS入門講座

濱屋太郎

WebParts-7
背景・枠パーツ

目次

P7.1 はじめに

P7.1.1 概要

  • 「背景・枠パーツ」は、背景や枠(フレーム)などのサンプルを中心に説明します。
  • 「背景・枠パーツ」で説明している機能は、以下の通りです。
(1) 背景
背景のサンプルを表示します。
(2) 枠(フレーム)
枠(フレーム)のサンプルを表示します。
(2) リボン
リボンのサンプルを表示します。

P7.2 背景・枠(背景)

P7.2.1 背景(星空)

(1) 説明

  • 星空をイメージした背景です。CSSだけで実現しています。

(2) 表示形式

  • リロードして星空を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

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

HTML(index.html)


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

/* ▼▼▼ CSS(ここから)▼▼▼ */
/* 背景(流れ星)の設定 */
.wrapper {								/* 星空の枠 */
	width: 100%;
	height: 200px;
	background: rgb(93,96,115);
	background: linear-gradient(0deg, rgba(93,96,115,1) 0%, rgba(6,8,14,1) 100%);
	position: relative;
	overflow: hidden;
}
svg {
	vertical-align: top;
}
@keyframes star-key1 {					/* 時計回りの星 */
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes star-key2 {					/* 反時計回りの星 */
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
@keyframes star-key3 {					/* 流れ星 */
	0% {
		transform: rotate(0deg);
		top: -20px;
		left: 20%;
		width: 12px;
		height: 12px;
	}
	100% {
		transform: rotate(720deg);
		top: 100%;
		leFt: 90%;
		width: 30px;
		height: 30px;
	}
}
@keyframes mes-key1 {					/* 左下のメッセージ */
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.star01 {								/* 星-01 */
	position: absolute;
	top: 20%;
	left: 10%;
	width: 20px;
	height: 20px;
	animation: star-key2 8s linear 0s infinite;
}
.star02 {								/* 星-02 */
	position: absolute;
	top: 50%;
	left: 15%;
	width: 14px;
	height: 14px;
	animation: star-key1 4s linear 0s infinite;
}
.star03 {								/* 星-03 */
	position: absolute;
	top: 40%;
	left: 20%;
	width: 16px;
	height: 16px;
	animation: star-key2 10s linear 0s infinite;
}
.star04 {								/* 星-04 */
	position: absolute;
	top: 30%;
	left: 40%;
	width: 16px;
	height: 16px;
	animation: star-key1 4s linear 0s infinite;
}
.star05 {								/* 星-05 */
	position: absolute;
	top: 70%;
	left: 50%;
	width: 16px;
	height: 16px;
	animation: star-key2 4s linear 0s infinite;
}
.star06 {								/* 星-06 */
	position: absolute;
	top: 20%;
	left: 70%;
	width: 20px;
	height: 20px;
	animation: star-key1 8s linear 0s infinite;
}
.star07 {								/* 星-07 */
	position: absolute;
	top: 80%;
	left: 80%;
	width: 10px;
	height: 10px;
	animation: star-key1 2s linear 0s infinite;
}
.star08 {								/* 星-08 */
	position: absolute;
	top: 20%;
	left: 85%;
	width: 14px;
	height: 14px;
	animation: star-key1 4s linear 0s infinite;
}
.star09 {								/* 星-09 */
	position: absolute;
	top: 50%;
	left: 90%;
	width: 12px;
	height: 12px;
	animation: star-key2 6s linear 0s infinite;
}
.star10 {								/* 流れ星 */
	position: absolute;
	top: -20px;
	left: 20%;
	width: 12px;
	height:12px;
	animation: star-key3 10s ease-in 0s infinite;
}
.mes {
	position: absolute;
	bottom: 10px;
	left: 20px;
	color: #fff;
	font-size: 1.4rem;
	animation: mes-key1 10s ease-in 0s infinite;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- 背景(流れ星)の定義 -->
<!-- ▼▼▼ HTML(ここから)▼▼▼ -->
	<div class="wrapper">
		<div class="star01">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star02">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star03">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star04">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star05">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star06">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star07">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star08">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star09">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<div class="star10">
			<svg viewbox="0 0 94 94"><polygon points="47,0 17,94 92,34 2,34 77,94" style="fill: #CC0;"></svg>
		</div>
		<p class="mes">流れ星に願いを!</p>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>

P7.2.2 背景(海中散歩)

(1) 説明

  • クラゲの海中散歩をイメージした背景です。CSSだけで実現しています。

(2) 表示形式

  • リロードしてクラゲの海中散歩を確認してください。

リロード  別画面で表示

(3) 使用機能

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

(4) ソースコード

ソースコード表示
■ ファイル配置
  • background-main-02
    • index.html
    • images
      • konbu1.png
      • konbu2.png
      • kurage1.png

HTML(index.html)


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

/* ▼▼▼ CSS(ここから)▼▼▼ */
/* 背景(クラゲの散歩)の設定 */
.wrapper {
	width: 100%;
	height: 200px;
	background: rgb(0,0,36);
	background: linear-gradient(0deg, rgb(0,0,36) 0%, rgb(9,77,121) 60%, rgb(0,212,255) 100%);
	position: relative;
	overflow: hidden;
}
@keyframes kurage-key1 {				/* クラゲのアニメーション */
	0% {
		top: 0%;
		left: -70px;
		transform: scale(0.9, 1.1);
	}
	10% {
		top: 10%;
		left: 0%;
		transform: scale(1.1, 0.9);
	}
	20% {
		top: 20%;
		left: 11%;
		transform: scale(0.9, 1.1);
	}
	30% {
		top: 10%;
		left: 22%;
		transform: scale(1.1, 0.9);
	}
	40% {
		top: 40%;
		left: 33%;
		transform: scale(0.9, 1.1);
	}
	50% {
		top: 20%;
		left: 44%;
		transform: scale(1.1, 0.9);
	}
	60% {
		top: 5%;
		left: 55%;
		transform: scale(0.9, 1.1);
	}
	70% {
		top: 20%;
		left: 66%;
		transform: scale(1.1, 0.9);
	}
	80% {
		top: 30%;
		left: 77%;
		transform: scale(0.9, 1.1);
	}
	90% {
		top: 20%;
		left: 88%;
		transform: scale(1.1, 0.9);
	}
	100% {
		top: 10%;
		left: 100%;
		transform: scale(0.9, 1.1);
	}
}
.kurage01 {								/* クラゲ */
	position: absolute;
	top: 20px;
	left: 20px;
	width: 70px;
	animation: kurage-key1 20s linear 0s infinite;
}
@keyframes konbu-key1 {					/* 昆布アニメーション */
	from {
		transform: rotate(-15deg);
	}
	to {
		transform: rotate(15deg);
	}
}
.konbu01 {								/* 昆布	1 */
	position: absolute;
	bottom: 0px;
	right: 25%;
	width: 25px;
	transform-origin: 50% bottom;
	animation: konbu-key1 3s linear 0s alternate infinite;
}
.konbu02 {								/* 昆布2 */
	position: absolute;
	bottom: 0px;
	right: 22%;
	width: 20px;
	transform-origin: 50% bottom;
	animation: konbu-key1 3s linear 0s alternate infinite;
}
.konbu03 {								/* 昆布3 */
	position: absolute;
	bottom: 0px;
	right: 19%;
	width: 20px;
	transform-origin: 50% bottom;
	animation: konbu-key1 3s linear 0s alternate infinite;
}
.konbu04 {								/* 昆布4 */
	position: absolute;
	bottom: 0px;
	right: 16%;
	width: 25px;
	transform-origin: 50% bottom;
	animation: konbu-key1 3s linear 0s alternate infinite;
}
@keyframes bubble-key1 {				/* 泡1 */
	from {
		bottom: -1%;
	}
	to {
		bottom: 105%;
	}
}
.bubble01 {
	position: absolute;
	right: 24%;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	animation: bubble-key1 5s linear 0s infinite;
}
@keyframes bubble-key2 {				/* 泡2 */
	from {
		bottom: -5%;
	}
	to {
		bottom: 101%;
	}
}
.bubble02 {
	position: absolute;
	right: 21%;
	width: 7px;
	height: 7px;
	background: #fff;
	border-radius: 50%;
	animation: bubble-key2 5s linear 0s infinite;
}
@keyframes bubble-key3 {				/* 泡3 */
	from {
		bottom: -2%;
	}
	to {
		bottom: 104%;
	}
}
.bubble03 {
	position: absolute;
	right: 19%;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 50%;
	animation: bubble-key3 5s linear 0s infinite;
}
@keyframes mes-key1 {					/* メッセージ */
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.mes {
	position: absolute;
	bottom: 10px;
	left: 20px;
	color: #fff;
	font-size: 1.4rem;
	animation: mes-key1 20s ease-in 0s infinite;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)▼▼▼ -->
	<!-- 背景(クラゲの散歩)の定義 -->
	<div class="wrapper">
		<div class="konbu01"><img src="images/konbu1.png" alt="昆布1"></div>
		<div class="konbu02"><img src="images/konbu2.png" alt="昆布2"></div>
		<div class="konbu03"><img src="images/konbu1.png" alt="昆布3"></div>
		<div class="konbu04"><img src="images/konbu2.png" alt="昆布4"></div>
		<div class="bubble01"></div>
		<div class="bubble02"></div>
		<div class="bubble03"></div>
		<div class="kurage01"><img src="images/kurage1.png" alt="クラゲ"></div>
		<div class="kurage01"><img src="images/kurage1.png" alt="クラゲ"></div>
		<p class="mes">クラゲの海中散歩</p>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

</body>
</html>
■ 画像
  • 昆布 その1 (konbu1.png:昆布 その1)
  • 昆布 その2 (konbu2.png:昆布 その2)
  • クラゲ (kurage1.png:クラゲ)

P7.3 枠(フレーム)

P7.3.1 枠(フレーム)

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

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

HTML(index.html)


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

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)▼▼▼ */
/* 枠サンプル-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;
}
.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;
}
.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;
}
/* 枠サンプル-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;
}
/* 枠サンプル-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;
}
.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;
}
/* 枠サンプル-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;
}
/* 枠サンプル-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;
}
/* 枠サンプル-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;
}
/* 枠サンプル-10(大き目のドット) */
.frame-10 {								/* 全体のスタイル */
	padding: 20px 10px 20px 30px;
	margin-bottom: 40px;
	font-size: 1.6em;
    background: #ffffe0;
    border: #ffa500 5px dotted;
    color: #333;
}
/* 枠サンプル-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;
}
.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を選択してコピーしてください)▼▼▼ -->
		<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>

P7.4 リボン

P7.4.1 リボン

(1) 説明

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

(2) 表示形式

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

別画面で表示

(3) 使用機能

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

(4) ソースコード

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

HTML(index.html)


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

/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)▼▼▼ */
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* リボンサンプル-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;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

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

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