【コピペでOK】CSSで作る見出しデザイン

CSSで作る見出しデザイン
2024.04.22
この記事は約24分で読めます。
当サイトはアフィリエイト広告を利用しています。

見出し(h1～h6)のデザインに悩むことは多いと思います。今回はCSSのコピペで使える見出しデザインをご紹介します。そのまま使ってもアレンジしても構いません。

便利ツール

一部の見出しにはグラデーション・ストライプを使用しています。CSSでグラデーションとストライプを作成する際にはジェネレーターを使用すると便利なので、ご紹介しておきます。

CSS Gradient – Generator, Maker, and Background
As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blo
cssgradient.io
ストライプCSSジェネレーター | WEB CREATES
簡単にストライプ柄のCSSを作成できるCSSジェネレーターです。斜めのストライプ柄の背景をCSSで作成したい場合にお使いください。CSS STRIPE GENERATOR
web-creates.com

HTML部分

HTML部分は全て共通で下記になります。h2タグにCSSでデザインをつけていきます。適宜タグの変更やclassの追加などしてご使用ください。

<h2>見出しのデザイン</h2>

シンプルなデザインの見出し

背景色を使う

背景に単色を使った簡単なデザイン。

背景色を使った見出しデザイン
h2{
  background-color: #9ad5db;/*背景色*/
  padding: .5em;/*テキストの余白*/
}

下線を引く

下線を引いたオーソドックスで使いやすいデザイン。

下線を引いた見出しのデザイン
h2{
  border-bottom: 2px solid #16a9ba;/*下線の太さ・形状・色*/
  padding-bottom: .2em;/*テキストと下線の間の余白*/
}

破線を引く

下線を破線に変えたデザインです。

破線を使ったデザインの見出し
h2{
  border-bottom: 2px dashed #16a9ba;/*下線の太さ・形状・色*/
  padding-bottom: .2em;/*テキストと下線の間の余白*/
}

左にラインを入れる

文頭に太いラインを入れたデザインです。

左側にラインを入れたデザインの見出し
h2{
  border-left: 5px solid #16a9ba;/*左線の太さ・形状・色*/
  padding: .2em .4em;/*テキストの上下の余白・左右の余白*/
}

上下にラインを入れる

上下にラインを入れたデザインです。

上下にラインを入れたデザインの見出し
h2{
  border-top: 3px solid #16a9ba;/*上の線のスタイル*/
  border-bottom: 3px solid #16a9ba;/*下の線のスタイル*/
  padding: .5em 0;/*上下の余白・左右の余白*/
}

左と下にラインを入れる

L字型にラインを入れたデザインです。下線は破線にしました。

左と下にラインを入れたデザインの見出し
h2{
  border-left: 6px solid #16a9ba;/*左線の太さ・形状・色*/
  border-bottom: 2px dashed #16a9ba;/*下線の太さ・形状・色*/
  padding: .3em .5em;/*上下の余白・左右の余白*/
}

二重線を入れる

下線を二重線にしたデザインです。

二重線を入れたデザインの見出し
h2{
  border-bottom: 6px double #16a9ba;
  padding-bottom: .2em;
}

中央に短い下線を引く

中央に短い下線を引いたデザインです。センター寄りの見出しになります。

中央に短い下線を引いたデザインの見出し
h2{
  position: relative;
  text-align: center;
}
h2::before{
  position: absolute;
  bottom: -20px;
  left: calc(50% - 40px);
  content: '';
  height: 5px;/*下線の太さ*/
  width: 80px;/*下線の長さ*/
  background-color: #16a9ba;/*下線の色*/
}

付箋風①

付箋風のデザインです。シンプルで使いやすく、色の組み合わせによって雰囲気も変えやすいです。

付箋風デザインの見出し
h2{
  border-left: 8px solid #16a9ba;/*左ラインの太さ・形状・色*/
  background-color: #eee;/*背景色*/
  padding: .6em;/*テキスト周りの余白*/
}

付箋風②

ボーダーを上に入れたタイプの付箋風デザインです。

ボーダーを上に入れた付箋風デザインの見出し
h2{
  border-top: 5px solid #16a9ba;/*上ラインの太さ・形状・色*/
  background-color: #eee;/*背景色*/
  padding: .5em;/*テキスト周りの余白*/
}

おしゃれなデザインの見出し

下線の色が切り替わる

下線の色が途中で切り替わるデザインです。組み合わせる色によって雰囲気も変わり、おしゃれ且つ使いやすいです。

下線の色が切り替わるデザインの見出し
h2{
  position: relative;
  border-bottom: 3px solid #ddd;/*右側の下線の色*/
  padding: .3em 0;
}
h2::before{
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 30%;/*左側の下線の長さ*/
  height: 3px;
  background-color: #16a9ba;/*左側の下線の色*/
}

h2にグレーの下線をつけ、::beforeで色を重ねている状態です。下線の太さを変えたい時には、border-bottomの線の太さ、bottom、heightの数字を揃えてください。

頭文字を強調する

見出しの頭文字だけフォントを少し大きくしてカラーをつけたデザインです。下線とかを合わせても良い感じです。

頭文字を強調したデザイン
h2::first-letter{
  font-size: 1.4em;/*頭文字のフォントサイズ*/
  color: #16a9ba;/*頭文字の色*/
}

英字を上につける

ちょっとした英字を上につけたデザインです。

英字を上につける
h2{
  position: relative;
}
h2::before{
  position: absolute;
  top: -1.0em;
  font-family: "Roboto", sans-serif;/*英字用のフォント*/
  content: 'DESIGN';/*表示させる英単語*/
  font-size: .9em;
  font-weight: 400;
  font-style: italic;
  color: #16a9ba;/*英字の文字色*/
}

英字を重ねる

英字と見出しを重ねたデザインです。英字には筆記体フォントを使うのがおすすめです。使用するフォント、表示させる単語などによって調整が必要になってきます。

英語と日本語を重ねたデザインの見出し
h2{
  position: relative;
}
h2::before{
  position: absolute;
  top: -50px;
  content: 'Design';/*表示させる英単語*/
  font-family: "Allura", cursive;/*英字用のフォント*/
  font-size: 3.0em;
  font-weight: 400;
  transform: translateX(-15%) rotate(-12deg);/*水平方向の位置と傾き*/
  color: #9ad5db;/*英字の文字色*/
  z-index: -1;
}

左右に横幅いっぱいのラインを入れる

見出しの左右にラインを入れたデザインです。センター寄せの見出しで、一行に収まらない場合には不向きです。ラインは横幅いっぱい伸びます。

左右にラインを入れたデザインの見出し
h2{
  display: flex;
  align-items: center;
}
h2::before,
h2::after{
  flex-grow: 1;
  content: '';
  height: 1px;/*ラインの太さ*/
  background-color: #333;/*ラインの色*/
}
h2::before{
  margin-right: .5em;/*左のラインとテキストの間の余白*/
}
h2::after{
  margin-left: .5em;/*右のラインとテキストの間の余白*/
}

左右に短いラインを入れる

見出しの左右に短いラインを入れたデザインです。

左右に短いラインを入れたデザインの見出し
h2{
  display: flex;
  justify-content: center;
  align-items: center;
}
h2::before,
h2::after{
  content: '';

  height: 1px;/*ラインの太さ*/
  width: 50px;/*ラインの長さ*/
  background-color: #333;/*ラインの色*/
}
h2::before{
  margin-right: .5em;/*右のラインとテキストの間の余白*/
}
h2::after{
  margin-left: .5em;/*左のラインとテキストの間の余白*/
}

かぎ括弧「」をつける

かぎ括弧「」を使ったデザインです。センター寄せの見出しになります。

かぎ括弧「」をつけたデザインの見出し
h2{
  position: relative;
  padding: .5em 1.0em;
  text-align: center;
}
h2::before,
h2::after{
  position: absolute;
  content: '';
  height: 30px;
  width: 20px;
}
h2::before{/*右のかぎ括弧の設定*/
  top: 0;
  left: 0;
  border-left: 3px solid #16a9ba;
  border-top: 3px solid #16a9ba;
}
h2::after{/*左のかぎ括弧の設定*/
  bottom: 0;
  right: 0;
  border-right: 3px solid #16a9ba;
  border-bottom: 3px solid #16a9ba;
}

かぎ括弧[]をつける

かぎ括弧[]を使ったデザインです。左寄せにしましたが、文量が短いとやはりセンター寄せの方が見栄えがいいかもしれません。

かぎ括弧[]をつけたデザインの見出し
h2{
  position: relative;
  padding: .3em 1.2em;
}
h2::before,
h2::after{
  position: absolute;
  top: 0;
  content: '';
  width: 10px;
  height: 100%;
  border-top: 3px solid #16a9ba;
  border-bottom: 3px solid #16a9ba;
}
h2::before{/*右のかぎ括弧の設定*/
  left: 0;
  border-left: 3px solid #16a9ba;
}
h2::after{/*左のかぎ括弧の設定*/
  right: 0;
  border-right: 3px solid #16a9ba;
}

交差したボーダーで囲む

四つ角のボーダーを交差させたデザインです。どれくらいはみ出させるかはお好みで調整してください。

交差したボーダーで囲んだデザインの見出し
h2{
  position: relative;
  border-top: 2px solid #16a9ba;
  border-bottom: 2px solid #16a9ba;
  padding: .5em calc(.5em + 8px); 
}
h2::before,
h2::after{
  position: absolute;
  top: -10px;
  content: '';
  width: 2px;
  height: calc(100% + 20px);
  background-color: #16a9ba;
}
h2::before{
  left: 8px;
}
h2::after{
  right: 8px;
}

グラデーションの下線を引く

下線をグラデーションにしたデザインです。グラデーションの入れ方によっても雰囲気が変わります。

グラデーションの下線を引いたデザインの見出し
h2{
  background: linear-gradient(90deg, rgba(154,213,219,1) 0%, rgba(161,219,154,1) 50%, rgba(154,213,219,1) 100%);/*グラデーションの設定*/
  background-size: 100% 2px;/*下線の幅と太さ*/
  background-repeat: no-repeat;
  background-position: bottom;
  padding: .3em 0;/*テキスト周りの余白*/
}

両端が透明なグラデーションの下線を引く

両端が消えていくグラデーションを引いたデザインです。センター寄せの見出しになります。

両端が透明なグラデーションの下線を引いたデザインの見出し
h2{
  background: linear-gradient(90deg, rgba(154,213,219,0) 0%, rgba(154,213,219,1) 50%, rgba(154,213,219,0) 100%);/*グラデーションの設定*/
  background-size: 100% 2px;/*下線の幅と太さ*/
  background-repeat: no-repeat;
  background-position: bottom;
  padding: .3em 0;
  text-align: center;
}

下にパターンを入れる

斜線を組み合わせて作ったパターンを下に入れたデザインです。

下にパターンを入れたデザインの見出し
h2{
  background-image: repeating-linear-gradient(-45deg, rgba(22, 169, 186, 1), rgba(22, 169, 186, 1) 1px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px),repeating-linear-gradient(45deg, rgba(22, 169, 186, 1), rgba(22, 169, 186, 1) 1px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px);
  background-size: 8px 10px;
  background-repeat: repeat-x;
  background-position: bottom;
  padding: .6em 0;
}

1pxの-45度に傾けた斜線と1pxの45度に傾けた斜線を描き、background-sizeで表示サイズを指定してbackground-repeatで水平方向にのみリピートさせています。線の太さ、傾き、指定したサイズによってパターンは変化します。

2つの円を重ねてワンポイントに入れる

2つの円を重ねてワンポイントにしたデザインです。

2つの重ねた円をワンポイントにしたデザインの見出し
h2{
  position: relative;
  padding: .3em 0;
}
h2::before,
h2::after{
  position: absolute;
  content: '';
  border-radius: 50%;
}
h2::before{/*小さい円の設定*/
  top: 2px;
  left: -18px;
  width: 12px;
  height: 12px;
  background-color: #16a9ba;
  z-index: -2;
}
h2::after{/*大きい円の設定*/
  top: 3px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-color: #9ad5db;
  opacity: .8;
  z-index: -1;
}

流体シェイプをワンポイントに入れる

流体シェイプをワンポイントに入れたデザインです。

流体シェイプをワンポイントに入れたデザインの見出し
h2{
  position: relative;
  padding: .5em;/*テキスト周りの余白*/
}
h2::before{
  position: absolute;
  top: 4px;
  left: 0;
  content: '';
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, rgba(154,213,219,1) 0%, rgba(161,219,154,1) 100%);/*グラデーションの設定*/
  border-radius: 48% 52% 65% 35% / 47% 37% 63% 53%;/*流体シェイプの設定*/
  z-index: -1;
}

紙がめくれてる風

左上がぺろんとめくれてる感じのデザインです。

紙がめくれてる風のデザインの見出し
h2{
  position: relative;
  padding: .5em .8em;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, .2));/*影*/
}
h2::before,
h2::after{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
h2::before{
  width: 100%;
  height: 100%;
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);
  background-color: #9ad5db;/*見出しの背景色*/
  z-index: -1;
}
h2::after{
  width: 16px;
  height: 16px;
  clip-path: polygon(0 16px, 16px 0, 16px 16px);
  background-color: #16a9ba;/*めくれてる部分の色*/
}

かわいいデザインの見出し

ステッチを入れる

ステッチを入れた可愛らしいデザインです。ステッチの太さを1pxにすると印象もまた少し変わります。

ステッチを入れたデザインの見出しです
h2{
  padding: .3em .5em;/*テキスト周りの余白*/
  border: 2px dashed #fff;/*ステッチの設定*/
  background-color: #16a9ba;/*背景色*/
  box-shadow: 0 0 0 8px #16a9ba;/*ステッチの外側の色*/
  color: #fff;/*文字色*/
}

下にストライプを入れる

下にストライプのラインを入れて、見出しを重ねたデザインです。

下に斜線を入れたデザイン
h2{
  position: relative;
}
h2::before{
  position: absolute;
  bottom: 0;
  background: repeating-linear-gradient(-45deg, #9ad5db, #9ad5db 2px, #fff 0, #fff 4px);/*ストライプの設定*/
  content: '';
  width: 100%;
  height: 10px;/*ストライプの高さ*/
  z-index: -1;
}

ストライプと文字の距離を空けたい場合はbottomにマイナスの数値を設定してください。ストライプと文字が重ならなくなるので、ストライプに濃い色を使用しても文字が読みにくくなりません。

背景にストライプを入れる

背景に薄いストライプを入れたデザインです。

背景にストライプを入れたデザインの見出し
h2{
  background: repeating-linear-gradient(-45deg, rgba(154, 213, 219, 0.5), rgba(154, 213, 219, 0.5) 5px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 10px);/*ストライプの設定*/
  padding: .3em;/*テキスト周りの余白*/
  border-radius: 3px;/*角丸*/
}

ストライプ背景に三角形のワンポイントを入れる

背景にストライプを入れ、三角のワンポイントを入れたデザインです。ストライプじゃなくてベタ塗り背景でもいい感じです。

ストライプの背景に三角形のワンポイントを入れたデザインの見出し

h2{
  position: relative;
  background: repeating-linear-gradient(-45deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 2px, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px);
  padding: .5em 1.0em;/*ストライプの設定*/
  border-radius: 3px;/*角丸*/
  overflow: hidden;
}
h2::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-color: #16a9ba;/*三角の色*/
}

リボン風の切り込みを入れる

リボン風の切り込みを入れたデザインです。

リボン風の切り込みを入れたデザインの見出し
h2{
  position: relative;
  padding: .5em .5em .5em calc(15px + .5em);/*テキスト周りの余白*/
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
  background-color: #16a9ba;/*背景色*/
  color: #fff;/*文字色*/
}
h2::before,
h2::after{
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;/*上下のボーダーの太さ*/
  background-color: #fff;/*上下のボーダーの色*/
}
h2::before{
  top: 3px; 
}
h2::after{
  bottom: 3px;
}

リボンのワンポイントをつける

三角をふたつ組み合わせて作ったリボンをワンポイントにあしらったデザインです。

リボンのワンポイントをつけたデザインの見出し
h2{
  position: relative;
  padding: .1em .5em;/*テキスト周りの余白*/
}
h2::before,
h2::after{
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  background-color: #16a9ba;/*リボンの色*/
}
h2::before{/*リボンの左側の設定*/
  top: -5px;
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  transform: rotate(-110deg);
}
h2::after{/*リボンの右側の設定*/
  top: -9px;
  left: 11px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  transform: rotate(70deg);
}

破線とリボンを組み合わせる

下に破線を引いて真ん中にリボンを入れたデザインです。センター寄せの見出しになります。

破線とリボンを組み合わせたデザインの見出し
h2{
  position: relative;
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px dashed #16a9ba;/*下線の太さ・形状・色*/
}
h2::before,
h2::after{
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  background-color: #16a9ba;/*リボンの色*/
}
h2::before{/*リボンの左側の設定*/
  bottom: -9px;
  left: calc(50% - 16px);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
h2::after{/*リボンの右側の設定*/
  bottom: -9px;
  left: calc(50% - 2px);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

縦ストライプを下に入れる

下に2色の縦ストライプを入れたデザインです。

2色の縦ストライプを下に入れたデザインの見出し
h2{
  padding: .5em 0;
  background: repeating-linear-gradient(90deg, rgba(154, 213, 219, 1), rgba(154, 213, 219, 1) 10px, rgba(53, 7, 31, 1) 0, rgba(53, 7, 31, 1) 20px);/*ストライプの設定*/
  background-size: 20px 5px;
  background-repeat: repeat-x;
  background-position: bottom;
}

背景に市松模様を入れる

背景に市松模様を入れたデザインです。文字がみにくくなりがちなので使用する色などに気を付けてください。今回はtext-shadowで文字を縁取りしています。

背景に市松模様を入れたデザインの見出し
h2{
  padding: .5em;/*テキスト周りの余白*/
  background: linear-gradient(45deg, #9ad5db 25%, transparent 25%, transparent 75%, #9ad5db 75%), linear-gradient(45deg, #9ad5db 25%, transparent 25%, transparent 75%, #9ad5db 75%);/*透明と#9ad5dbの市松模様*/
  background-color: #eff9ea;/*上で作った市松模様の透明部分に背景色を入れている*/
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  color: #fff;/*文字色*/
  text-shadow: 1px 1px 0 #333, -1px -1px 0 #333, -1px 1px 0 #333, 1px -1px 0 #333, 0px 1px 0 #333,  0-1px 0 #333, -1px 0 0 #333, 1px 0 0 #333;/*文字の縁取り*/
}

背景に斜めチェック柄を入れる

背景に斜めチェック柄を入れたデザインです。

背景に斜めチェック柄を入れたデザインの見出し
h2{
  padding: .5em;/*テキスト周りの余白*/
  background-color: #fff;/*背景色*/
  background-image:
 repeating-linear-gradient(45deg,rgba(154, 213, 219, 0.5) 0px 10px, transparent 10px 24px),
 repeating-linear-gradient(-45deg,rgba(154, 213, 219, 0.5) 0px 10px, transparent 10px 24px);/*チェック柄の設定*/
}

背景にドット柄を入れる

背景にドット柄を入れたデザインです。

背景にドット柄を入れたデザインの見出し
h2{
  padding: .5em;/*テキスト周りの余白*/
  background-color: #fff;/*背景色*/
  background-image: radial-gradient(#9ad5db 11%, transparent 13%), radial-gradient(#9ad5db 11%, transparent 13%);/*ドット柄の設定*/
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
  border: 1px solid #9ad5db;/*枠線の太さ・形状・色*/
}

クールなデザインの見出し

背景色が切り替わる

背景色が途中で切り替わるデザインです。

背景色が切り替わるデザインの見出し
h2{
  position: relative;
  padding: .5em;/*テキスト周りの余白*/
  background-color: #16a9ba;/*左側の背景色*/
  color: #fff;/*文字色*/
}
h2::after{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 150px;
  height: 100%;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
  background-color: rgba(255, 255, 255, .5);/*右側の背景色*/
}

数字を入れて背景色を切り替える

数字を入れて背景色を切り替えたデザインです。手順やSTEPがある説明などに使いやすいです。

数字を入れて背景色を切り替えたデザインの見出し
h2{
  position: relative;
  padding: .5em .5em .5em calc(60px + .8em);
  background-color: #16a9ba;/*右側の背景色*/
  color: #fff;/*見出しの文字色*/
  overflow: hidden;
}
h2::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '01';/*表示させる数字*/
  width: 65px;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
  background-color: #000;/*左側の背景色*/
  color: #fff;/*数字の文字色*/  
  opacity: .5;/*不透明度*/
  font-size: 1.5em;
  padding: 0 0 0 .3em;
}

今回、HTML部分は共通のものを使っているため::beforeのcontentで数字を入れていますが、実際にはHTML側の<h2>タグの中に<span>タグで数字を入れ、<span>タグにスタイルを当てるほうが運用しやすいかと思います。

下線に矢印を入れる

下線に矢印を入れたデザインです。

下線に矢印を入れたデザインの見出し
h2{
  position: relative;
  padding: .5em .5em .2em calc(20px + .2em);/*テキスト周りの余白*/
  border-bottom: 2px solid #16a9ba;/*下線の色*/
}
h2::before{
  position: absolute;
  bottom: -2px;
  left: -5px;
  content: '';
  width: 20px;
  height:15px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: #16a9ba;/*矢印の色*/
}

枠線と背景色をずらす

枠線と背景色をずらしたデザインです。

枠線と背景色をずらしたデザインの見出し
h2{
  position: relative;
  padding: .5em;/*テキスト周りの余白*/
  border: 1px solid #16a9ba;/*枠線の太さ・形状・色*/
}
h2::before{
  position: absolute;
  top: 6px;/*背景色の上部の位置*/
  left: 6px;/*背景色の左の位置*/
  content: '';
  width: 100%;
  height: 100%;
  background-color: #9ad5db;/*背景色*/
  z-index: -1;
}

背景色を斜めにする

背景色の両端を斜めにしたデザインです。

背景色を斜めにしたデザインの見出し
h2{
  position: relative;
  padding: .5em 1.0em;/*テキスト周りの余白*/
  color: #fff;/*文字色*/
}
h2::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #16a9ba;/*背景色*/
  transform: skew(-30deg);/*斜めの度合い*/
  z-index: -1;
}

右端に二重線を入れる

単色の帯の右端に二重線を入れたデザインです。

右端に二重線を入れたデザインの見出し
h2{
  position: relative;
  padding: .5em 1.0em;/*テキスト周りの余白*/
  color: #fff;/*文字色*/
  background-color: #16a9ba;/*背景色*/
}
h2::before{
  position: absolute;
  top: 0;
  right: 15px;
  content: '';
  height: 100%;
  border-right: 20px double #fff;/*線の太さ・形状・色*/
}

まとめ

見出しデザインはサイトデザインにとって重要な要素になってきます。シンプルでオーソドックスなものは流行り廃りがなく使いやすいのが良いですね。個性を出したいならデザイン性が高いものがおすすめです。

タイトルとURLをコピーしました