【CSS】コピペ可！すぐ使える見出しデザイン例

下線パターン

下線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-solid">ここにタイトル</h2>
.border-solid {
/*線の種類 太さ 色*/
border-bottom: 3px solid #ff9800;
/*余白*/
padding-bottom: 10px;
}

シンプルに下線を引いた見出しです。
borderの種類を「solid」で設定しています。

点線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-dot">ここにタイトル</h2>
.border-dot{
/*線の種類 太さ 色*/
border-bottom: 3px dotted #ff9800;
/*余白*/
padding-bottom: 10px;
}

下線を点線にした見出しです。
borderの種類を「dotted」で設定しています。

破線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-dashed">ここにタイトル</h2>
.border-dashed {
/*線の種類 太さ 色*/
border-bottom: 3px dashed #ff9800;
/*余白*/
padding-bottom: 10px;
}

下線を破線にした見出しです。
borderの種類を「dashed」で設定しています。

二重線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-double">ここにタイトル</h2>
.border-double{
/*線の種類 太さ 色*/
border-bottom: 6px double #ff9800;
/*余白*/
padding-bottom: 10px;
}

下線を二重線にした見出しです。
borderの種類を「double」で設定しています。

下線(2色)

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-under-two">ここにタイトル</h2>
.border-under-two {
/*線の種類 太さ 色*/
border-bottom: 3px solid #ff9800;
/*余白*/
padding: 1rem 0;
/*相対位置*/
position: relative;
}

.border-under-two:before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 20%;
    height: 3px;
    content: '';
　/*長い方の線の色*/
    background: #ffe0b2;
}

下線に色を重ねて２種類の色を使った見出しです。同色の色でデザインすると綺麗です。

ストライプ

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-under-strip">ここにタイトル</h2>
.border-under-strip{
    position: relative;
    padding: 1.5rem 0;
}

.border-under-strip:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #ffb74d, #ffb74d 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg,  #ffb74d, #ffb74d 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

下線をストライプにした見出しです。

下線フェード

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-under-fade">ここにタイトル</h2>
.border-under-fade {
position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 20px 0;
    text-align: center;
}

.toph2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
}

.toph2::before {
    background-image: -webkit-linear-gradient(left, transparent, #212121 25%, #212121 75%, transparent);
    background-image: linear-gradient(to right, transparent, #212121 25%, #212121 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

下線が外側にかけてフェードがかかった見出しです。中央寄せのデザインで使うといい感じです。

下線フェード＋サブタイトル

こんな感じの見出しです
サブタイトル
＋コードを見てみる
<h2 class="border-under-fade">ここにタイトル</h2>
<div class="small-tt mb-4">サブタイトル</div>

.border-under-fade {
position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 20px 0;
    text-align: center;
}

.toph2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
}

.toph2::before {
    background-image: -webkit-linear-gradient(left, transparent, #212121 25%, #212121 75%, transparent);
    background-image: linear-gradient(to right, transparent, #212121 25%, #212121 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

.small-tt {
    text-align: center;
    font-size: 20px;
    color: #9e9e9e;
}

フェードの見出しに小さめのサブタイトルが付いた見出しです。

左線パターン

左線線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-left-single">ここにタイトル</h2>
.border-left-single {
padding: 1rem 1rem;
border-left: 4px solid #ff9800;
}

左側に縦線が入った見出しです。

二重縦線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-left-double">ここにタイトル</h2>
.border-left-double{
padding: 1rem 1rem;
border-left: 4px double #ff9800;
}

左側に二重の縦線が入った見出しです。

囲み線パターン

囲み線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-kakomi">ここにタイトル</h2>

.border-kakomi{
    padding: 1rem 1rem;
    border: 3px solid #ff9800;
}

シンプルな線で周りを囲んだ見出しです。

囲み点線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-kakomi-dot">ここにタイトル</h2>

.border-kakomi-dot{
    padding: 1rem 1rem;
    border: 3px dotted #ff9800;
}

点線で周りを囲んだ見出しです。

囲み破線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-kakomi-hasen ">ここにタイトル</h2>

.border-kakomi-hasen {
    padding: 1rem 1rem;
    border: 3px dashed #ff9800;
}

破線で周りを囲んだ見出しです。

囲み二重線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-kakomi-double">ここにタイトル</h2>

.border-kakomi-double{
position: relative;
    padding: 1rem 1rem;
    border: 4px double #ff9800;
}

.border-kakomi-double:before {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    content: '';
    border: 2px solid #ff9800;
}

二重線で周りを囲んだ見出しです。

上下線

こんな感じの見出しです
＋コードを見てみる
<h2 class="tb-border">ここにタイトル</h2>

.tb-border {
    padding: 1rem 1rem;
    border-top: 3px solid #ff9800;
    border-bottom: 3px solid #ff9800;
}

上下に線を引いた見出しです。

上下線二重線

こんな感じの見出しです
＋コードを見てみる
<h2 class="tb-double">ここにタイトル</h2>

.tb-double{
    padding: 1rem 1rem;
    border-top: 6px double #ff9800;
    border-bottom: 6px double #ff9800;
}

上下に二重線を引いた見出しです。

両サイド線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-side-single">ここにタイトル</h2>

.border-side-single {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.border-side-single:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #000;
}

.border-side-single span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

文字を線で挟んだ見出しです。

両サイド二重線

こんな感じの見出しです
＋コードを見てみる
<h2 class="border-side-double">ここにタイトル</h2>

.border-side-double{
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.border-side-double:before,
.border-side-double:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.border-side-double:before {
  left: 0;
}

.border-side-double:after {
  right: 0;
}

文字を二重線で挟んだ見出しです。

背景色ありパターン

背景色あり

こんな感じの見出しです
＋コードを見てみる
<h2 class="bg-fill">ここにタイトル</h2>

.bg-fill{
    padding: 1rem 1rem;
    background: #ff9800;
    color: #fff;
    border-radius: 3px;
}

背景を塗りつぶした見出しです。

背景色(左線)

こんな感じの見出しです
＋コードを見てみる
<h2 class="bg-left">ここにタイトル</h2>

.bg-left{
padding: 1rem 1rem;
    border-left: 5px solid #ff9800;
    background: #ffe0b2;
    color: #f57c00;
}

背景を塗りつぶした見出しに左側に縦線を引いた見出しです。

背景色(上線)

こんな感じの見出しです
＋コードを見てみる
<h2 class="bg-top">ここにタイトル</h2>

.bg-top{
  padding: 1rem 1rem;
  border-top: 3px solid #ff9800;
  background:  #ffe0b2;
  color: #f57c00;
}

背景を塗りつぶした見出しの上側に線を引いた見出しです。

背景色(下線)

こんな感じの見出しです
＋コードを見てみる
<h2 class="bg-under">ここにタイトル</h2>

.bg-under{
  padding: 1rem 1rem;
  border-bottom: 5px solid #ff9800;
  background: #ffe0b2;
  color: #f57c00;
}

背景を塗りつぶした見出しの下側に線を引いた見出しです。

グラデーションパターン

グラデーション

こんな感じの見出しです
＋コードを見てみる
<h2 class="grad1">ここにタイトル</h2>

.grad1{
  padding: 1rem 2rem;
  color: #fff;
  background-color: #05e8ba;
  background-image: linear-gradient(315deg, #05e8ba 0%, #087ee1 74%);
}

背景をグラデーションにした見出しです。

グラデーション角丸

こんな感じの見出しです
＋コードを見てみる
<h2 class="grad2">ここにタイトル</h2>

.grad2{
  padding: 1rem 2rem;
  color: #fff;
  background-color: #fe7bb0;
  background-image: linear-gradient(315deg, #fe7bb0 0%, #ff748b 74%);
  border-radius:5px;
}

背景をグラデーションにした見出しの角を少し丸くした見出しです。

グラデーション角丸大

こんな感じの見出しです
＋コードを見てみる
<h2 class="grad3">ここにタイトル</h2>

.grad3{
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 100vh;
  background-color: #3bb78f;
  background-image: linear-gradient(315deg, #3bb78f 0%, #0bab64 74%);
}

背景をグラデーションにした見出しの角を大きく丸くした見出しです。

グラデーション下線

こんな感じの見出しです
＋コードを見てみる
<h2 class="grad-under">ここにタイトル</h2>

.grad-under{
  position: relative;
  padding: 1rem .5rem;
}

.grad-under:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}

下線をグラデーションにした見出しです。

おすすめのグラデーション生成サイト

EggGradients

CSS Gradient

デザインパターン

リボン風1

こんな感じの見出しです
＋コードを見てみる
<h2 class="ribon1">ここにタイトル</h2>

.ribon1 {
  line-height: 60px;
  position: relative;
  height: 60px;
  margin: 2em 50px 1em;
  padding: 0 2rem;
  text-align: center;
  color: #fff;
  background:#fa4141;
      font-size: 24px;
    font-weight: 600;
}

.ribon1:before,
.ribon1:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #fa4141;
}

.ribon1:before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.ribon1:after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}

リボン風の見出しです。

リボン風2

こんな感じの見出しです
＋コードを見てみる
<h2 class="ribon2">ここにタイトル</h2>

.ribon2 {
  position: relative;
  margin: 1rem -35px;
  padding: 2rem 2rem;
  background: #fa4141;
  color: #fff;
  text-align:center;
}

.ribon2:before,
.ribon2:after {
  position: absolute;
  content: '';
}

.ribon2:before {
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid  #c62828;
  border-left: 10px solid transparent;
}

.ribon2:after {
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid  #c62828;
  border-right: 10px solid transparent;
}

立体的に見えるリボン風の見出しです。

吹き出し

こんな感じの見出しです
＋コードを見てみる
<h2 class="fukidashi1">ここにタイトル</h2>

.fukidashi1{
    position: relative;
    padding: 1.5rem 2rem;
    color: #1565c0;
    border-radius: 10px;
    background: #e3f2fd;
}

.fukidashi1:after {
    position: absolute;
    bottom: -15px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #e3f2fd transparent transparent transparent;
}

吹き出し風の見出しです。

吹き出し2

こんな感じの見出しです
＋コードを見てみる
<h2 class="fukidashi2">ここにタイトル</h2>

.fukidashi2 {
  position: relative;
  padding: 1.5rem 2rem;
  border: 3px solid #d8d8d8;
  border-radius: 10px;
  background: #f9f9f9;
}

.fukidashi2:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}

.fukidashi2:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}

吹き出し風の見出しにふちをつけた見出しです。

ストライプ＋上下線

こんな感じの見出しです
＋コードを見てみる
<h2 class="strip_border">ここにタイトル</h2>

.strip_border{
color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

背景を斜めストライプにし、上下に線を引いた見出しです。

一文字目だけ大きく

こんな感じの見出しです
＋コードを見てみる
<h2 class="bigtt">ここにタイトル</h2>

.bigtt:first-letter {
  font-size: 2em;
  color: #7172ac;
}

一文字目だけ装飾を変えた見出しです。

チェックマーク付き見出し

こんな感じの見出しです
＋コードを見てみる
<h2 class="check_first">ここにタイトル</h2>

.check_first {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

.check_first:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

チェックマークが先頭に付いています。FontAwesomeを使っています。

タグ付き

こんな感じの見出しです
＋コードを見てみる
<h2 class="tag_tt">ここにタイトル</h2>

.tag_tt {
  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;
}

.tag_tt:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}

タグが付いている見出しです。

この記事をシェアする