【コピペOK】WEBサイトでよく使う見出しデザイン

RELEASE / 2023.11.22 UPDATE / 2023.11.26

css

HTML

WEBサイト

コピペ

見出しデザイン

WEBサイトを制作している際、ついつい迷ってしまったり、ワンパターンになってしまう見出しのデザイン。
ワンパターン化してしまわないために、自分自身のメモ用程度にWEBサイトでよく使用する見出しのデザインをまとめてみました。

ボーダー系の見出しデザイン

単色下ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title1_1">CSSのみで再現可能な見出しデザイン</h2>

.title1_1{
 font-size: 30px;
 font-weight: bold;
 border-bottom: 1px solid royalblue;
}

2色下ボーダー（パターン1）

CSSのみで再現可能な見出しデザイン

<h2 class="title1_2">CSSのみで再現可能な見出しデザイン</h2>

.title1_2{
 font-size: 30px;
 font-weight: bold;
 border-bottom: 3px solid #ddd;
 position: relative;
}
.title1_2::before{
 content: "";
 display: block;
 width: 60px;
 height: 3px;
 position: absolute;
 left: 0;
 bottom: -3px;
 background: royalblue;
}

2色下ボーダー（パターン2）

CSSのみで再現可能な見出しデザイン

<h2 class="title1_3">CSSのみで再現可能な見出しデザイン</h2>

.title1_3{
 font-size: 30px;
 font-weight: bold;
 border-bottom: 3px solid #ddd;
 position: relative;
}
.title1_3::before{
 content: "";
 display: block;
 width: 50%;
 height: 3px;
 position: absolute;
 left: 0;
 bottom: -3px;
 background: royalblue;
}

点線ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title1_4">CSSのみで再現可能な見出しデザイン</h2>

.title1_4{
 font-size: 30px;
 font-weight: bold;
 border-bottom: 3px dotted royalblue;
}

上下ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title1_5">CSSのみで再現可能な見出しデザイン</h2>

.title1_5{
 font-size: 30px;
 font-weight: bold;
 border-top: 3px solid royalblue;
 border-bottom: 3px solid royalblue;
}

2色上下ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title1_6">CSSのみで再現可能な見出しデザイン</h2>

.title1_6{
 font-size: 30px;
 font-weight: bold;
 border-top: 3px solid #ddd;
 border-bottom: 3px solid #ddd;
}
.title1_6::before,
.title1_6::after{
 content: "";
 display: block;
 width: 50%;
 height: 3px;
 position: absolute;
 left: 0;
 background: royalblue;
}
.title1_6::before{
 top: -3px;
}
.title1_6::after{
 bottom: -3px;
}

左ボーダー（単色）

CSSのみで再現可能な見出しデザイン

<h2 class="title1_7">CSSのみで再現可能な見出しデザイン</h2>

.title1_7{
 font-size: 30px;
 padding-left: 10px;
 font-weight: bold;
 border-left: 6px solid royalblue;
}

左ボーダー（2色）

CSSのみで再現可能な見出しデザイン

<h2 class="title1_8">CSSのみで再現可能な見出しデザイン</h2>

.title1_8{
 font-size: 30px;
 padding-left: 10px;
 font-weight: bold;
 border-left: 6px solid royalblue;
 position: relative;
}
.title1_8::before{
 content: "";
 display: block;
 width: 6px;
 height: 50%;
 position: absolute;
 left: -6px;
 top: 0;
 background: #eee;
}

縁取り

CSSのみで再現可能な見出しデザイン

<div class="title1_9">CSSのみで再現可能な見出しデザイン</div>

.title1_9{
 font-size: 30px;
 padding: 10px;
 font-weight: bold;
 border: 4px solid royalblue;
}

二重縁取り

CSSのみで再現可能な見出しデザイン

<h2 class="title1_10">CSSのみで再現可能な見出しデザイン</h2>

.title1_10{
 font-size: 30px;
 padding: 10px;
 font-weight: bold;
 border: 4px solid royalblue;
 position: relative;
}
.title1_10::after{
 content: "";
 display: block;
 width: calc(100% - 8px);
 height: calc(100% - 8px);
 position: absolute;
 left: 4px;
 top: 4px;
 border: 1px solid royalblue;
}

二重下ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title1_11">CSSのみで再現可能な見出しデザイン</h2>

.title1_11{
 font-size: 30px;
 font-weight: bold;
 border-bottom: 2px solid royalblue;
 position: relative;
}
.title1_11:after{
 content: "";
 display: block;
 width: 100%;
 height: 2px;
 background: royalblue;
 position: absolute;
 left: 0;
 bottom: -6px;
}

背景系の見出しデザイン

単色背景

CSSのみで再現可能な見出しデザイン

<h2 class="title2_1">CSSのみで再現可能な見出しデザイン</h2>

.title2_1{
 font-size: 30px;
 padding: 10px 25px;
 font-weight: bold;
 background: royalblue;
 color: #fff;
}

グラデーション背景

CSSのみで再現可能な見出しデザイン

<h2 class="title2_2">CSSのみで再現可能な見出しデザイン</h2>

.title2_2{
 font-size: 30px;
 padding: 10px 25px;
 font-weight: bold;
 background: rgb(65,105,225);
 background: linear-gradient(90deg, rgba(65,105,225,1) 0%, rgba(0,212,255,1) 100%);
 color: #fff;
}

背景+下ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title2_3">CSSのみで再現可能な見出しデザイン</h2>

.title2_3{
 font-size: 30px;
 padding: 10px 25px;
 font-weight: bold;
 background: royalblue;
 border-bottom: 5px solid mediumblue;
 color: #fff;
}

背景+左ボーダー

CSSのみで再現可能な見出しデザイン

<h2 class="title2_4">CSSのみで再現可能な見出しデザイン</h2>

.title2_4{
 font-size: 30px;
 padding: 10px 25px;
 font-weight: bold;
 background: royalblue;
 border-left: 6px solid mediumblue;
 color: #fff;
}

数字や英字付きの見出しデザイン

数字付きの見出し（パターン1）

CSSのみで再現可能な見出しデザイン

<h2 class="title3_1" data-no="01">CSSのみで再現可能な見出しデザイン</h2>

.title3_1{
 font-size: 30px;
 font-weight: bold;
 position: relative;
 padding-left: 1.5em;
}
.title3_1::before{
 content: attr(data-no);
 position: absolute;
 left: 0;
 top: 0;
 margin-right: 5px;
 color: #bbb;
}

数字付きの見出し（パターン2）

CSSのみで再現可能な見出しデザイン

<h2 class="title3_2" data-no="01">CSSのみで再現可能な見出しデザイン</h2>

.title3_2{
 font-size: 30px;
 font-weight: bold;
 position: relative;
 padding-left: 65px;
 border: 1px solid royalblue;
}
.title3_2::before{
 content: attr(data-no);
 position: absolute;
 left: 0;
 top: 0;
 margin-right: 5px;
 width: 55px;
 line-height: 55px;
 text-align: center;
 color: #fff;
 background: royalblue;
}