コピペでできる！CSSとhtmlだけできるちょいとシャレた見出し12選

CSS HTML
 2018.08.02
 2018.08.17

見出し次第で、記事の読みやすさは大きく変わります。
今回はちょいとシャレたデザインの見出しを集めました。
ほんのちょっとの手間でグッといい感じにできちゃいますよ。

紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

ちなみによく出てくる擬似要素の::beforeと::afterって何よ？って方はこちらをご覧ください。

copypet.jp

で？そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの？ | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

copypet.jpでも頻繁に使っている::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。 とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる！知ってる！」ぐらいになるよう説明しておきます。…

copypet.jp

記事を見る

browser:  65 11 20 10 

ちょいとシャレた見出し [12種]

紙をラインで止めたような見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline01">見出しテキスト</h1>
.cp_headline01 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	background: #fffff2;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.cp_headline01::before,
.cp_headline01::after {
	position: absolute;
	width: 0;
	height: 51.95px;
	content: '';
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: #e60012;
}
.cp_headline01::before {
	top: -15px;
	right: 10px;
}
.cp_headline01::after {
	bottom: -15px;
	left: 10px;
}

紙をラインで止めたような見出し2

ニャン易度

見出しテキスト

<h1 class="cp_headline02">見出しテキスト</h1>
.cp_headline02 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	color: #ffffff;
	background: #0d47a1;
	-webkit-box-shadow: 0 1px 1px 0 inset rgba(0, 0, 0, 0.6);
	        box-shadow: 0 1px 1px 0 inset rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.cp_headline02::before,
.cp_headline02::after {
	position: absolute;
	width: 0;
	height: 51.95px;
	content: '';
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	border-width: 0 0 0 4px;
	border-style: double;
	border-color: #4dd0e1;
}
.cp_headline02::before {
	right: 10px;
	bottom: -15px;
}
.cp_headline02::after {
	top: -15px;
	left: 10px;
}

ボックスの中にカギカッコが入った見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline03">見出しテキスト</h1>
.cp_headline03 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border-width: 1px;
	border-style: solid;
	border-color: #ec407a;
}
.cp_headline03::before,
.cp_headline03::after {
	position: absolute;
	width: 10px;
	height: 20px;
	content: '';
	border-width: 1px 0 0 1px;
	border-style: solid;
	border-color: #ec407a;
}
.cp_headline03::before {
	top: 3px;
	left: 3px;
}
.cp_headline03::after {
	right: 3px;
	bottom: 3px;
	-webkit-transform: scale(-1,-1);
	        transform: scale(-1,-1);
}

角丸のカギカッコが入った見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline04">見出しテキスト</h1>
.cp_headline04 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	color: #ffffff;
	border-radius: 8px;
	background-color: #29b6f6;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cp_headline04::before,
.cp_headline04::after {
	position: absolute;
	width: 20px;
	height: 20px;
	content: '';
	border-width: 2px 0 0 2px;
	border-style: solid;
	border-color: #b3e5fc;
	border-radius: 8px 0 0 0;
}
.cp_headline04::before {
	top: 3px;
	left: 3px;
}
.cp_headline04::after {
	right: 3px;
	bottom: 3px;
	-webkit-transform: scale(-1,-1);
	        transform: scale(-1,-1);
}

少々斜めに倒れたボックスの見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline05"><span>見出しテキスト</span></h1>
.cp_headline05 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	-webkit-transform: skewX(-15deg);
	        transform: skewX(-15deg);
	color: #ffffff;
	border-radius: 3px 3px 3px 3px;
	background-color: #ffb300;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cp_headline05 span {
	display: block;
	-webkit-transform: skewX(15deg);
	        transform: skewX(15deg);
}
.cp_headline05::after {
	position: absolute;
	width: 90px;
	height: 20px;
	content: '';
	border-width: 0 1px 2px 0;
	border-style: solid;
	border-color: #ffecb3;
	border-radius: 0 0 3px 0;
}
.cp_headline05::after {
	right: 3px;
	bottom: 3px;
}

風車のパターンを敷いた見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline06">見出しテキスト</h1>
.cp_headline06 {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.8em;
	color: #ffffff;
	background-color: rgba(49,27,146 ,1);
	background-image:
		-webkit-linear-gradient(
		45deg,
		rgba(69,39,160 ,1) 25%, transparent 25%,
		transparent 75%, rgba(69,39,160 ,1) 75%,
		rgba(69,39,160 ,1)),
		-webkit-linear-gradient(
		135deg,
		rgba(69,39,160 ,1) 25%, transparent 25%,
		transparent 75%, rgba(69,39,160 ,1) 75%,
		rgba(69,39,160 ,1));
	background-image:
		linear-gradient(
		45deg,
		rgba(69,39,160 ,1) 25%, transparent 25%,
		transparent 75%, rgba(69,39,160 ,1) 75%,
		rgba(69,39,160 ,1)),
		linear-gradient(
		-45deg,
		rgba(69,39,160 ,1) 25%, transparent 25%,
		transparent 75%, rgba(69,39,160 ,1) 75%,
		rgba(69,39,160 ,1));
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.cp_headline06::before,
.cp_headline06::after {
	position: absolute;
	width: 0;
	height: 51.95px;
	content: '';
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: rgba(156,39,176 ,1);
}
.cp_headline06::before {
	right: 10px;
	bottom: -15px;
}
.cp_headline06::after {
	top: -15px;
	left: 10px;
}

斜めに少しずつ色の違うパターンが重なった見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline07"><span class="cp_headline07_cont">見出しテキスト</span></h1>
.cp_headline07 {
	position: relative;
	overflow: hidden;
	margin-bottom: -8px;
	padding: 12px 14px;
	color: #ffffff;
	background: #4db6ac;
}
.cp_headline07::before,
.cp_headline07::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 100%;
	content: '';
}
.cp_headline07::before {
	-webkit-transform: rotate(1.5deg);
	        transform: rotate(1.5deg);
	-webkit-transform-origin: bottom right;
	        transform-origin: bottom right;
	background: #009688;
}
.cp_headline07::after {
	-webkit-transform: rotate(-2.5deg);
	        transform: rotate(-2.5deg);
	-webkit-transform-origin: bottom left;
	        transform-origin: bottom left;
	background: #00796b;
}
.cp_headline07_cont {
	position: relative;
	z-index: 1;
}

背景をうっすらグローパターンが通り抜ける見出し

ニャン易度

 
見出しテキスト

<h1 class="cp_headline08"><div class="glow">&nbsp;</div>見出しテキスト</h1>
.cp_headline08 {
	line-height: 2em;
	position: relative;
	z-index: 2;
	padding: 0em 0.3em 0em 0.8em;
	color: #f8f8f8;
	background-color: #d81b60;
	background-image:
		-webkit-linear-gradient(
		45deg,
		#c2185b 25%, #c2185b 25%,
		transparent 25%, transparent 75%,
		#c2185b 75%, #c2185b 75%),
		-webkit-linear-gradient(
		135deg,
		#c2185b 25%, #c2185b 25%,
		transparent 25%, transparent 75%,
		#c2185b 75%, #c2185b 75%);
	background-image:
		linear-gradient(
		45deg,
		#c2185b 25%, #c2185b 25%,
		transparent 25%, transparent 75%,
		#c2185b 75%, #c2185b 75%),
		linear-gradient(
		-45deg,
		#c2185b 25%, #c2185b 25%,
		transparent 25%, transparent 75%,
		#c2185b 75%, #c2185b 75%);
	background-size: 10px 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.glow {
	position: absolute;
	z-index: 999;
	width: 40px;
	height: 100%;
	-webkit-transform: skew(20deg);
	        transform: skew(20deg);
	-webkit-animation: flow 3s linear infinite;
	        animation: flow 3s linear infinite;
	border-left: 1px solid #ffffff;
	background: rgb(255,255,255);
	background: -webkit-gradient(
		linear, left top, right top,
		from(rgba(255,255,255,0)),
		color-stop(1%, rgba(255,255,255,0)),
		to(rgba(255,255,255,1)));
	background: -webkit-linear-gradient(
		left, rgba(255,255,255,0) 0%,
		rgba(255,255,255,0) 1%,
		rgba(255,255,255,1) 100%);
	background:linear-gradient(
		to right, rgba(255,255,255,0) 0%,
		rgba(255,255,255,0) 1%,
		rgba(255,255,255,1) 100%);
}
@-webkit-keyframes flow {
	  0% { left: -20%;opacity: 0; }
	 50% { left: 50%;opacity: 0.3; }
	100% { left: 100%;opacity: 0; }
}
@keyframes flow {
	  0% { left: -20%;opacity: 0; }
	 50% { left: 50%;opacity: 0.3; }
	100% { left: 100%;opacity: 0; }
}

テキスト部分とそれ以外の背景を変えてしおりのようにした見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline09"><span>見出しテキスト</span></h1>
.cp_headline09 {
	line-height: 2em;
	position: relative;
	height: 2em;
	color: #f8f8f8;
	border-radius: 4px;
	background-color: #303f9f;
	background-image:
		-webkit-linear-gradient(
		45deg,
		#283593 25%, transparent 25%,
		transparent 50%, #283593 50%,
		#283593 75%, transparent 75%,
		transparent),
		-webkit-linear-gradient(
		135deg,
		#283593 25%, transparent 25%,
		transparent 50%, #283593 50%,
		#283593 75%, transparent 75%,
		transparent);
	background-image:
		linear-gradient(
		45deg,
		#283593 25%, transparent 25%,
		transparent 50%, #283593 50%,
		#283593 75%, transparent 75%,
		transparent),
		linear-gradient(
		-45deg,
		#283593 25%, transparent 25%,
		transparent 50%, #283593 50%,
		#283593 75%, transparent 75%,
		transparent);
	background-size: 10px 10px;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cp_headline09 span {
	display: inline-block;
	padding: 0.01em 0em 0em 0.8em;
	border-radius: 4px 0px 0px 4px;
	background: #4dd0e1;
}
.cp_headline09 span::after {
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 1em 0 1em 1em;
	border-style: solid;
	border-color: transparent transparent transparent #4dd0e1;
}

テキストの後ろに斜線のバーが設置された見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline10"><span>見出しテキスト</span></h1>
.cp_headline10 {
	position: relative;
	height: 0.5em;
	color: #424242;
	background-color: #ffffff;/*背景色と合わせる*/
	background-image:
		-webkit-linear-gradient(135deg,
		#9e9e9e 25%, transparent 25%,
		transparent 50%, #9e9e9e 50%,
		#9e9e9e 75%, transparent 75%,
		transparent);
	background-image:
		linear-gradient(-45deg,
		#9e9e9e 25%, transparent 25%,
		transparent 50%, #9e9e9e 50%,
		#9e9e9e 75%, transparent 75%,
		transparent);
	background-size: 10px 10px;
}
.cp_headline10 span {
	position: absolute;
	display: inline-block;
	margin-top: -0.5em;
	margin-left: 0.8em;
	padding: 0em 0.5em 0em 0.5em;
	background: #ffffff;/*背景色と合わせる*/
}

サブテキスト付きの見出し

ニャン易度

見出しテキストサブテキスト

<h1 class="cp_headline11"><span class="main">見出しテキスト</span><span class="sub">サブテキスト</span></h1>
.cp_headline11 {
	position: relative;
	padding: 0.3em 0em;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #303f9f;
}
.cp_headline11 span.main {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.5em;
	color: #f8f8f8;
	background-color: #303f9f;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cp_headline11 span.main::after {
	position: absolute;
	top: 0;
	right: -0.45em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 0.5em 0.5em 0 0;
	border-style: solid;
	border-color: #303f9f transparent transparent transparent;
}
.cp_headline11 span.sub {
	font-size: 0.7em;
	position: absolute;
	right: 0;
	display: inline-block;
	color: #424242;
}
@media screen and (max-width: 480px) {
	.cp_headline11 span.main {
		font-size: 0.8em;
		padding: 0.3em 0.3em 0.5em 0.5em;
	}
	.cp_headline11 span.sub{
		font-size: 0.5em;
	}
}

テキスト部分の背景に影がついたような見出し

ニャン易度

見出しテキスト

<h1 class="cp_headline12"><span>見出しテキスト</span></h1>
.cp_headline12 {
	position: relative;
	padding: 0.3em 0em;
	border-width: 0 0 2px 0;
	border-style: solid;
	border-color: #bdbdbd;
}
.cp_headline12 span {
	position: relative;
	padding: 0.3em 0.3em 0.3em 0.5em;
	color: #f8f8f8;
	border-width: 0 0 2px 0;
	border-style: solid;
	border-color: #424242;
	background-color: #424242;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.cp_headline12 span::after {
	position: absolute;
	top: 0.01em;
	right: -0.49em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 2em 0 0 0.5em;
	border-style: solid;
	border-color: transparent transparent transparent #bdbdbd;
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？