TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > コピペで作れる！見出しアイデア集

コピペで作れる！見出しアイデア集

公開：2025.11.30　

コピペでOK！見出しアイデア集

HTMLとCSSで作る見出しのアイデア集です。
コピペですぐ作れるようにまとめています。
今回はpタグで作成していますが、必要に応じてh1やh2などに変更してください。
※CSSでrem指定しているところは、使用する人の環境によって数値が変わりますのでご注意ください。
※このwebサイトでは、1rem＝10pxくらいのサイズになります。

基本のコード

このページで作成している見出しの、基本のコードがこちらです。
特に装飾がなくても、フォントサイズを大きくしたり、フォントの太さを変えるだけでも見出しとして機能します。
以下、このコードをベースにしてカスタマイズしていきます。

基本のコードで出力した見出し

HTML
<p class="heading-ttl">基本のコードで出力した見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}

シンプルな見出し

背景色やボーダーで作る、シンプルな見出しです。

背景色を利用した見出し

単に背景色を変更するだけでも見出しに利用できます。
グラデーションの見出しも作ってみましたが、読みづらさが勝ったのでイマイチおすすめできないですね。
orz

背景色を利用したシンプルな見出し

HTML
<p class="heading-ttl heading-ttl-simple-bc">背景色を利用したシンプルな見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc {
  background-color: #000000;
  color: #fff;
  padding: 0.9em 1em;
}

背景色を利用したシンプルな見出し（角丸）

HTML
<p class="heading-ttl heading-ttl-simple-bc-radius">背景色を利用したシンプルな見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc-radius {
  background-color: #000000;
  color: #fff;
  padding: 0.9em 1em;
  border-radius: 1rem;
}

背景色を利用したシンプルな見出し（グラデーション※読みづらい）

HTML
<p class="heading-ttl heading-ttl-simple-bc-gradation">背景色を利用したシンプルな見出し（グラデーション※読みづらい）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc-gradation {
  background: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  padding: 0.9em 1em;
  color: #fff;
}

ボーダーを利用した見出し

単にボーダーでタイトルを囲ってみるとか、上下にラインを引いてみるだけでも良きです。
ちなみに次のようなコードで、このページで使用しているh3タグと同じようなものが作成できます。

HTML
<p class="heading-ttl heading-ttl-simple-bd-left6-bottom2">ボーダーを利用したシンプルな見出し（左に6px、下に2px）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bd-left6-bottom2 {
  border-left: 6px #000000 solid;
  border-bottom: 2px #000000 solid;
  padding: 0.5em 0.6em;
}

ボーダーを利用したシンプルな見出し

HTML
<p class="heading-ttl heading-ttl-simple-bd">ボーダーを利用したシンプルな見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bd {
  border: 2px #000000 solid;
  padding: 0.9em 1em;
}

ボーダーを利用したシンプルな見出し（角丸）

HTML
<p class="heading-ttl heading-ttl-simple-bd-radius">ボーダーを利用したシンプルな見出し（角丸）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bd-radius {
  border: 2px #000000 solid;
  padding: 0.9em 1em;
  border-radius: 1rem;
}

ボーダーを利用したシンプルな見出し（上下）

HTML
<p class="heading-ttl heading-ttl-simple-bd-top-bottom">ボーダーを利用したシンプルな見出し（上下）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bd-top-bottom {
  border-top: 2px #000000 solid;
  border-bottom: 2px #000000 solid;
  padding: 0.9em 1em;
}

ボーダーを利用したシンプルな見出し（左）

HTML
<p class="heading-ttl heading-ttl-simple-bd-left">ボーダーを利用したシンプルな見出し（左）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bd-left {
  border-left: 6px #000000 solid;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.8em;
}

背景色とボーダーを利用した見出し

背景色だけでなく、ボーダーも組み合わせた見出しです。
ボーダーの太さやスタイルを変えてみるだけでも結構印象が変わります。
ちなみに、次のようなコードでこのページで使用しているh2タグと同じようなものが作成できます。

HTML
<p class="heading-ttl heading-ttl-simple-bc-bd-left6">背景色とボーダーを利用したシンプルな見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc-bd-left6 {
  background: #fff;
  border: 2px solid #000000;
  border-left-width: 6px;
  padding: 0.9em 0.8em;
}

背景色とボーダーを利用したシンプルな見出し（ボーダー左のみ）

HTML
<p class="heading-ttl heading-ttl-simple-bc-bd-left">背景色とボーダーを利用したシンプルな見出し（ボーダー左のみ）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc-bd-left {
  background: #fff;
  border-left: 6px solid #000000;
  padding: 0.9em 0.8em;
}

背景色とボーダーを利用したシンプルな見出し（縫い目風）

HTML
<p class="heading-ttl heading-ttl-simple-bc-bd-stitch"><span>背景色とボーダーを利用したシンプルな見出し（縫い目風）</span></p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-simple-bc-bd-stitch {
  background: #fff;
  padding: 0.3em;
  color: #000000;
}
.heading-ttl.heading-ttl-simple-bc-bd-stitch span {
  display: block;
  border: 2px dashed #000000;
  padding: 0.9em 0.8em;
}

擬似要素を利用した見出し

ここからは擬似要素（::before・::after）を利用した見出しになります。

背景色をずらしてみる

擬似要素を背景色として利用し、少しずらしてみました。
作成した擬似要素に「mix-blend-mode: difference;」を指定することで、被った部分の色が変わります。
ただし、この色変更は擬似要素の色や、擬似要素と被った位置にある要素の色によって全然違う色になってしまうので注意が必要です。

背景色をずらしてみた見出し

HTML
<p class="heading-ttl heading-ttl-bf-shift">背景色をずらしてみた見出し</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-bf-shift {
  border: 2px #000000 solid;
  padding: 0.9em 1em;
  position: relative;
}
.heading-ttl.heading-ttl-bf-shift::before {
  content: " ";
  display: block;
  background-color: #fff;
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  mix-blend-mode: difference;
}

吹き出し風の見出し

擬似要素で吹き出しっぽくした見出しです。
背景色のみ・枠線のみ（に見える）・背景色のみと枠線のみ（に見える）の角丸バージョンをそれぞれ作成してみました。

吹き出し風の見出し（背景色のみ）

吹き出し風の見出し（背景色のみ角丸）

HTML
<p class="heading-ttl heading-ttl-bf-bc-speechbubble">吹き出し風の見出し（背景色のみ）</p>
<p class="heading-ttl heading-ttl-bf-bc-speechbubble heading-ttl-bf-bc-speechbubble-radius">吹き出し風の見出し（背景色のみ角丸）</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-bf-bc-speechbubble {
  background-color: #000000;
  color: #fff;
  padding: 0.9em 1em;
  position: relative;
  margin-bottom: 1.6rem;
  text-align: center;
}
.heading-ttl.heading-ttl-bf-bc-speechbubble::before {
  content: " ";
  display: block;
  position: absolute;
  border-top: 1.6rem #000000 solid;
  border-left: 1.2rem rgba(0, 0, 0, 0) solid;
  border-right: 1.2rem rgba(0, 0, 0, 0) solid;
  bottom: -1.5rem;
  left: calc(50% - 1.2rem);
}
/* 角丸にする場合追加 */
.heading-ttl.heading-ttl-bf-bc-speechbubble.heading-ttl-bf-bc-speechbubble-radius {
  border-radius: 3rem;
}

吹き出し風の見出し（枠線のみ（に見える））

吹き出し風の見出し（枠線のみ（に見える角丸））

HTML
<p class="heading-ttl heading-ttl-bf-bc-bd-speechbubble">吹き出し風の見出し（枠線のみ（に見える））</p>
<p class="heading-ttl heading-ttl-bf-bc-bd-speechbubble heading-ttl-bf-bc-bd-speechbubble-radius">吹き出し風の見出し（枠線のみ（に見える角丸））</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-bf-bc-bd-speechbubble {
  background-color: #e8e8e8; /* 背景色に合わせる */
  border: 2px #000000 solid;
  padding: 0.9em 1em;
  position: relative;
  margin-bottom: 1.9rem;
  text-align: center;
}
.heading-ttl.heading-ttl-bf-bc-bd-speechbubble::before {
  content: " ";
  display: block;
  position: absolute;
  border-top: 1.9rem #000000 solid; /* ボーダーの色に合わせる */
  border-left: 1.2rem rgba(0, 0, 0, 0) solid;
  border-right: 1.2rem rgba(0, 0, 0, 0) solid;
  bottom: -1.9rem;
  left: calc(50% - 1.2rem);
}
.heading-ttl.heading-ttl-bf-bc-bd-speechbubble::after {
  content: " ";
  display: block;
  position: absolute;
  border-top: 1.9rem #e8e8e8 solid; /* 背景色に合わせる */
  border-left: 1.2rem rgba(0, 0, 0, 0) solid;
  border-right: 1.2rem rgba(0, 0, 0, 0) solid;
  bottom: -1.6rem;
  left: calc(50% - 1.2rem);
}
/* 角丸にする場合追加 */
.heading-ttl.heading-ttl-bf-bc-bd-speechbubble.heading-ttl-bf-bc-bd-speechbubble-radius {
  border-radius: 3rem;
}

背景色＋左端に角丸の擬似要素

擬似要素を角丸にして左端に配置した＋背景色を合わせた見出しです。

背景色＋左に角丸擬似要素

HTML
<p class="heading-ttl heading-ttl-bf-left-bc">背景色＋左に角丸擬似要素</p>
CSS
.heading-ttl {
  line-height: 1.5;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
}
.heading-ttl.heading-ttl-bf-left-bc {
  background-color: #fff;
  position: relative;
  padding: 0.9em calc(0.9em + 6px);
  border-radius: 3px;
}
.heading-ttl.heading-ttl-bf-left-bc::before {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: calc(100% - 0.9em);
  top: 0.45em;
  left: 0.45em;
  background-color: #000000;
  border-radius: 3px;
}

今のところはここまでになります。
他にも思いついたら追加していく予定です。

カスタム投稿を表示する カスタム投稿を取得して表示する方法