CSSで簡単に作れるおしゃれな見出しデザイン20選

Webデザイン | CSS

2018/01/15 2023/02/13

HTMLとCSSのみで簡単に作れる比較的シンプルな見出しデザインを20例紹介します。コピペで使用する場合はフォントサイズによってマークの位置等がズレてしまいますのでCSSを調整して下さい。

下線をつけた見出し例
マークをつけた見出し例
センターに寄せた見出し例
グラデーションを使った見出し例

下線 (アンダーライン)

タイトルの下にボーダーを引いたシンプルな見出しデザインです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	padding-bottom: 0.3em;
	border-bottom: solid 2px black;
}

下線 (二重線)

タイトルの下に二重線ボーダーを引いた見出しデザインです。縦幅やボーダーラインのサイズ・カラーも変更することができます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding-bottom: 0.5em;
}

h1::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	box-sizing: border-box;
	border-top: 3px solid black;
	border-bottom: 1px solid black;
}

下線 (2トーンカラー)

タイトルの下にツートーンパターンの下ボーダーを引いた見出しデザインです。widthを変更することでツートンの比率を変えることができます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
  	padding-bottom: 0.5em;
  	border-bottom: 4px solid #DDD;
}

h1::after {
	position: absolute;
	content: " ";
	border-bottom: solid 4px #446689;
	bottom: -4px;
	width:10%;
	display: block;
}

下線 (マーカー)

タイトルの下にマーカー(蛍光ペン)で下ボーダーを引いたような見出しデザインです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	padding: 0.2em;
  	background: linear-gradient(transparent 70%, #fff100 70%);
}

マーク (縦ライン)

タイトルの先頭に縦ラインを入れた見出しデザインです。縦ラインはwidthbackground-colorでラインの太さや色をカスタマイズできます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding-left: 0.7em;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:1em;
	background-color: #446689;
}

マーク (縦ライン×下線)

5の見出しデザインに下ボーダーを加えたパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding:0 0 0.5em 0.7em;
	border-bottom: 1px solid black;
}

h1::after {
	position: absolute;
	top: 0.2em;
	left:0;
	content: '';
	width: 5px;
	height:1em;
	background-color: #446689;
}

マーク (縦ライン×枠線)

タイトルの先頭に縦ラインを入れ、さらに枠線(角丸)を加えた見出しデザイン。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding:0.5em 0.5em 0.5em 1.4em;
	border: 1px solid #CCC;
	border-radius: 5px;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0.7em;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:25px;
	background-color: #446689;
}

マーク (縦ライン×背景色)

7の見出しデザインに背景色を付けたパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	color: white;
	padding:0.5em 0.5em 0.5em 1.4em;
	background-color: #446689;
	border-radius: 5px;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0.7em;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:25px;
	background-color:white;
}

マーク (横ライン)

タイトルの先頭に横ラインを入れた見出しデザインです。横ラインはheightbackground-colorでラインの太さや色をカスタマイズできます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding-left: 1em;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 20px;
	height:4px;
	background-color: #446689;
}

マーク (横ライン×背景色)

9の見出しデザインに背景色を付けたパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	color: white;
	padding:0.5em 0.5em 0.5em 1.4em;
	background-color: #446689;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 18px;
	height:4px;
	background-color:white;
}

マーク (サークル)

タイトルの先頭にサークルマークを入れた見出しデザインです。サークルはborderでラインの太さや色をカスタマイズできます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding-left: 1em;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 10px;
	height:10px;
	border: solid 4px #446689;
	border-radius:100%;
}

マーク (サークル×枠線)

タイトルの先頭にサークルマークを入れ、さらに枠線(角丸)を加えた見出しデザイン。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding:0.5em 0.5em 0.5em 1.8em;
	border: 1px solid #CCC;
	border-radius: 5px;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0.7em;
	transform:translateY(-50%);
	content: '';
	width: 8px;
	height:8px;
	border: solid 3px #446689;
	border-radius:100%;
}

マーク (サークル×背景色)

12の見出しデザインに背景色を付けたパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	color: white;
	padding:0.5em 0.5em 0.5em 1.8em;
	background-color: #446689;
	border-radius: 5px;
}

h1::after {
	position: absolute;
	top: 50%;
	left:0.7em;
	transform:translateY(-50%);
	content: '';
	width: 8px;
	height:8px;
	border: solid 3px white;
	border-radius:100%;
}

マーク (ドッド×背景色)

タイトルの先頭にドッドマークを入れ背景色を付けた見出しデザインです。ドッドはwidthheightbackground-colorでドッドの大きさや色をカスタマイズできます。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	color: white;
	padding:0.5em 0.5em 0.5em 2em;
	background-color: #446689;
	border-radius:1.5em;
}

h1::after {
	position: absolute;
	top: 50%;
	left:1em;
	transform:translateY(-50%);
	content: '';
	width: 13px;
	height:13px;
	background-color: white;
	border-radius:100%;
}

中央寄せ(ライン)

タイトルを中央に寄せ左右にラインを配置した見出しデザインです。

見出しデザイン

html

<h1><span>見出しデザイン</span></h1>

CSS

h1 {
	text-align: center;
}

h1 span{
	position: relative;
	display: inline-block;
	padding: 0 0.5em;
}
	
h1 span::before, h1 span::after{
	position: absolute;
	top: 50%;
	content: '';
	width: 1.5em;
	height: 1px;
	background-color: black;
}

h1 span::before {left: 100%;}
h1 span::after { right: 100%;}

中央寄せ(角括弧)

タイトルを中央に寄せ左右に角括弧を配置した見出しデザインです。

見出しデザイン

html

<h1><span>見出しデザイン</span></h1>

CSS

h1 {
	text-align: center;
}

h1 span{
	position: relative;
	display: inline-block;
	padding: 0 0.8em;
}
	
h1 span::before{
  	position: absolute;
  	content: '';
  	top:0;
  	right:0.2em;
  	width: 0.2em;
  	height:100%;
  	border: solid 1px black;
  	border-left: none;
}

h1 span::after{
  	position: absolute;
  	content: '';
  	top:0;
  	left:0;
  	width: 0.2em;
  	height:100%;
  	border: solid 1px black;
  	border-right: none;
}

中央寄せ(下向き線)

タイトルを中央に寄せ下ボーダーに吹き出しのような下向き線を付けた見出しデザインです。

見出しデザイン

html

<h1><span>見出しデザイン</span></h1>

CSS

h1 {
	text-align: center;
}

h1 span{
	position: relative;
	display: inline-block;
	padding-bottom:0.5em;
	border-bottom: 1px solid black;
}
	
h1 span::before,
h1 span::after {
  	position: absolute;
  	top: 100%;
  	left:50%;
  	transform:translateX(-50%);
  	content: '';
  	border: 10px solid transparent;
}

h1 span::before {
  	border-top: 10px solid black;
}

h1 span::after {
  	margin-top: -1px;
  	border-top: 10px solid white;
}

グラデーション(背景その1)

12の見出しデザインにグラデーションで背景に立体感を付けたパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding: 1em 1.9em;
	border: 1px solid #CCC;
	border-radius:5px;
	background: linear-gradient(#FFF 0%, #EEE 100%);
	box-shadow:inset -1px -1px 0 rgba(255,255,255,1);
}

h1 span::after {
  	position: absolute;
	top: 50%;
	left:0.8em;
	transform:translateY(-50%);
	content: '';
	width: 8px;
	height:8px;
	border: solid 3px #446689;
	border-radius:100%;
}

グラデーション(背景その2)

フラットデザインが主流になる前に良く見られた光沢感のある見出しデザインです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	color: white;
	padding: 1em 1.2em;
	border-radius:5px;
	background: linear-gradient(#666 0%, #666 50%, #333 50%, #000 100%);
	box-shadow:inset 1px 1px 0 rgba(0,0,0,1);
}

グラデーション(背景その3)

19の見出しデザインと同様に立体感のあるパターンです。

見出しデザイン

html

<h1>見出しデザイン</h1>

CSS

h1 {
	position: relative;
	padding: 0.5em 1.2em;
	border-radius:1.5em;
	border: 1px solid #CCC;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	box-shadow:inset 1px 1px 0 rgba(255,255,255,1);
	background: linear-gradient(#EFEFEF 0%, #FFF 50%, #EEE 50%, #FFF 100%);
}

＼ Webデザインに関するお役立ち情報を定期的に配信中／

Follow @webclips_jp