見出しいろいろ

ブログなどの見出し

heading00 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading00 violet">heading00 CSS見出しデザイン</h2>


h2.heading00 {
	position: relative;
	padding-left: .5em;
	}
h2.heading00::before {
	content: '';
	position: absolute;
	z-index:-2;
	left: -.1rem;
	bottom: 1rem;
	width: 100%;
	height: 1.5rem;
	}
.heading00.violet::before {
	background: repeating-linear-gradient(-45deg, rgba(218,112,214,.4), rgba(218,112,214,.4) 2px, #fff 2px, #fff 4px);
	}

CLOSE

heading01 CSS見出しデザイン

内容の見出し

内容内容内容内容内容内容
ソースはここをクリック

<h2 class="heading01">heading01 CSS見出しデザイン</h2>
<div class="heading01-box">
	<h3>内容の見出し</h3>
	内容内容内容内容内容内容
</div>


.heading01-box {
	margin: -3rem auto 2rem 2rem;
	padding: 1rem;
	padding-top: 3rem;
	border: 1px solid #ccc;
	}
.heading01-box h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	}
h2.heading01 {
	position: relative;
	padding: 0.5em;
	background: #db7093;
	color: white;
	}
h2.heading01::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
	}

CLOSE

heading02 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading02">heading02 CSS見出しデザイン</h2>


h2.heading02 {
	position: relative;
	padding-left: 25px;
	}
h2.heading02:before {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 0;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 15px transparent;
	border-bottom: solid 15px rgb(119, 195, 223);
	}
h2.heading02:after {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 10px;
	width: 100%;
	border-bottom: solid 3px rgb(119, 195, 223);
	}

CLOSE

heading03 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading03">heading03 CSS見出しデザイン</h2>


h2.heading03 {
	position: relative;
	color: #158b2b;
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
	margin: 1.5em 0;
	}
h2.heading03:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border-left-color: transparent;
	border-right-color: transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	}

CLOSE

heading04 CSS見出しデザイン

ソースはここをクリック ※ Firefox で非対応

<h2 class="heading04">heading04 CSS見出しデザイン</h2>


h2.heading04 {
	position: relative;
	color: #6eb0f9;
	line-height: 1.4;
	-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
	}

CLOSE

heading05 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading05">heading05 CSS見出しデザイン</h2>


h2.heading05 {
	position: relative;
	padding: 0.6em;
	background: #e0edff;
	border-radius: 5px;
	}
h2.heading05:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #e0edff;
	width: 0;
	height: 0;
	}

CLOSE

heading06 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading06">heading06 CSS見出しデザイン</h2>


h2.heading06 {
	position: relative;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
	}
h2.heading06:after {
	position: absolute;
	content: '';
	left: -7px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #a8d4ff #fff; /* 最後の#fffの部分はページの地色にする*/
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
	}

CLOSE

heading07 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading07">heading07 CSS見出しデザイン</h2>


h2.heading07 {
	position: relative;
	padding: 5px 26px 5px 42px;
	background: #fff0d9;
	font-size: 20px;
	color: #2d2d2d;
	margin-left: -20px;
	line-height: 1.3;
	border-bottom: solid 3px orange;
	z-index:-2;
	}
h2.heading07:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -2px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
	z-index: -1;
	}
h2.heading07:after {
	position: absolute;
	content: '';
	right: -3px;
	top: -7px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 40px transparent;
	border-bottom: solid 79px white;
	z-index: -1;
	}

CLOSE

heading08 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading08"><span>heading08 CSS見出しデザイン</span></h2>


h2.heading08 {
	position: relative;
	height: 60px;
	line-height: 60px;
	margin: 2em 50px 1em;
	padding: 0 2rem;
	text-align: center;
	color: #fff;
	background: #fa4141;
	}
h2.heading08:before,
h2.heading08:after {
	position: absolute;
	top: 0;
	display: block;
	height: 48px;
	content: '';
	border: 30px solid #fa4141;
	}
h2.heading08:before {
	left: -40px;
	border-left-width: 15px;
	border-left-color: transparent;
	}
h2.heading08:after {
	right: -40px;
	border-right-width: 15px;
	border-right-color: transparent;
	}
h2.heading08 span {
	position: relative;
	display: block;
	}

CLOSE

heading09 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading09"><span>heading09 CSS見出しデザイン</span></h2>


h2.heading09 {
	position: relative;
	margin: 30px;
	text-align: center;
	}
h2.heading09:before,
h2.heading09:after {
	position: absolute;
	z-index: 0;
	bottom: -10px;
	display: block;
	content: '';
	border: 30px solid #d90606;
	}
h2.heading09:before {
	left: -35px;
	border-left-width: 15px;
	border-left-color: transparent;
	}
h2.heading09:after {
	right: -35px;
	border-right-width: 15px;
	border-right-color: transparent;
	}
h2.heading09 span {
	position: relative;
	z-index: 1;
	display: block;
	padding: 1rem 2rem;
	color: #fff;
	background: #fa4141;
	}
h2.heading09 span:before,
h2.heading09 span:after {
	position: absolute;
	bottom: -10px;
	display: block;
	width: 10px;
	height: 10px;
	content: '';
	border-style: solid;
	border-color: #660606 transparent transparent transparent;
	}
h2.heading09 span:before {
	left: 0;
	border-width: 10px 0 0 10px;
}
h2.heading09 span:after {
	right: 0;
	border-width: 10px 10px 0 0;
	}

CLOSE

10heading10 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading10"><span><i>10</i></span>heading10 CSS見出しデザイン</h2>


h2.heading10 {
	position: relative;
	padding: 1rem 2rem 1rem 4em;
	background: #eee;
	}
h2.heading10 span {
	position: absolute;
	top: -10px;
	left: 18px;
	display: inline-block;
	width: 60px;
	height: 65px;
	text-align: center;
	background: transparent;
	}
h2.heading10 span:before,
h2.heading10 span:after {
	position: absolute;
	content: '';
	}
h2.heading10 span:before {
	right: -13px;
	width: 0;
	height: 0;
	border-right: 13px solid transparent;
	border-bottom: 13px solid #666;
	}
h2.heading10 span:after {
	top: 0px;
	left: 1px;
	display: block;
	height: 65px;
	border: 3rem solid #c00;
	border-bottom-width: 15px;
	border-bottom-color: transparent;
	}
h2.heading10 span i {
	position: relative;
	z-index: 1;
	font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif;
	color: #fff;
	}

CLOSE

heading11 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading11">heading11 ブログなどの見出し</h2>


h2.heading11 {
	padding: 1.65rem 2rem;
	background-color: rgba(165, 210, 255, .4);
	background-image:
	  linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
	  linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
	background-size: 40px 40px;
	}

CLOSE

heading11a CSS見出しデザイン

ソースはここをクリック

<h2 class="heading11a">heading11a ブログなどの見出し</h2>


h2.heading11a {
	padding: 1.65rem 2rem;
	color: #e5004f;
	background-color: transparent;
	background-image:
	  linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
	  linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	}

CLOSE

heading12 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading12">heading12 ブログなどの見出し</h2>


h2.heading12 {
	padding: 1.65rem 2rem;
	color: #22ac38;
	background-color: transparent;
	background-image:	linear-gradient(45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9), 
						linear-gradient(-45deg, #dfeeb9 25%, transparent 25%, transparent 75%, #dfeeb9 75%, #dfeeb9);
	background-size: 24px 24px;
	}

CLOSE

01heading13 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading13"><span>01</span>heading13 CSS見出しデザイン</h2>


h2.heading13 {
	position: relative;
	overflow: hidden;
	padding: 1.5rem 2rem 1.5rem 130px;
	border: 2px solid #000;
	}
h2.heading13:before {
	position: absolute;
	top: -150%;
	left: -100px;
	width: 200px;
	height: 300%;
	content: '';
	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);
	background: #000;
	}
h2.heading13 span {
	font-size: 4rem;
	font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif;
	font-weight: bold;
	color: #fff;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	padding-top: 3px;
	padding-left: 16px;
	}

CLOSE

heading14 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading14">heading14 ブログなどの見出し</h2>


h2.heading14 {
	position: relative;
	padding: 1rem 2rem;
	border: 3px solid #000;
	}
h2.heading14:before {
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: .1em;
	position: absolute;
	top: -24px;
	left: -3px;
	height: 24px;
	padding: 0 1em;
	content: 'POINT';
	color: #fff;
	background: #000;
	}

CLOSE

heading14a CSS見出しデザイン

ソースはここをクリック

<h2 class="heading14a">heading14a ブログなどの見出し</h2>


h2.heading14a {
	position: relative;
	border-top: solid 2px #80c8d1;
	border-bottom: solid 2px #80c8d1;
	background: #f4f4f4;
	line-height: 1.4;
	padding: 0.4em 0.5em;
	margin: 2em 0 0.5em;
	}
h2.heading14a:after {
	font-size: 1.5rem !important;
	font-weight: bold;
	letter-spacing: .1em;
	position: absolute;
	font-family: 'Material Symbols Outlined';
	content: '\e5ca POINT';
	background: #80c8d1;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 5px 7px 3px;
	font-size: 0.8em;
	line-height: 1;
	}

CLOSE

heading15 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading15">heading15 ブログなどの見出し</h2>


h2.heading15 {
	position: relative;
	padding: 1rem 2rem calc(1rem + 10px);
	background: #87ceeb;
	}
h2.heading15:before {
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100%;
	height: 100%;
	content: '';
	border: 4px solid #000;
	}

CLOSE

heading16 CSS見出しデザイン

ソースはここをクリック

<h2 class="heading16">heading16 ブログなどの見出し</h2>


h2.heading16 {
	border-bottom: solid 4px #cce4ff;
	position: relative;
	}
h2.heading16:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 4px #5472cd;
	bottom: -4px;
	width: 20%;
	}

CLOSE

NEW

heading17 CSS見出しデザイン

ソースはここをクリック

<div class="heading17-wrapper">
	<div class="heading17-content">
		<span class="heading17">NEW</span>
	</div>
	<h2>heading17 CSS見出しデザイン</h2>
</div>


.heading17-wrapper {
	display: block;
	position: relative;
	margin: 1rem auto;
	padding: .1rem 1rem 1.5rem;
	width: 100%;
	height: 10rem;
	background: #f1f1f1;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
	}
.heading17-content {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 89px;
	height: 91px;
	overflow: hidden;
	}
.heading17 {
	display: inline-block;
	position: absolute;
	padding: 7px 0;
	left: -23px;
	top: 22px;
	width: 160px;
	text-align: center;
	font-size: 18px;
	line-height: 16px;
	background: #ffa520;
	color: #fff;
	letter-spacing: 0.05em;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
.heading17:before,
.heading17:after {
	position: absolute;
	content: "";
	border-top: 4px solid #b2751b;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	bottom: -4px;
	}
.heading17:before {
	left: 14px;
	}
.heading17:after {
	right: 18px;
	}
.heading17-wrapper h2 {
	margin-top: 2rem;
	}

CLOSE


TOP