本文へスキップ

CRG-02 — HEADINGS

見出し装飾22点 在庫あり

下線・マーカー・囲み。記事の骨格を立てる。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-02-001

読まれる記事の書き方

蛍光マーカー見出しMarker Highlight

.cg-hd-marker {
  display: inline;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.6;
  background: linear-gradient(transparent 60%, #FFE28A 60%);
}
<h2 class="cg-hd-marker">読まれる記事の書き方</h2>
GROSS WT. 216 B ORIGINAL
CRG-02-002

サービスの特徴

左アクセントバー見出しSide Bar

.cg-hd-bar {
  padding: 6px 0 6px 18px;
  font-size: 24px;
  font-weight: 900;
  border-left: 6px solid #E8590C;
  line-height: 1.4;
}
<h2 class="cg-hd-bar">サービスの特徴</h2>
GROSS WT. 182 B ORIGINAL
CRG-02-003

料金プラン

二色下線見出しTwo-tone Underline

.cg-hd-twotone {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 900;
  background:
    linear-gradient(#E8590C, #E8590C) no-repeat left bottom / 64px 4px,
    linear-gradient(#D9D5CB, #D9D5CB) no-repeat left bottom / 100% 4px;
}
<h2 class="cg-hd-twotone">料金プラン</h2>
GROSS WT. 310 B ORIGINAL
CRG-02-004

お申し込みの流れ

番号タグ見出しNumbered Tag

.cg-hd-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 900;
}
.cg-hd-num::before {
  content: attr(data-no);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  padding: 6px 10px;
  border-radius: 4px;
}
<h2 class="cg-hd-num" data-no="01">お申し込みの流れ</h2>
GROSS WT. 380 B ORIGINAL
CRG-02-005

今月のお知らせ

コーナー括弧見出しCorner Brackets

.cg-hd-bracket {
  position: relative;
  display: inline-block;
  padding: 14px 26px;
  font-size: 22px;
  font-weight: 900;
}
.cg-hd-bracket::before,
.cg-hd-bracket::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid #E8590C;
}
.cg-hd-bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.cg-hd-bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }
<h2 class="cg-hd-bracket">今月のお知らせ</h2>
GROSS WT. 494 B ORIGINAL
CRG-02-006

スタッフ紹介

ステッチ囲み見出しStitched Box

.cg-hd-stitch {
  display: inline-block;
  padding: 12px 28px;
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  background: #C89B6C;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #C89B6C;
  border: 2px dashed rgba(255, 255, 255, .8);
}
<h2 class="cg-hd-stitch">スタッフ紹介</h2>
GROSS WT. 290 B ORIGINAL
CRG-02-007

NEXT LEVEL DESIGN

グラデ文字見出しGradient Text

.cg-hd-grad {
  display: inline-block;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(120deg, #E8590C 10%, #B03A5B 55%, #3A5A78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<h2 class="cg-hd-grad">NEXT LEVEL DESIGN</h2>
GROSS WT. 308 B ORIGINAL
CRG-02-008

SUMMER SALE

ずらし影見出しOffset Shadow

.cg-hd-offset {
  display: inline-block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #F2B707;
  text-shadow: 3px 3px 0 #1B1A17;
  -webkit-text-stroke: 1px #1B1A17;
}
<h2 class="cg-hd-offset">SUMMER SALE</h2>
GROSS WT. 235 B ORIGINAL
CRG-02-009

お客様の声

センター両線見出しCenter Rules

.cg-hd-center {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}
.cg-hd-center::before,
.cg-hd-center::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #1B1A17;
  min-width: 40px;
}
<h2 class="cg-hd-center">お客様の声</h2>
GROSS WT. 307 B ORIGINAL
CRG-02-010

CONCEPT私たちの考え方

英字キッカー付き見出しEN Kicker

.cg-hd-kicker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 26px;
  font-weight: 900;
}
.cg-hd-kicker span {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25em;
  color: #E8590C;
}
<h2 class="cg-hd-kicker"><span>CONCEPT</span>私たちの考え方</h2>
GROSS WT. 328 B ORIGINAL
CRG-02-011

ハンドメイド特集

マスキングテープ見出しMasking Tape

.cg-hd-tape {
  display: inline-block;
  padding: 10px 30px;
  font-size: 21px;
  font-weight: 900;
  color: #6B5A2E;
  background: rgba(242, 183, 7, .45);
  transform: rotate(-1.5deg);
  clip-path: polygon(2% 0, 98% 4%, 100% 96%, 0 100%);
}
<h2 class="cg-hd-tape">ハンドメイド特集</h2>
GROSS WT. 293 B ORIGINAL
CRG-02-012

期間限定セール

旗リボン見出しFlag Ribbon

.cg-hd-flag {
  display: inline-block;
  padding: 12px 42px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  clip-path: polygon(
    0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%,
    0 100%, 16px 50%
  );
}
<h2 class="cg-hd-flag">期間限定セール</h2>
GROSS WT. 287 B ORIGINAL
CRG-02-013

CREATIVE STUDIO

メッシュグラデ文字見出しMesh Gradient Text

.cg-hd-mesh {
  display: inline-block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .01em;
  background:
    radial-gradient(at 20% 30%, #E8590C 0, transparent 55%),
    radial-gradient(at 80% 20%, #C2426B 0, transparent 55%),
    radial-gradient(at 60% 85%, #3A5A78 0, transparent 60%),
    #F2B707;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<h2 class="cg-hd-mesh">CREATIVE STUDIO</h2>
GROSS WT. 437 B ORIGINAL
CRG-02-014

RAW & BOLD

ブルータリスト重ね見出しBrutalist Stack

.cg-hd-brutal {
  display: inline-block;
  padding: 10px 24px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #1B1A17;
  background: #fff;
  border: 3px solid #1B1A17;
  box-shadow: 7px 7px 0 #E8590C, 14px 14px 0 #1B1A17;
}
<h2 class="cg-hd-brutal">RAW &amp; BOLD</h2>
GROSS WT. 293 B ORIGINAL
CRG-02-015

新着コンテンツ

下線が描かれる見出しDrawing Underline

.cg-hd-draw {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(#E8590C, #E8590C) no-repeat left bottom / 0% 4px;
  animation: cg-hd-draw-line 3s ease-in-out infinite;
}
@keyframes cg-hd-draw-line {
  0%, 15% { background-size: 0% 4px; }
  50%, 85% { background-size: 100% 4px; }
  100% { background-size: 0% 4px; background-position: right bottom; }
}
<h2 class="cg-hd-draw">新着コンテンツ</h2>
GROSS WT. 469 B ORIGINAL
CRG-02-016

NEWS

文字が順に浮かぶ見出しFloating Letters

.cg-hd-float {
  display: flex;
  gap: 3px;
  font-size: 30px;
  font-weight: 900;
}
.cg-hd-float span {
  animation: cg-hd-float-up 2.2s ease-in-out infinite;
}
.cg-hd-float span:nth-child(2) { animation-delay: .12s; }
.cg-hd-float span:nth-child(3) { animation-delay: .24s; }
.cg-hd-float span:nth-child(4) { animation-delay: .36s; color: #E8590C; }
@keyframes cg-hd-float-up {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}
<h2 class="cg-hd-float" aria-label="NEWS"><span>N</span><span>E</span><span>W</span><span>S</span></h2>
GROSS WT. 569 B ORIGINAL
CRG-02-017

今月の特集

流れるグラデ下線見出しFlowing Gradient Rule

.cg-hd-gflow {
  display: inline-block;
  padding-bottom: 12px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(90deg, #E8590C, #F2B707, #C2426B, #E8590C) no-repeat left bottom / 100% 5px;
  background-size: 250% 5px;
  animation: cg-hd-gflow-run 3.5s linear infinite;
}
@keyframes cg-hd-gflow-run {
  to { background-position: 250% bottom; }
}
<h2 class="cg-hd-gflow">今月の特集</h2>
GROSS WT. 409 B ORIGINAL
CRG-02-018

開催中のセール

LIVEドット見出しLive Indicator

.cg-hd-live {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 900;
}
.cg-hd-live::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C0392B;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, .5);
  animation: cg-hd-live-pulse 1.6s ease-out infinite;
}
@keyframes cg-hd-live-pulse {
  70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
<h2 class="cg-hd-live">開催中のセール</h2>
GROSS WT. 510 B ORIGINAL
CRG-02-019

サービス紹介

バーが伸びて始まる見出しGrowing Side Bar

.cg-hd-bargrow {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 24px;
  font-weight: 900;
}
.cg-hd-bargrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #E8590C;
  transform-origin: top;
  animation: cg-hd-bargrow-in 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-hd-bargrow-in {
  0% { transform: scaleY(0); }
  35%, 80% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
<h2 class="cg-hd-bargrow">サービス紹介</h2>
GROSS WT. 549 B ORIGINAL
CRG-02-020

おしらせ

波線が流れる見出しFlowing Wavy Rule

.cg-hd-waveflow {
  display: inline-block;
  padding-bottom: 14px;
  font-size: 24px;
  font-weight: 900;
  background:
    radial-gradient(circle 5px at 5px 0, transparent 3.5px, #3A9BD5 3.5px 5px, transparent 5px) repeat-x left bottom / 20px 10px,
    radial-gradient(circle 5px at 5px 10px, transparent 3.5px, #3A9BD5 3.5px 5px, transparent 5px) repeat-x 10px calc(100% - 0px) / 20px 10px;
  animation: cg-hd-waveflow-run 1.6s linear infinite;
}
@keyframes cg-hd-waveflow-run {
  to { background-position: 20px bottom, 30px calc(100% - 0px); }
}
<h2 class="cg-hd-waveflow">おしらせ</h2>
GROSS WT. 592 B ORIGINAL
CRG-02-021

GLASS HEADING

グラスモーフィズム見出しGlass Frost Heading

.cg-hd-glass-wrap {
  position: relative;
  width: 260px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
}
.cg-hd-glass-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E8590C, #3A5A78 65%, #F2B707);
}
.cg-hd-glass {
  position: absolute;
  inset: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #1B1A17;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 10px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.cg-hd-glass-wrap:hover .cg-hd-glass {
  transform: scale(1.05);
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 14px 32px rgba(27, 26, 23, .28);
}
<div class="cg-hd-glass-wrap"><div class="cg-hd-glass-bg"></div><h2 class="cg-hd-glass">GLASS HEADING</h2></div>
GROSS WT. 1005 B ORIGINAL
CRG-02-022

FOCUS MODE

呼吸するグロー見出しBreathing Glow Heading

.cg-hd-breathe {
  display: inline-block;
  margin: 0;
  padding: 14px 30px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .05em;
  color: #1B1A17;
  background: #fff;
  border: 2px solid #E8590C;
  border-radius: 999px;
  animation: cg-hd-breathe-glow 3.2s ease-in-out infinite;
}
@keyframes cg-hd-breathe-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); }
  50% { box-shadow: 0 0 26px 6px rgba(232, 89, 12, .35); }
}
<h2 class="cg-hd-breathe">FOCUS MODE</h2>
GROSS WT. 483 B ORIGINAL