コピペで簡単!CSSで作る見出しデザイン34選

シンプルな見出しデザイン

下線

h1 {
	padding-bottom: .5em; /*下の余白*/
	border-bottom: solid 3px #ff5a5f; /*下線(線種 太さ 色)*/
}

二重下線

h1 {
	padding-bottom: .5em; /*下の余白*/
	border-bottom: double 5px #ff5a5f; /*下線(線種 太さ 色)*/
}

上下線

h1 {
	padding: .5em 0; /*上下の余白*/
	border-top: solid 3px #ff5a5f; /*上線(線種 太さ 色)*/
	border-bottom: solid 3px #ff5a5f; /*下線(線種 太さ 色)*/
}

背景色

見出し文字にシンプルな背景色を重ねたスタイルです。

h1 {
	padding: .5em .75em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
}

下線+背景色

h1 {
	padding: .5em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	border-bottom: solid 3px #ff5a5f; /*下線(線種 太さ 色)*/
}

左線+背景色

h1 {
	padding: .5em .5em .5em 1em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	border-left: solid 6px #ff5a5f; /*左線(線種 太さ 色)*/
}

下線+左線+背景色

h1 {
	padding: .5em .5em .5em 1em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	border-bottom: solid .1em #ff5a5f; /*下線(線種 太さ 色)*/
	border-left: solid .5em #ff5a5f; /*下線(線種 太さ 色)*/
}

背景色+影

h1 {
	padding: .5em .75em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,.2); /*影*/
}

背景色+影(内側)

h1 {
	padding: .5em .75em; /*上下左右の余白*/
	background-color: #ffe6e6; /*背景色*/
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,.2) inset; /*影*/
}

枠線

h1 {
	padding: .5em; /*上下左右の余白*/
	border: solid .1em #ff5a5f; /*枠線(線種 太さ 色)*/
}

枠線+角丸

h1 {
	padding: .5em 1em; /*上下左右の余白*/
	border: solid .1em #ff5a5f; /*線(線種 太さ 色)*/
	border-radius: 1em; /*角丸*/
}

ポップな見出しデザイン

吹き出し

h1 {
	position: relative;
	padding: .5em;
	background-color: #ffe6e6;
}
h1:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-top: 15px solid #ffe6e6;
}

吹き出し(内側に影)

box-shadowを使って吹き出しの内側に影をつけるスタイルです。吹き出しが凹んでいるように見えます。

h1 {
	position: relative;
	padding: .5em;
	background-color: #ffe6e6;
	box-shadow: 2px 2px 4px rgba(0,0,0,.2) inset;
}
h1:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-top: 15px solid #ffe6e6;
}

ステッチ風

h1 {
	padding: .5em;
	background-color: #ffe6e6;
	border: dashed 1px #ff5a5f;
	box-shadow: 0 0 0 5px #ffe6e6;
 }

紙の端を折り返したドッグイヤー風

h1 {
	position: relative;
	background-color: #ffe6e6;
	padding: .5em 1em;
}
h1:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #ff5a5f;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

ページカール

h1 {
	position: relative;
	padding: .5em 1em;
	background-color: #ffe6e6;
}
h1::before,
h1::after {
	position: absolute;
	bottom: 8px;
	content: '';
	width: 30%;
	height: 50%;
	box-shadow: 0 10px 15px rgba(0,0,0,.2);
	z-index: -1;
}
h1::before {
	-webkit-transform: rotate(-3deg);
	left: .3em;
	transform: rotate(-3deg);
}
h1::after {
	-webkit-transform: rotate(3deg);
	right: .3em;
	transform: rotate(3deg);
}

リボン風

h1 {
	position: relative;
	padding: .5em;
	background-color: #ffe6e6;
}
h1::before,
h1::after {
	position: absolute;
	content: '';
	top: 100%;
	border-style: solid;
	border-color: transparent;
}
h1::before {
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #ff5a5f;
}
h1::after {
	right: 0;
	border-width: 15px 15px 0 0;
	border-top-color: #ff5a5f;
}

タグ風

h1 {
	padding: .5em;
	background: #ffe6e6;
}
h1:before {
	content: '●';
	margin-right: .5em;
	color: #fff;
}

蛍光マーカー風

h1 {
	background: linear-gradient(transparent 70%, #ffe6e6 70%);
}

途中で色が変わる下線

h1 {
	position: relative;
	padding-bottom: .5em;
	border-bottom: solid 3px #ffe6e6;
}
h1:after {
	position: absolute;
	bottom: -3px;
	content: " ";
	display: block;
	width: 20%;
	border-bottom: solid 3px #ff5a5f;
}

ストライプ柄の背景

h1 {
	padding: .5em;
	background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 3px,#ffe6e6 3px, #ffe6e6 7px);
	background: repeating-linear-gradient(-45deg, #fff, #fff 3px,#ffe6e6 3px, #ffe6e6 7px);
}

ストライプ柄の下線

h1 {
	position: relative;
}
h1:after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7px;
	background: -webkit-repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 2px, #fff 2px, #fff 4px);
	background: repeating-linear-gradient(-45deg, #ffe6e6, #ffe6e6 2px, #fff 2px, #fff 4px);
}

水玉模様の背景

h1 {
	padding: .5em .75em;
	background-color: #fff;
	background-image: radial-gradient(#ffe6e6 10%, transparent 20%), radial-gradient(#ffe6e6 10%, transparent 20%);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}	

中央に短い下線

h1 {
	position: relative;
	margin-bottom: 1em;
	text-align: center;
}
h1:before {
	position: absolute;
	display: inline-block;
	content: '';
	bottom: -15px;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #ff5a5f;
	border-radius: 2px;
}

スラッシュで挟む

h1 {
	position: relative;
	display: inline-block;
	padding: 0 2.5em;
}
h1:before,
h1:after {
	position: absolute;
	display: inline-block;
	content: '';
	top: 50%;
	width: 44px;
	height: 2px;
	background-color: #000;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
h1:before {
	left:0;
}
h1:after {
	right: 0;
}

大括弧

h1 {
	position: relative;
	display: inline-block;
	top:0;
	padding: .25em 1em;
}
h1:before,
h1:after { 
	position: absolute;
	display: inline-block;
	top: 0;
	content:'';
	width: 8px;
	height: 100%;
}
h1:before {
	left: 0;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	border-left: solid 1px #000;
}
h1:after {
	right: 0;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}

1文字目のみ拡大

h1:first-letter {
	margin-right: .1em;
	font-size: 2em;
}

枠線+左にアクセント

見出しを枠線で囲い、見出しの左側にアクセントで短い線をデザインします。

h1 {
	position: relative;
	padding: .75em 1em .75em 1.5em;
	border: 1px solid #ff5a5f;
}
h1::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #ff5a5f;
	border-radius: 4px;
}

サブタイトル+下線

見出しにサブタイトルをつけるスタイルです。
下線を引くことでデザインに締まりがでます。

<h1><span>Subtitle text</span>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #000;
}
h1 span {
	display: block;
	color: #888;
	font-size: .75em;
}

立体的なボックス

h1 {
	position: relative;
	margin-top: 1em;
	padding: .5em;
	background: #ffe6e6;
}
h1:before {
	position: absolute;
	content: "";
	top: -16px;
	left: 0;
	width: -webkit-calc(100% - 16px);
	width: calc(100% - 16px);
	height: 0;
	border: solid 8px transparent;
	border-bottom-color: #ffd9d9;
}

グラデーションを使った見出しデザイン

グラデーションの下線

h1:after {
	display: block;
	content: "";
	margin-top: .5em;
	height: 4px;
	background: -webkit-linear-gradient(to right, #ff5a5f, transparent);
	background: linear-gradient(to right, #ff5a5f, transparent);
}

グラデーションの背景

h1 {
	padding: .5em .75em;
	background: -webkit-linear-gradient(to right, #ff5a5f, #ffe6e6);
	background: linear-gradient(to right, #ff5a5f, #ffe6e6);
}

アイコンを使った見出しデザイン

円を重ねたアイコン

h1 {
	position: relative;
	padding: 0 .5em .5em 2em;
	border-bottom: 1px solid #ff5a5f;
}
h1::before,
h1::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
h1::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	background-color: rgba(255,90,95,.5);
	z-index: 2;
}
h1::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background-color: rgba(255,90,95,.2);
}

ダイヤアイコン

h1 {
	position: relative;
	padding: 0 .5em .5em 1.7em;
	border-bottom: 1px solid #ff5a5f;
}
h1::after {
	position: absolute;
	top: .4em;
	left: .4em;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #ff5a5f;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 2;
}

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。