コピペでできる見出しデザインいろいろ

コピー&ペーストでできる見出しデザイン集です。

はじめに

テンプレートの背景色や文字色に依存しないよう作成しましたので、テンプレートから色を探し出して代入する、といった手間は無いはずです。ただし、ダークモード対応テンプレートの場合は色変更の必要が生じることがあります。その場合でもテンプレートCSSのことは気にせず、対象の見出しデザインのみに集中できるかと思います。

ダークモード切り替え時に恐らく必要になるであろう、と思われる箇所は予めCSSを含めていますが、事足らない場合はご自身で追加を行ってください。

弊テンプレート利用者様の場合、ダークモードの指定は

:root[theme="dark"]{}

で行いますが、通常のOSダークモードの場合は

@media (prefers-color-scheme: dark){}

なので後者の場合は書き換えが必要です。弊テンプレートは現在前者で統一していますが、アップデートしていない場合などは後者になりますのでチェックを行った上で導入してください。ダークモード非対応テンプレートの場合は ダークモードの指定を必ず削除 します。

共通CSS

全デザイン共通のCSSです。導入デザイン数のいかんを問わず必ず必要な内容です。

:root {
  /* テンプレートにフォント大きさのスタイルが含まれる場合はここから不要 */
  --hg-margin-vertical: 3em;/* 前後要素との距離 */
  --hg-font_size-h2: 1.2em;/* h2フォント大きさ */
  --hg-font_size-h3: 1.1em;/* h3 */
  --hg-font_size-h4: 1em;/* h4フォント大きさ */
  /* テンプレートにフォント大きさのスタイルが含まれる場合はここまで不要 */

  --hg-padding-vertical: .5em;/* 上下内余白 */
  --hg-padding-horizontal: 1em;/* 左右内余白 */

  --hg-font_weight: bold;/* 太字, 不要ならこの一行削除(h要素を使わない時のための配慮) */
  --hg-line_height: 1.4;/* 行間 */
}

.hg {
  margin: var(--hg-margin-vertical) 0;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  font-weight: var(--hg-font_weight, normal);
  line-height: var(--hg-line_height);
}

/* テンプレートにフォント大きさのスタイルが含まれる場合はここから不要 */
h2.hg {
  font-size: var(--hg-font_size-h2);
}
h3.hg {
  font-size: var(--hg-font_size-h3);
}
h4.hg {
  font-size: var(--hg-font_size-h4);
}
/* テンプレートにフォント大きさのスタイルが含まれる場合はここまで不要 */

カスタムプロパティ(--xxx)以外はカスタマイズ非推奨です。全デザインに共通する内容は以下の通り

  • 前後要素との距離(margin)
  • 内側余白(padding)
  • 行間
  • 見出しレベルによる文字サイズ

見出しレベルのHTMLは適宜書き換えてください。雛形は h2 で統一しています。また、div 要素でも利用できます。

サンプル画像はカラーバリエーションを見て貰うため各種変更していますが、同じカテゴリ内の見出しは背景・ボーダー・文字色など共通です。

共通CSSで指定した margin が効かないことがあります。この場合はテンプレートに予めh要素についての指定が含まれることが原因です。弊テンプレートの場合は

.inner-contents h2
というルールセットがありますので、
.inner-contents h2:not(.hg)
に書き換えることで本記事の共通CSSの指定を踏襲するようになります。同じくh3, h4についても同様の処理を行ってください。

ブラケット

<!-- bracket -->
<h2 class="hg hg__bracket">これは ブラケット 見出しです。</h2>

<!-- bracket + border -->
<h2 class="hg hg__bracket hg__bracket-border">これは ブラケット+ボーダー 見出しです。</h2>

<!-- bracket + border + background -->
<h2 class="hg hg__bracket hg__bracket-border hg__bracket-bg">
<span class="hg__bracket-inner">これは ブラケット+ボーダー+背景 見出しです。</span>
</h2>
/* bracket */
:root {
  --hg__bracket-size: 50px;/* カギカッコ大きさ */

  --hg__bracket-line-border-width: 5px;/* カギカッコのボーダー太さ, ボーダー不要ならこの一行削除 */
  --hg__bracket-line-border-color: rgb(252,209,0);/* カギカッコのボーダーカラー */

  /* hg__border */
  --hg__bracket-border-width: 3px;/* ボーダー太さ, 不要ならこの一行削除 */
  --hg__bracket-border-color: rgb(51,51,51);/* ボーダーカラー */

  /* hg__bg */
  --hg__bracket-bgcolor: rgb(252,250,219);/* ボーダーカラー */
  --hg__bracket-color: rgb(51,51,51);/* ボーダーカラー */
}

/* ダークモード */
:root[theme="dark"] {
  /* hg__border */
  --hg__bracket-border-color: rgb(100,100,100);/* ボーダーカラー */
}

.hg__bracket {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: calc(var(--hg__bracket-size) + 1em);
}

.hg__bracket::before,
.hg__bracket::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--hg__bracket-size);
  height: var(--hg__bracket-size);
  pointer-events: none;
}

.hg__bracket::before {
  top: 0;
  left: 0;
  border-top: var(--hg__bracket-line-border-width) solid var(--hg__bracket-line-border-color);
  border-left: var(--hg__bracket-line-border-width) solid var(--hg__bracket-line-border-color);
}

.hg__bracket::after {
  bottom: 0;
  right: 0;
  border-right: var(--hg__bracket-line-border-width) solid var(--hg__bracket-line-border-color);
  border-bottom: var(--hg__bracket-line-border-width) solid var(--hg__bracket-line-border-color);
}

/* with border */
.hg__bracket-border {
  outline: var(--hg__bracket-border-width) solid var(--hg__bracket-border-color);
  outline-offset: calc(calc(var(--hg__bracket-line-border-width) + var(--hg__bracket-border-width)) * -1);
}

/* with background */
.hg__bracket-bg {
  min-width: initial;
  padding: calc(var(--hg__bracket-border-width) + var(--hg__bracket-line-border-width));
}

.hg__bracket-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  background: var(--hg__bracket-bgcolor);
  color: var(--hg__bracket-color);
}

オクタゴン

<!-- octagon -->
<h2 class="hg hg__octagon">これは オクタゴン 見出しです。</h2>

<!-- octagon + shadow -->
<h2 class="hg__octagon-shadow">
<span class="hg hg__octagon">これは オクタゴン+シャドゥ 見出しです。</span>
</h2>

<!-- octagon + border -->
<h2 class="hg hg__octagon hg__octagon-border">
<span class="hg__octagon-inner">これは オクタゴン+ボーダー 見出しです。</span>
</h2>
/* octagon */
:root {
  --hg__octagon-bgcolor: rgb(186,255,255);/* 背景色 */
  --hg__octagon-color: rgb(51,51,51);/* 文字色 */

  /* shadow */
  --hg__octagon-shadow-color: rgba(0,0,0,.2);/* シャドゥカラー */

  /* border */
  --hg__octagon-border-width: 6px;/* ボーダー太さ */
  --hg__octagon-border-color: rgb(137,206,206);/* ボーダー色 */
}

:root[theme="dark"] {
  --hg__octagon-bgcolor: rgb(186,255,255);/* 背景色 */
  --hg__octagon-color: rgb(51,51,51);/* 文字色 */

  --hg__octagon-shadow-color: rgba(0,0,0,.9);/* シャドゥカラー */

  --hg__octagon-border-color: rgb(137,206,206);/* ボーダー色 */
}

.hg__octagon {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 60px;
  clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
  background: var(--hg__octagon-bgcolor);
  color: var(--hg__octagon-color);
}

/* shadow */
.hg__octagon-shadow {
  filter: drop-shadow(6px 5px 8px var(--hg__octagon-shadow-color));
}

/* border */
.hg__octagon-border {
  padding: var(--hg__octagon-border-width);
  background: var(--hg__octagon-border-color);
}
.hg__octagon-inner {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 50px;
  clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  background: var(--hg__octagon-bgcolor);
}

アロー

<!-- arrow -->
<h2 class="hg hg__arrow">これは アロー 見出しです。</h2>

<!-- arrow + transparent background -->
<h2 class="hg hg__arrow hg__arrow-trans">
<span class="hg__arrow-inner">これは アロー+背景色なし 見出しです。</span>
</h2>
/* arrow */
:root {
  --hg__arrow-border-width: 3px;/* ボーダー太さ */
  --hg__arrow-border-color: rgb(51,51,51);/* ボーダー色 */

  --hg__arrow-bgcolor: rgb(178,225,255);/* 背景色 */
  --hg__arrow-color: rgb(51,51,51);/* 背景色 */

  --hg__arrow-triangle-size: 22px;/* 角(つの)サイズ */

  --hg__arrow-text_align: center;/* 位置揃え, leftにする場合はこの一行削除 */
}

:root[theme="dark"] {
  --hg__arrow-border-color: rgb(150,150,150);/* ボーダーカラー */

  --hg__arrow-bgcolor: rgb(178,225,255);/* 背景色 */
  --hg__arrow-color: rgb(51,51,51);/* 背景色 */
}

.hg__arrow {
  position: relative;
  margin-bottom: calc(var(--hg-margin-vertical) + calc(var(--hg__arrow-triangle-size) * .7));
  border-top: var(--hg__arrow-border-width) solid var(--hg__arrow-border-color);
  border-bottom: var(--hg__arrow-border-width) solid var(--hg__arrow-border-color);
  background: var(--hg__arrow-bgcolor);
  color: var(--hg__arrow-color);
  text-align: var(--hg__arrow-text_align, left);
}

.hg__arrow::before,
.hg__arrow::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  aspect-ratio: 2/1;
  margin: auto;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.hg__arrow::before {
  top: 100%;
  width: calc(var(--hg__arrow-triangle-size) + calc(var(--hg__arrow-border-width) * 2));
  background: var(--hg__arrow-border-color);
}

.hg__arrow::after {
  top: calc(100% - 1px);
  width: var(--hg__arrow-triangle-size);
  background: var(--hg__arrow-bgcolor);
}

/* transparent */
.hg__arrow-trans {
  padding: 0;
  border-bottom: 0;
  background: none;
  color: currentColor;
}

.hg__arrow-trans::before,
.hg__arrow-trans::after {
  width: calc(50% - calc(var(--hg__arrow-triangle-size) / 2));
  height: var(--hg__arrow-border-width);
  aspect-ratio: initial;
  clip-path: none;
  margin: 0;
  background: var(--hg__arrow-border-color);
}

.hg__arrow-trans::before {
  right: auto;
}

.hg__arrow-trans::after {
  top: 100%;
  left: auto;
}

.hg__arrow-inner {
  display: block;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
}

.hg__arrow-inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: var(--hg__arrow-triangle-size);
  aspect-ratio: 1/1;
  margin: calc(var(--hg__arrow-triangle-size) / 2 * -1) auto auto;
  border-width: var(--hg__arrow-border-width);
  border-style: solid;
  border-color: transparent transparent var(--hg__arrow-border-color) var(--hg__arrow-border-color);
  transform: rotate(-45deg);
}

ラウンド

<!-- round -->
<h2 class="hg hg__round">これは ラウンド 見出しです。</h2>

<!-- round + gradient -->
<h2 class="hg hg__round hg__round-gradient">これは ラウンド+グラデーション 見出しです。</h2>
/* round */
:root {
  --hg__round-border-width: 3px;/* ボーダー太さ */
  --hg__round-border-color: rgb(51,51,51);/* ボーダーカラー */

  /* gradient */
  --hg__round-gradient-border-width: 6px;/* ボーダー太さ */
  --hg__round-gradient-color-1: rgb(94,219,247);/* グラデーション1 */
  --hg__round-gradient-color-2: rgb(241,148,237);/* グラデーション2 */
}

:root[theme="dark"] {
  --hg__round-border-color: rgb(150,150,150);/* ボーダーカラー */
}

.hg__round {
  position: relative;
  margin-right: -5px;
  margin-left: -5px;
  padding: calc(var(--hg-padding-vertical) + var(--hg__round-border-width)) calc(var(--hg-padding-horizontal) + var(--hg__round-border-width));
}

.hg__round::before,
.hg__round::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hg__round::before {
  top: 0;
  padding: var(--hg__round-border-width) var(--hg__round-border-width) 0 var(--hg__round-border-width);
  border-radius: 100px 100px 0 0;
  background: linear-gradient(to right, var(--hg__round-border-color) 0, var(--hg__round-border-color) 80px, rgba(0,0,0,0) 80px, rgba(0,0,0,0) 85px, var(--hg__round-border-color) 85px, var(--hg__round-border-color) 100%);
}

.hg__round::after {
  bottom: 0;
  padding:  0 var(--hg__round-border-width) var(--hg__round-border-width) var(--hg__round-border-width);
  border-radius: 0 0 100px 100px;
  background: linear-gradient(to left, var(--hg__round-border-color) 0, var(--hg__round-border-color) 80px, rgba(0,0,0,0) 80px, rgba(0,0,0,0) 85px, var(--hg__round-border-color) 85px, var(--hg__round-border-color) 100%);
}

/* gradient */
.hg__round-gradient {
  padding: calc(var(--hg-padding-vertical) + var(--hg__round-gradient-border-width)) calc(var(--hg-padding-horizontal) + var(--hg__round-gradient-border-width));
}

.hg__round-gradient::before {
  height: 100%;
  padding: var(--hg__round-gradient-border-width);
  border-radius: 100px;
  background: linear-gradient(45deg, var(--hg__round-gradient-color-1), var(--hg__round-gradient-color-2));
}

.hg__round-gradient::after {
  content: none;
}

ボックス

<!-- box -->
<h2 class="hg hg__box">
<span class="hg__box-inner">これは ボックス 見出しです。</span>
</h2>

<!-- box + shade -->
<h2 class="hg hg__box hg__box-shade">
<span class="hg__box-inner">これは ボックス+シェイド 見出しです。</span>
</h2>
/* box */
:root {
  --hg__box-border-width: 3px;/* ボーダー太さ, 1〜8pxまで指定可 */
  --hg__box-border-color: rgb(51,51,51);/* ボーダーカラー */

  /* shade */
  --hg__box-bgcolor: rgb(230,230,230);/* 背景色 */
  --hg__box-color: rgb(51,51,51);/* 背景色 */
  --hg__box-shade: rgb(200,200,200);/* 右端(明るい方)の色 */
}

:root[theme="dark"] {
  --hg__box-border-color: rgb(150,150,150);/* ボーダーカラー */
}


.hg__box {
  position: relative;
  width: calc(100% - 10px);
  padding: 0 0 10px;
}

.hg__box-inner {
  display: block;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  border: var(--hg__box-border-width) solid var(--hg__box-border-color);
}

.hg__box::before,
.hg__box::after {
  content: "";
  display: block;
  position: absolute;
  border: var(--hg__box-border-width) solid var(--hg__box-border-color);
  transform-origin: left;
}

.hg__box::before {
  top: calc(100% - 10px);
  left: 5px;
  width: 100%;
  height: 10px;
  border-top: 0;
  border-right: 0;
  transform: skewX(45deg);
}

.hg__box::after {
  top: 0;
  left: 100%;
  width: 10px;
  height: calc(100% - 10px);
  border-left: 0;
  transform: skewY(45deg);
}

/* shade */
.hg__box-shade .hg__box-inner {
  border: 0;
  background: var(--hg__box-bgcolor);
  color: var(--hg__box-color);
}

.hg__box-shade::before,
.hg__box-shade::after {
  border: 0;
}

.hg__box-shade::before {
  background: var(--hg__box-shade);
  filter: brightness(.6);
}

.hg__box-shade::after {
  background: var(--hg__box-shade);
}

リボン

<!-- ribbon -->
<h2 class="hg hg__ribbon">これは リボン 見出しです。</h2>

<!-- ribbon + folded -->
<h2 class="hg hg__ribbon-folded">これは リボン+フォールド 見出しです。</h2>

<!-- ribbon + drop -->
<h2 class="hg hg__ribbon-drop">これは リボン+ドロップ 見出しです。</h2>

<!-- ribbon + drop bottom -->
<h2 class="hg hg__ribbon-drop hg__ribbon-drop_bottom">これは リボン+ドロップボトム 見出しです。</h2>
/* ribbon */
:root {
  --hg__ribbon-bgcolor: rgb(215,199,231);/* 背景色 */
  --hg__ribbon-color: rgb(51,51,51);/* 文字色 */
  --hg__ribbon-tail-size: 18px;/* しっぽサイズ, 数値を大きくすると鋭くなります */

  /* folded */
  --hg__ribbon-folded-tail-distance: 26px;/* 本体としっぽの距離 */
  --hg__ribbon-folded-step-size: 10px;/* 段差 */
  --hg__ribbon-folded-notch-size: 14px;/* 切り込み深さ */

  /* drop, drop bottom */
  --hg__ribbon-drop-bgcolor: rgb(230,230,230);/* 背景色 */
  --hg__ribbon-drop-color: rgb(51,51,51);/* 文字色 */
  --hg__ribbon-drop-tail-color: rgb(204,52,63);/* リボン色 */
}


.hg__ribbon {
  clip-path: polygon(100% 0%, calc(100% - var(--hg__ribbon-tail-size)) 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  margin-right: -5px;
  margin-left: -5px;
  background: var(--hg__ribbon-bgcolor);
  color: var(--hg__ribbon-color);
}

/* folded */
.hg__ribbon-folded {
  clip-path: polygon(0 var(--hg__ribbon-folded-step-size), var(--hg__ribbon-folded-tail-distance) var(--hg__ribbon-folded-step-size),var(--hg__ribbon-folded-tail-distance) 0,calc(100% - var(--hg__ribbon-folded-tail-distance)) 0,calc(100% - var(--hg__ribbon-folded-tail-distance)) var(--hg__ribbon-folded-step-size),100% var(--hg__ribbon-folded-step-size),calc(100% - var(--hg__ribbon-folded-notch-size)) calc(50% + var(--hg__ribbon-folded-step-size)/2),100% 100%,calc(100% - var(--hg__ribbon-folded-tail-distance) - var(--hg__ribbon-folded-step-size)) 100%,calc(100% - var(--hg__ribbon-folded-tail-distance) - var(--hg__ribbon-folded-step-size)) calc(100% - var(--hg__ribbon-folded-step-size)),calc(var(--hg__ribbon-folded-tail-distance) + var(--hg__ribbon-folded-step-size)) calc(100% - var(--hg__ribbon-folded-step-size)),calc(var(--hg__ribbon-folded-tail-distance) + var(--hg__ribbon-folded-step-size)) 100%,0 100%,var(--hg__ribbon-folded-notch-size) calc(50% + var(--hg__ribbon-folded-step-size)/2));
  padding: var(--hg-padding-vertical) calc(var(--hg__ribbon-folded-tail-distance) + var(--hg__ribbon-folded-step-size) + var(--hg-padding-horizontal)) calc(var(--hg-padding-vertical) + var(--hg__ribbon-folded-step-size));
  background: conic-gradient(at left var(--hg__ribbon-folded-tail-distance) bottom var(--hg__ribbon-folded-step-size),
              rgba(0,0,0,0) 25%,rgba(0,0,0,.6) 0 37.5%,rgba(0,0,0,.3) 0) 0 /50% no-repeat,
              conic-gradient(at right var(--hg__ribbon-folded-tail-distance) bottom var(--hg__ribbon-folded-step-size),
              rgba(0,0,0,.3) 62.5%,rgba(0,0,0,.6) 0 75%,rgba(0,0,0,0) 0) 100%/50% no-repeat;
  background-color: var(--hg__ribbon-bgcolor);
}

/* drop */
.hg__ribbon-drop {
  position: relative;
  clip-path: none;
  padding: .8em 1em .8em 56px;
  background: var(--hg__ribbon-drop-bgcolor);
  color: var(--hg__ribbon-drop-color);
}

.hg__ribbon-drop::before {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: 6px;
  width: 42px;
  aspect-ratio: 5/6;
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 85%, 0% 100%);
  background: linear-gradient(to right, var(--hg__ribbon-drop-tail-color) 0, var(--hg__ribbon-drop-tail-color) 6px, var(--hg__ribbon-drop-bgcolor) 6px, var(--hg__ribbon-drop-bgcolor) 10px, var(--hg__ribbon-drop-tail-color) 10px, var(--hg__ribbon-drop-tail-color) 32px, var(--hg__ribbon-drop-bgcolor) 32px, var(--hg__ribbon-drop-bgcolor) 36px, var(--hg__ribbon-drop-tail-color) 36px, var(--hg__ribbon-drop-tail-color) 42px);
}

/* drop bottom */
.hg__ribbon-drop_bottom::before {
  clip-path: polygon(0 0, 100% 1%, 100% 65%, 50% 100%, 0 65%);
}

平行四辺形

<!-- parallelogram -->
<h2 class="hg hg__parallelogram">
<span class="hg__parallelogram-inner">これは 平行四辺形 見出しです。</span>
</h2>

<!-- parallelogram + layer -->
<h2 class="hg hg__parallelogram hg__parallelogram-layer">
<span class="hg__parallelogram-inner">これは 平行四辺形+レイヤー 見出しです。</span>
</h2>
/* parallelogram */
:root {
  --hg__parallelogram-bgcolor: rgb(30,30,30);/* 背景色 */
  --hg__parallelogram-color: rgb(253,169,3);/* 文字色 */
  --hg__parallelogram-text_align: center;/* 位置揃え, left or center */
}

:root[theme="dark"] {
  --hg__parallelogram-bgcolor: rgb(30,30,30);/* 背景色 */
  --hg__parallelogram-color: rgb(253,169,3);/* 文字色 */
}

.hg__parallelogram {
  position: relative;
  margin: calc(var(--hg-margin-vertical) + 16px) 0;
  padding: 0;
}

.hg__parallelogram-inner {
  display: block;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  margin: 0;
  padding: .8em 38px;
  background: var(--hg__parallelogram-bgcolor);
  color: var(--hg__parallelogram-color);
  text-align: var(--hg__parallelogram-text_align);
}

.hg__parallelogram::before,
.hg__parallelogram::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 100%;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  background: var(--hg__parallelogram-color);
}

.hg__parallelogram::before {
  top: -16px;
  left: 18px;
}

.hg__parallelogram::after {
  bottom: -16px;
  right: 18px;
}

/* layer */
.hg__parallelogram-layer::before {
  content: none;
}

.hg__parallelogram-layer::after {
  bottom: -7px;
  width: 60%;
  clip-path: none;
  padding: 0 20px 12px 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transform: skew(-10deg,0);
}

反転

<!-- inverted -->
<h2 class="hg hg__inverted">
<span class="hg__inverted-inner">これは 反転 見出しです。</span>
</h2>
/* inverted */
:root {
  --hg__inverted-bgcolor-1: rgb(54,49,125);/* 背景色1 */
  --hg__inverted-bgcolor-2: rgb(212,206,58);/* 背景色2 */

  --hg__inverted-degree: 45deg;/* 角度 */
  --hg__inverted-text_align: center;/* 位置揃え, left or center */
}

:root[theme="dark"] {
  --hg__inverted-bgcolor-1: rgb(54,49,125);/* 背景色1 */
  --hg__inverted-bgcolor-2: rgb(212,206,58);/* 背景色2 */
}

.hg__inverted {
  position: relative;
  z-index: 1;
  padding: 0;
}

.hg__inverted-inner {
  display: block;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  background: linear-gradient(var(--hg__inverted-degree), var(--hg__inverted-bgcolor-1) 0 50%, var(--hg__inverted-bgcolor-2) 50%);
  -webkit-background-clip: text;
  color: transparent;
  text-align: var(--hg__inverted-text_align);
}

.hg__inverted::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--hg__inverted-degree), var(--hg__inverted-bgcolor-2) 50%, var(--hg__inverted-bgcolor-1) 0 50%);
}

井桁

<!-- curb -->
<h2 class="hg hg__curb">これは 井桁 見出しです。</h2>

<!-- curb multiple -->
<h2 class="hg hg__curb hg__curb-multiple">これは 井桁+複数 見出しです。</h2>
/* curb */
:root {
  --hg__curb-border-width: 2px;/* ボーダー太さ */
  --hg__curb-border-color: rgb(4,108,118);/* ボーダーカラー */

  /* multiple */
  --hg__curb-border-distance: 5px;/* ボーダー同士距離 */
}

:root[theme="dark"] {
  --hg__curb-border-color: rgb(4,108,118);/* ボーダーカラー */
}

.hg__curb {
  position: relative;
  border-top: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
  border-bottom: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
}

.hg__curb::before,
.hg__curb::after {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  width: var(--hg__curb-border-width);
  height: calc(100% + 14px);
  background: var(--hg__curb-border-color);
  pointer-events: none;
}
.hg__curb::before {
  left: 7px;
}
.hg__curb::after {
  right: 7px;
}

/* multiple */
.hg__curb-multiple {
  width: calc(100% - calc(var(--hg__curb-border-distance) * 2));
  margin-right: auto;
  margin-left: auto;
  padding: calc(var(--hg-padding-vertical) + calc(var(--hg__curb-border-width) + var(--hg__curb-border-distance))) calc(var(--hg-padding-horizontal) + calc(var(--hg__curb-border-width) + var(--hg__curb-border-distance)));
  border: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
}

.hg__curb-multiple::before,
.hg__curb-multiple::after {
  width: calc(100% + var(--hg__curb-border-distance));
  height: calc(100% + var(--hg__curb-border-distance));
  background: transparent;
}

.hg__curb-multiple::before {
  top: var(--hg__curb-border-distance);
  left: var(--hg__curb-border-distance);
  border-top: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
  border-left: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
}

.hg__curb-multiple::after {
  top: auto;
  bottom: var(--hg__curb-border-distance);
  right: var(--hg__curb-border-distance);
  border-right: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
  border-bottom: var(--hg__curb-border-width) solid var(--hg__curb-border-color);
}

カラフル

<h2 class="hg hg__colorful">これは カラフル 見出しです。</h2>
/* colorful */
:root {
  --hg__colorful-color-1: rgb(246,146,154);/* 四角色 */
  --hg__colorful-color-2: rgb(92,124,181);
  --hg__colorful-color-3: rgb(211,228,191);

  --hg__colorful-size: 8px;/* 四角大きさ */
  --hg__colorful-distance: 4px;/* 四角同士の距離 */

  --hg__colorful-top: "";/* 上のラインが不要ならこの一行削除 */
}

.hg__colorful {
  position: relative;
  padding: calc(var(--hg-padding-vertical) + var(--hg__colorful-size)) var(--hg-padding-horizontal);
}

.hg__colorful::before,
.hg__colorful::after {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hg__colorful-size);
  background: repeating-linear-gradient(to right, var(--hg__colorful-color-1) 0, var(--hg__colorful-color-1) var(--hg__colorful-size), rgba(0,0,0,0) var(--hg__colorful-size), rgba(0,0,0,0) calc(var(--hg__colorful-size) + var(--hg__colorful-distance)), var(--hg__colorful-color-2) calc(var(--hg__colorful-size) + var(--hg__colorful-distance)), var(--hg__colorful-color-2) calc(var(--hg__colorful-size) * 2 + var(--hg__colorful-distance)), rgba(0,0,0,0) calc(var(--hg__colorful-size) * 2 + var(--hg__colorful-distance)), rgba(0,0,0,0) calc(var(--hg__colorful-size) * 2 + var(--hg__colorful-distance) * 2), var(--hg__colorful-color-3) calc(var(--hg__colorful-size) * 2 + var(--hg__colorful-distance) * 2), var(--hg__colorful-color-3) calc(var(--hg__colorful-size) * 3 + var(--hg__colorful-distance) * 2), rgba(0,0,0,0) calc(var(--hg__colorful-size) * 3 + var(--hg__colorful-distance) * 2), rgba(0,0,0,0) calc(var(--hg__colorful-size) * 3 + var(--hg__colorful-distance) * 3));
}

.hg__colorful::before {
  content: var(--hg__colorful-top, none);
  top: 0;
}

.hg__colorful::after {
  content: "";
  bottom: 0;
}

ダイレクション

<!-- direction -->
<h2 class="hg hg__direction">これは ダイレクション 見出しです。</h2>

<!-- direction + fill -->
<h2 class="hg hg__direction hg__direction-fill">これは ダイレクション+塗り 見出しです。</h2>
/* direction */
:root {
  --hg__direction-radius: 6px;/* 角丸 */
  --hg__direction-bgcolor: rgb(237,219,223);/* 背景色 */
  --hg__direction-color: rgb(51,51,51);/* 文字色 */

  --hg__direction-arrow-size: 16px;/* 矢印大きさ(横幅) */
  --hg__direction-arrow-color: rgb(231,56,95);/* 矢印色 */

  /* fill */
  --hg__direction-fill-arrow-size: 30px;
}


.hg__direction {
  position: relative;
  padding: .6em var(--hg-padding-horizontal) .6em calc(var(--hg__direction-arrow-size) * 1.5 + 1.2em);
  border-radius: var(--hg__direction-radius);
  background: var(--hg__direction-bgcolor);
  color: var(--hg__direction-color);
}

.hg__direction::before,
.hg__direction::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--hg__direction-arrow-size);
  height: calc(100% - 1em);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0 0);
  background: var(--hg__direction-arrow-color);
}

.hg__direction::before {
  top: .5em;
  left: .5em;
}

.hg__direction::after {
  top: .5em;
  left: calc(calc(var(--hg__direction-arrow-size) / 2) + var(--hg__direction-arrow-size));
}

/* fill */
.hg__direction-fill::after {
  content: none;
}

.hg__direction-fill::before {
  width: var(--hg__direction-fill-arrow-size);
  clip-path: polygon(70% 0, 100% 50%, 70% 100%, 0% 100%, 30% 50%, 0 0);
}

アングル

<!-- angle -->
<h2 class="hg hg__angle">
<span class="hg__angle-inner">これは アングル 見出しです。</span>
</h2>

<!-- angle + dot -->
<h2 class="hg hg__angle hg__angle-dot">
<span class="hg__angle-inner">これは アングル+ドット 見出しです。</span>
</h2>
/* angle */
:root {
  --hg__angle-border-width: 2px;/* ボーダー太さ */
  --hg__angle-border-color: rgb(51,51,51);/* ボーダーカラー */
  --hg__angle-text_align: center;/* 位置合わせ, left or center */

  --hg__angle-size: 30px;/* 角サイズ */
  --hg__angle-bgcolor: rgb(189,176,169);/* 角カラー */

  /* dot */
  --hg__angle-dot-color: rgb(200,200,200);/* ドットカラー */
}

:root[theme="dark"] {
  --hg__angle-border-width: 2px;/* 文字色 */
  --hg__angle-border-color: rgb(150,150,150);/* 文字色 */

  --hg__angle-bgcolor: rgb(189,176,169);/* 角カラー */

  --hg__angle-dot-color: rgb(200,200,200);/* ドットカラー */
}

.hg__angle {
  position: relative;
  padding: var(--hg-padding-vertical) calc(var(--hg__angle-size) / 2);
  text-align: var(--hg__angle-text_align);
}

.hg__angle::before,
.hg__angle::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--hg__angle-size) + 10px);
  height: calc(var(--hg__angle-size) + 10px);
}

.hg__angle::before {
  top: 0;
  left: 0;
  border-top: var(--hg__angle-border-width) solid var(--hg__angle-border-color);
  border-left: var(--hg__angle-border-width) solid var(--hg__angle-border-color);
}

.hg__angle::after {
  right: 0;
  bottom: 0;
  border-right: var(--hg__angle-border-width) solid var(--hg__angle-border-color);
  border-bottom: var(--hg__angle-border-width) solid var(--hg__angle-border-color);
}

.hg__angle-inner::before,
.hg__angle-inner::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--hg__angle-size);
  height: var(--hg__angle-size);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: var(--hg__angle-bgcolor);
}

.hg__angle-inner::before {
  top: 5px;
  left: 5px;
}

.hg__angle-inner::after {
  right: 5px;
  bottom: 5px;
  transform: scale(-1, -1);
}

.hg__angle-dot .hg__angle-inner::before,
.hg__angle-dot .hg__angle-inner::after {
  background-color: transparent;
  background-image: radial-gradient(var(--hg__angle-dot-color) 30%, rgba(0,0,0,0) 0);
  background-size: 7px 7px;
}

プレート

<!-- plate -->
<h2 class="hg hg__plate">これは プレート 見出しです。</h2>

<!-- round -->
<h2 class="hg hg__plate-round">これは プレート+ラウンド 見出しです。</h2>

<!-- point top -->
<h2 class="hg hg__plate-point">
<span class="hg__plate-inner">これは プレート+ポイント 見出しです。</span>
</h2>

<!-- metal gold -->
<h2 class="hg hg__plate-metal hg__plate-metal-gold">
<span class="hg__plate-inner">これは プレート+メタリックゴールド 見出しです。</span>
</h2>

<!-- metal silver -->
<h2 class="hg hg__plate-metal hg__plate-metal-silver">
<span class="hg__plate-inner">これは プレート+メタリックシルバー 見出しです。</span>
</h2>
/* plate */
:root {
  --hg__plate-bgcolor: white;/* 背景色 */
  --hg__plate-color: rgb(51,51,51);/* 文字色 */

  --hg__plate-border-width: 8px;/* ボーダー太さ */
  --hg__plate-border-color: rgb(51,51,51);/* ボーダーカラー */

  --hg__plate-text_align: center;/* 位置揃え, left or center */

  /* round */
  --hg__plate-round-bgcolor: rgb(51,51,51);/* 背景色 */
  --hg__plate-round-color: rgb(240,240,240);/* 文字色 */

  /* point */
  --hg__plate-point-bgcolor: white;/* 背景色 */
  --hg__plate-point-color: rgb(51,51,51);/* 文字色 */

  --hg__plate-point-border-width: 6px;/* ボーダー太さ */
  --hg__plate-point-border-color: rgb(30,30,30);/* ボーダーカラー */

  /* metal */
  --hg__plate-metal-bgcolor: white;/* 背景色 */
  --hg__plate-metal-color: rgb(51,51,51);/* 文字色 */
}

:root[theme="dark"] {
  --hg__plate-border-color: rgb(80,80,80);/* ボーダーカラー */

  /* round */
  --hg__plate-round-bgcolor: rgb(80,80,80);/* 背景色 */
  --hg__plate-round-color: rgb(240,240,240);/* 文字色 */

  /* point top */
  --hg__plate-point-border-color: rgb(120,120,120);/* ボーダーカラー */
}

.hg__plate {
  position: relative;
  width: calc(100% - 40px);
  margin-right: auto;
  margin-left: auto;
  border: var(--hg__plate-border-width) solid var(--hg__plate-border-color);
  background: var(--hg__plate-bgcolor);
  color: var(--hg__plate-color);
  text-align: var(--hg__plate-text_align);
}

.hg__plate::before,
.hg__plate::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  aspect-ratio: 1/2;
  margin: auto;
}

.hg__plate::before {
  right: calc(100% + var(--hg__plate-border-width));
  border-radius: 100px 0 0 100px;
  background: radial-gradient(circle closest-side at 17px 50%, rgba(0,0,0,0) 0% 6px, var(--hg__plate-border-color) 6px 100%);
}

.hg__plate::after {
  left: calc(100% + var(--hg__plate-border-width));
  border-radius: 0 100px 100px 0;
  background: radial-gradient(circle closest-side at 3px 50%, rgba(0,0,0,0) 0% 6px, var(--hg__plate-border-color) 6px 100%);
}

/* round */
.hg__plate-round {
  position: relative;
  padding: .8em calc(20px + .6em);
  overflow: hidden;
  border-radius: 100px;
  background: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20px, var(--hg__plate-round-bgcolor) 20px, var(--hg__plate-round-bgcolor) calc(100% - 20px), rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,0) 100%);
  color: var(--hg__plate-round-color);
}

.hg__plate-round::before,
.hg__plate-round::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 100%;
  margin: auto;
}

.hg__plate-round::before {
  left: 0;
  background: radial-gradient(circle closest-side at 13px 50%, rgba(0,0,0,0) 0% 5px, var(--hg__plate-round-bgcolor) 5px 100%);
}

.hg__plate-round::after {
  right: 0;
  background: radial-gradient(circle closest-side at 7px 50%, rgba(0,0,0,0) 0% 5px, var(--hg__plate-round-bgcolor) 5px 100%);
}

/* point */
.hg__plate-point {
  position: relative;
  padding: 0;
}

.hg__plate-point::before,
.hg__plate-point::after {
  content: "";
  display: block;
  width: 20%;
  max-width: 76px;
  margin: auto;
  aspect-ratio: 2/1;
}

.hg__plate-point::before {
  border-radius: 100px 100px 0 0;
  background: radial-gradient(circle closest-side at 50% 12px, rgba(0,0,0,0) 0% 5px, var(--hg__plate-point-border-color) 5px 100%);
}

.hg__plate-point::after {
  border-radius: 0 0 100px 100px;
  background: radial-gradient(circle closest-side at 50% calc(100% - 12px), rgba(0,0,0,0) 0% 5px, var(--hg__plate-point-border-color) 5px 100%);
}

.hg__plate-point .hg__plate-inner {
  display: block;
  position: relative;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  border: var(--hg__plate-point-border-width) solid var(--hg__plate-point-border-color);
  background: var(--hg__plate-point-bgcolor);
  color: var(--hg__plate-point-color);
}

.hg__plate-point .hg__plate-inner::before,
.hg__plate-point .hg__plate-inner::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  max-width: 300px;
  height: 10px;
  margin: auto;
  background: var(--hg__plate-point-border-color);
}

.hg__plate-point .hg__plate-inner::before {
  top: calc(calc(10px + var(--hg__plate-point-border-width)) * -1);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0% 100%);
  margin: calc(calc(10px + var(--hg-padding-vertical) * -1)) auto 0;
}

.hg__plate-point .hg__plate-inner::after {
  bottom: calc(calc(10px + var(--hg__plate-point-border-width)) * -1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%);
  margin: 0 auto calc(calc(10px + var(--hg-padding-vertical) * -1));
}

/* metal */
.hg__plate-metal {
  padding: 8px;
}

.hg__plate-metal-gold {
  background: repeating-linear-gradient(45deg, rgb(238,215,137) 0, rgb(155,142,85) 60px, rgb(155,142,85), rgb(238,215,137) 120px);
}

.hg__plate-metal-silver {
  background: repeating-linear-gradient(45deg, rgb(189,187,189) 0, rgb(84,84,87) 60px, rgb(84,84,87), rgb(189,187,189) 120px);
}

.hg__plate-metal .hg__plate-inner {
  display: block;
  padding: var(--hg-padding-vertical) var(--hg-padding-horizontal);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  background: var(--hg__plate-metal-bgcolor);
  color: var(--hg__plate-metal-color);
}

タグ

<!-- tag -->
<h2 class="hg hg__tag">
<span class="hg__tag-inner">これは タグ 見出しです。</span>
</h2>

<!-- tag + polygon -->
<h2 class="hg hg__tag-polygon">
<span class="hg__tag-inner">これは タグ+多角形 見出しです。</span>
</h2>
/* tag */
:root {
  --hg__tag-bgcolor: rgb(215,190,190);/* 背景色 */
  --hg__tag-color: rgb(51,51,51);/* 文字色 */

  --hg__tag-border-color: rgb(169,144,144);/* 縫い目色 */

  --hg__tag-string-color: rgb(51,51,51);/* 紐の色 */

  /* polygon */
  --hg__tag-polygon-bgcolor: rgb(170,21,11);/* 背景色 */
  --hg__tag-polygon-color: white;/* 文字色 */

  --hg__tag-polygon-border-color: rgb(220,220,220);/* 背景色 */
}

.hg__tag {
  position: relative;
  z-index: 1;
  width: calc(100% - 10px);
  margin-left: auto;
  padding: 0;
  color: var(--hg__tag-color);
}

.hg__tag::before,
.hg__tag::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 100px;
  background: var(--hg__tag-string-color);
}

.hg__tag::before {
  z-index: 1;
  width: 30px;
  height: 3px;
  transform: rotate(30deg) translate(-12px, 0);
}

.hg__tag::after {
  z-index: -1;
  width: 50px;
  height: 3px;
  transform: rotate(50deg) translate(-28px, 6px);
}

.hg__tag .hg__tag-inner {
  display: block;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0% 50%);
  padding: calc(var(--hg-padding-vertical) + 6px) var(--hg-padding-horizontal) calc(var(--hg-padding-vertical) + 6px) calc(var(--hg-padding-horizontal) + 12px);
  background: radial-gradient(circle closest-side at 16px 50%, rgba(0,0,0,0) 0% 5px, var(--hg__tag-bgcolor) 5px 100%);
}

.hg__tag .hg__tag-inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 20px;
  width: calc(100% - 28px);
  height: calc(100% - 12px);
  border-top: 2px dashed var(--hg__tag-border-color);
  border-bottom: 2px dashed var(--hg__tag-border-color);
  pointer-events: none;
}

/* polygon */
.hg__tag-polygon {
  display: flex;
  padding: 0 8px;
}

.hg__tag-polygon::before,
.hg__tag-polygon::after {
  content: "";
  display: block;
  width: 26px;
  box-shadow: 0 0 0 8px var(--hg__tag-polygon-bgcolor);
  background: var(--hg__tag-polygon-bgcolor);
  border: 2px dashed var(--hg__tag-polygon-border-color);
}

.hg__tag-polygon::before{
  margin: 16px -12px 16px 0;
  border-radius: 100px 0 0 100px;
}

.hg__tag-polygon::after{
  margin: 16px 0 16px -12px;
  border-radius: 0 100px 100px 0;
}

.hg__tag-polygon .hg__tag-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 60px;
  position: relative;
  z-index: 1;
  padding: .8em 1em;
  border-radius: 6px;
  outline: 2px dashed var(--hg__tag-polygon-border-color);
  outline-offset: -8px;
  background: var(--hg__tag-polygon-bgcolor);
  color: var(--hg__tag-polygon-color);
}

.hg__tag-polygon .hg__tag-inner::before,
.hg__tag-polygon .hg__tag-inner::after {
  content: "";
  display: block;
  width: 10px;
  height: calc(100% - 32px);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: var(--hg__tag-polygon-bgcolor);
}

.hg__tag-polygon .hg__tag-inner::before {
  left: 0;
}

.hg__tag-polygon .hg__tag-inner::after {
  right: 0;
}
コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)