コピペでできる”見出し”のデザインサンプル一覧[HTML/CSS/JavaScript]

2023年9月11日2023年9月13日

“見出しのデザインサンプル一覧”

このページではWeb制作で用いる”見出し”のデザインサンプルの一覧を紹介しています。

使用したいサンプルの横のタブからソースコードを選択します。右上のボタンを押すとソースコードがクリップボードに保存され、すぐに使えるようになります。

ページの都合上サンプルにはh4タグ、ソースコードにはh2タグで表記していますが実際に使う場合はh1,h2,h3,h4,h5,h6のどの見出しタグに使用しても問題ありません。

随時更新。古くなったもの、非推奨とされているものは掲載されません。またお使いのWebブラウザの種類や端末によっては、見え方が異なる場合があります。

大文字

見出しのサンプル

頭文字

見出しのサンプル

反射文字

見出しのサンプル

.t8-heading-0b {
    position: relative;
    font-size: 2em;
    color: #fff;
    line-height: 1.5;
   -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.5));

キャプション

.t8-heading-0c {
    color: #fff;
    font-size: .75rem;
    letter-spacing: .05em;
    text-align: center;
}
.t8-heading-0c::before {
    display: block;
    font-size: 3em;
    line-height: 1.5;
    content: attr(data-label);
}

帯

見出しのサンプル

下線

見出しのサンプル

下線(二重)

見出しのサンプル

下線(破線)

見出しのサンプル

下線(点線)

見出しのサンプル

下線(二色)

見出しのサンプル

.t8-heading-6 {
    color: #fff;
    padding: 0.5em;
    font-size:1.5em;
    border-bottom: solid 5px #808080;
    position: relative;
}

.t8-heading-6:after {
    position: absolute;
    padding: 0.5em;
    content: " ";
    display: block;
    border-bottom: solid 5px #0d6efd;
    bottom: -4px;
    left:-4px;
    width: 50%;
}

下線(グラデーション)

見出しのサンプル

.t8-heading-6a {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding: 0.5em 0;
}

.t8-heading-6a:after {
    content: "";
    display: block;
    height: 5px;
    background: -webkit-linear-gradient(to right, #0d6efd, transparent);
    background: linear-gradient(to right, #0d6efd, transparent);
}

下線(マーカー)

見出しのサンプル

下線(ストライプ)

見出しのサンプル

.t8-heading-8 {
    position: relative;
    color: #fff;
    font-size:1.5em;
}

.t8-heading-8:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(-45deg, #0d6efd, #0d6efd 2px, transparent 2px, transparent 6px);
}

横線

見出しのサンプル

横線(二重)

見出しのサンプル

横線(二色)

見出しのサンプル

.t8-heading-10 {
    padding: 1.5rem;
    margin-bottom: 0.5rem;
    background-image: linear-gradient(#0d6efd 50%, #808080 50%);
    background-repeat: no-repeat;
    background-size: 0.5rem 100%;
    font-size: 25px;
}

中央線

見出しのサンプル

括弧(大)

見出しのサンプル

.t8-heading-12 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    display: inline-block;
    padding: 0 50px;
}
.t8-heading-12:before, .t8-heading-12:after {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 100%;
    border: 5px solid #0d6efd;
    box-sizing: border-box;
    content: '';
}
.t8-heading-12:before {
    top: 0;
    left: 0;
    border-right: none;
}
.t8-heading-12:after {
    bottom: 0;
    right: 0;
    border-left: none;
}

括弧(かぎ)

見出しのサンプル

.t8-heading-13 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    display: inline-block;
    padding: 0 50px;
}
.t8-heading-13:before, .t8-heading-13:after {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    content: '';
}
.t8-heading-13:before {
    top: 0;
    left: 0;
    border-top: 5px solid #0d6efd;
    border-left: 5px solid #0d6efd;
}
.t8-heading-13:after {
    bottom: 0;
    right: 0;
    border-bottom: 5px solid #0d6efd;
    border-right: 5px solid #0d6efd;
}

括弧(斜線)

見出しのサンプル

.t8-heading-14 {
    color: #fff;
    font-size:1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.t8-heading-14:before, .t8-heading-14:after {
    width: 5px;
    height: 50px;
    background-color: #0d6efd;
    content: '';
}
.t8-heading-14:before {
    transform: rotate(-30deg);
    margin-right: 30px;
}
.t8-heading-14:after {
    transform: rotate(30deg);
    margin-left: 30px;
}

ボックス(角)

見出しのサンプル

ボックス(影)

見出しのサンプル

ボックス(丸)

見出しのサンプル

ボックス(立体)

見出しのサンプル

.t8-heading-16a {
    position: relative;
    padding: 0.5rem;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    border: 1px solid #0d6efd;
}
.t8-heading-16a::before,
.t8-heading-16a::after {
    position: absolute;
    content: '';
}
.t8-heading-16a::before {
    top: 5px;
    right: -10px;
    width: 10px;
    height: 100%;
    transform: skewY(45deg);
    border: 4px solid #0d6efd;
}
.t8-heading-16a::after {
    bottom: -10px;
    left: 5px;
    width: 100%;
    height: 10px;  
    transform: skewX(45deg);
    border: 4px solid #0d6efd;
}

ボックス(塗りつぶし)

見出しのサンプル

グラデーション(上下)

見出しのサンプル

.t8-heading-18 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding: 0.5em 0.5em;
    background: -webkit-linear-gradient(to top, transnparent, #0d6efd);
    background: linear-gradient(to top, transparent, #0d6efd);
}

グラデーション(左右)

見出しのサンプル

.t8-heading-19 {
    color: #fff;
    padding: 0.5em;
    font-size:1.5em;
    position: relative;
    background: -webkit-linear-gradient(to right, #0d6efd, transparent);
    background: linear-gradient(to right, #0d6efd, transparent);
}

吹き出し(コメント)

見出しのサンプル

.t8-heading-20 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding: 0.5em;
    background: #0d6efd;
    border-radius:0.5em;
}
.t8-heading-20:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #0d6efd;
  width: 0;
  height: 0;
}

吹き出し(考えごと)

見出しのサンプル

.t8-heading-21 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding:0.5em;
    margin-left: 50px;
    background: #0d6efd;
    border-radius: 20px;
}
.t8-heading-21:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-weight: 900;
    position: absolute;
    font-size: 15px;
    left: -50px;
    bottom: 0;
    color: #0d6efd;
}
.t8-heading-21:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-weight: 900;
    position: absolute;
    font-size: 25px;
    left: -30px;
    bottom: 0;
    color: #0d6efd;
}

.t8-heading-22 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding: .5em .5em;
    border-radius: 50px 0 0 50px;
    background-color: #0d6efd;
    color: #fff;
}
.t8-heading-22::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    border-radius: 50%;
    background: #fff;
}

リボン

見出しのサンプル

.t8-heading-23 {
    color: #fff;
    font-size:1.5em;
    position: relative;
    padding: .5em .7em;
    background-color: #0d6efd;
}
.t8-heading-23::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #0d6efd;
    content: '';
}

ページ

見出しのサンプル

.t8-heading-23a {
  color: #fff;
  font-size:1.5em;
  position: relative;
  background: #0d6efd;
  box-shadow: 0px 0px 0px 5px #0d6efd;
  padding: 0.5em 0.5em;
  color: #fff;
}
.t8-heading-23a:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: transparent transparent #0d6efd;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

テープ

見出しのサンプル

.t8-heading-23b {
    font-size:1.5em;
    position: relative;
    padding: .5em .5em;
    border-left: 2px dotted #000;
    border-right: 2px dotted #000;
    background-color: #0d6efd;
    color: #fff;
}

しおり

見出しのサンプル

.t8-heading-24 {
  font-size:1.5em;
  color: #fff;
  line-height: 60px;
  position: relative;
  height: 60px;
  margin: 2em 50px 1em;
  padding: 0 2rem;
  color: #fff;
  background: #0d6efd;
}
.t8-heading-24::before{
 position: absolute;
  top: 0;
  display: block;
  height: 50px;
  content: '';
  border: 30px solid #0d6efd;
}
.t8-heading-24::before {
 left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

ふせん

見出しのサンプル

ステッチ

見出しのサンプル

チェック(水玉)

見出しのサンプル

.t8-heading-25a {
    color: #fff;
    padding: 0.5em;
    font-size:1.5em;
    background-color: #0d6efd;
    background-image:
    radial-gradient(#00ffff 30%, transparent 30%);
    background-size: 20px 20px;
}

チェック(菱形)

見出しのサンプル

.t8-heading-25c {
    color: #fff;
    padding: 0.5em;
    font-size:1.5em;
    background-color: #0d6efd;
    background-image:
    radial-gradient(#00ffff 70%, transparent 70%);
    background-size: 20px 20px;
}

チェック(市松)

見出しのサンプル

.t8-heading-25b {
    color: #fff;
    padding: 0.5em;
    font-size:1.5em;
    background-image: linear-gradient(45deg, #0d6efd 25%, transparent 25%, transparent 75%, #0d6efd 75%),
    linear-gradient(45deg, #0d6efd 25%, transparent 25%, transparent 75%, #0d6efd 75%);
    background-position: 0 0, 30px 30px;  
    background-size: 60px 60px;         
    background-color: transparent;         
}

チェック(斜線)

見出しのサンプル

.t8-heading-26 {
    color: #fff;
    font-size:1.5em;
    padding: .5em .5em;
    background-color : #0d6efd;
    background-image: repeating-linear-gradient( 45deg,rgba(0, 0, 0, 0.5) 0px 10px,	
    transparent 10px 40px),
    repeating-linear-gradient( -45deg,rgba(0, 0, 0, 0.5) 0px 10px,	
    transparent 10px 40px);
}

チェック(直線)

見出しのサンプル

.t8-heading-26a {
    color: #fff;
    font-size:1.5em;
    padding: .5em .5em;
    background-color : #0d6efd;
    background-image:
    repeating-linear-gradient( 0deg,rgba(0, 0, 0, 0.5) 0px 15px,	transparent 15px 40px),
    repeating-linear-gradient( 90deg,rgba(0, 0, 0, 0.5) 0px 15px,	transparent 15px 40px);
}

ストライプ

見出しのサンプル

.t8-heading-27 {
　　color: #fff;
    font-size:1.5em;
    padding: .5em .5em;
    background-image: repeating-linear-gradient(-45deg, #0d6efd, #0d6efd 2px, transparent 2px, #fff 6px);
    color: transparent;
}

URLをコピーしました！