基本的なHTMLタグ～その１：見出しタグや段落、強調の解説とコピペで使えるおしゃれな見出しデザイン【CSSコード＆サンプル付き】

2026年8月31日

h1やpなどのタグはHTMLの基本となるものです、これらのタグを組み合わせることによってホームページの文章を構成していきます。

nov

一番よく使うことになるHTMLタグなので、この機会にしっかり覚えていきましょう！

見出し(h1～h6)

見出しはhtmlの基本です。ホームページを段階的に表現するために使用します。見出しはh1～h6までありますが、一般的にはh1～h4くらいまで使うケースが多いです。

h1から順に大きく表示されます。また、h1は主にサイトの題名に使います。

ちなみに当サイトはh4まで使っているページもあります。

見出しタグは単に文字の大きさを調整するために使用するものではありません。文字の調整はあくまでもスタイルシートで書くようにしてください。

基本的にタグというのは開始タグと閉じタグがあり、こちらの見出しタグも<h1>～</h1>のように開始タグと閉じタグで表現されます。

見出しタグはHPをわかりやすくするためになくてはならないタグなのです。

※例(イメージです)

<h3>ホームページテンプレート</h3>
↓↓↓
ホームページテンプレート

CSSコードをコピペするだけ！おしゃれな見出し２０選

Web制作やブログ構築でそのままコピペして使える、洗練されたおしゃれな見出しのCSSコードです！

画像や外部アイコンフォント（Font Awesome等）に依存せず、CSS単体で崩れず軽快に動作するモダンなコードで構築しています。

※サンプルの見出しは画像なので、サイズがバラバラですがご了承ください。

①王道・シンプル系（主にh2・h3向け）

01. 左線＋下線（最も使い勝手が良い王道デザイン）

左側に太めのアクセントカラー、下に薄いボーダーを引いた、どんなサイトにも馴染む鉄板デザインです。

<h2 class="hd-left-bottom">見出しテキスト</h2>

.hd-left-bottom {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-left: 6px solid #3b82f6; /* 左線の太さと色 */
  border-bottom: 2px solid #e2e8f0; /* 下線の色 */
  color: #1e293b;
  font-size: 1.5rem;
  line-height: 1.4;
}

02. 2色ツートン下線（途中で色が変わるライン）

全体のベースラインの上に、左側だけ別のアクセントカラーが重なるモダンな下線です。

<h2 class="hd-twotone-line">見出しテキスト</h2>

.hd-twotone-line {
  position: relative;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0; /* ベースの薄い線 */
  color: #1e293b;
}
.hd-twotone-line::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 25%; /* アクセント線の長さ */
  height: 2px;
  background-color: #3b82f6; /* アクセント色 */
}

蛍光マーカー風（親しみやすく読みやすい）

文字の下半分にグラデーションを敷き、蛍光ペンを引いたように見せるデザインです。

<h2 class="hd-marker">見出しテキスト</h2>

.hd-marker {
  display: inline-block;
  background: linear-gradient(transparent 65%, #fed7aa 65%); /* 65%の数値を下げると線が太くなります */
  padding: 0 0.2em;
  color: #27272a;
}

04. 背景塗り＋左アクセントバー（視認性抜群！h2におすすめ）

薄い背景色を敷いて記事のセクション区切りをはっきりと目立たせます。

<h2 class="hd-bg-bar">見出しテキスト</h2>

.hd-bg-bar {
  padding: 0.8rem 1rem;
  background: #f8fafc; /* 背景色 */
  border-left: 6px solid #0ea5e9; /* 左アクセント色 */
  border-radius: 0 6px 6px 0;
  color: #0f172a;
}

05. 上下ボーダー挟み込み（上品でクラシカル）

上下を細い線で挟み、中央揃えにも左寄せにも相性の良いすっきりとしたデザインです。

<h2 class="hd-top-bottom">見出しテキスト</h2>

.hd-top-bottom {
  padding: 0.6rem 0;
  border-top: 1px solid #475569;
  border-bottom: 1px solid #475569;
  color: #1e293b;
  text-align: center; /* 左寄せにする場合は left */
  letter-spacing: 0.05em;
}

②洗練・スタイリッシュ系（主にh2・h3向け）

06. 左右に伸びるライン（中央揃えのセクション見出し）

文字の左右に均等に水平線が広がる、コーポレートサイトやLPに最適なスタイルです。

<h2 class="hd-center-lines">見出しテキスト</h2>

.hd-center-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  text-align: center;
}
.hd-center-lines::before,
.hd-center-lines::after {
  content: '';
  flex-grow: 1;
  max-width: 80px; /* 線の最大長 */
  height: 1px;
  background: #cbd5e1;
  margin: 0 1rem;
}

07. 四隅の鍵カッコ（雑誌・メディア風）

四隅をL字のラインで囲むことで、アイキャッチ力の高い引き締まった印象を与えます。

<h2 class="hd-bracket">見出しテキスト</h2>

.hd-bracket {
  position: relative;
  display: inline-block;
  padding: 0.6rem 1.2rem;
  color: #334155;
}
.hd-bracket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-top: 2px solid #6366f1;
  border-left: 2px solid #6366f1;
}
.hd-bracket::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #6366f1;
  border-right: 2px solid #6366f1;
}

08. 立体リボン・帯風（存在感のあるデザイン）

左端がくるっと裏側に折り返されたように見える、立体的なリボンデザインです。

<h2 class="hd-ribbon">見出しテキスト</h2>

.hd-ribbon {
  position: relative;
  padding: 0.6rem 1.2rem;
  background: #0ea5e9; /* メイン色 */
  color: #fff;
  margin-left: -10px; /* コンテンツ枠より少しはみ出す */
  border-radius: 0 4px 4px 0;
}
.hd-ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 8px solid #0369a1; /* 折り返しの影（濃い色） */
  border-left: 8px solid transparent;
}

09. 先端ドット（アクセントサークル）

先頭にシンプルな丸を配置した、洗練されたミニマルなデザインです。

<h3 class="hd-dot">見出しテキスト</h3>

.hd-dot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #1e293b;
}
.hd-dot::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981; /* ドットの色 */
}

10. 先端グラデーション消去ライン（和風・モダン）

右に向かってフェードアウトしていく美しいグラデーションの下線です。

<h2 class="hd-fade-line">見出しテキスト</h2>

.hd-fade-line {
  position: relative;
  padding-bottom: 0.5rem;
  color: #1e293b;
}
.hd-fade-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ec4899 0%, rgba(236, 72, 153, 0) 100%);
}

③ポップ・かわいい系（主にh2・h3向け）

11. 吹き出し風デザイン

下部に三角形のシッポが付いた、会話やポイント解説にぴったりの吹き出しスタイルです。

<h2 class="hd-balloon">見出しテキスト</h2>

.hd-balloon {
  position: relative;
  padding: 0.8rem 1.2rem;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 8px;
  margin-bottom: 1.2rem;
}
.hd-balloon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 2rem;
  border: 10px solid transparent;
  border-top-color: #e0f2fe; /* 背景と同色 */
}

12. ステッチ（縫い目）風

内側に点線を引くことで、布製品を手縫いしたような温かみのあるデザインを演出します。

<h2 class="hd-stitch">見出しテキスト</h2>

.hd-stitch {
  padding: 0.7rem 1.2rem;
  background: #fdf4ff; /* 背景色 */
  border: 2px dashed #f0abfc; /* ステッチの破線 */
  box-shadow: 0 0 0 4px #fdf4ff; /* 破線の外側の余白 */
  color: #701a75;
  border-radius: 4px;
}

13. タグ・チケット風

左側が丸く削られ、パンチ穴（ドット）が開いたタグのような形状です。

<h2 class="hd-tag">見出しテキスト</h2>

.hd-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.2rem 0.4rem 0.8rem;
  background: #fef08a;
  color: #713f12;
  border-radius: 20px 4px 4px 20px;
}
.hd-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

14. マスキングテープ風

少し傾きをつけ、半透明の質感を持たせたマステ貼り風の見出しです。

<h2 class="hd-masking-tape">見出しテキスト</h2>

.hd-masking-tape {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  background: rgba(254, 202, 202, 0.75); /* 半透明カラー */
  color: #991b1b;
  transform: rotate(-1.5deg);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
}

15. 斜めストライプ背景

斜めのボーダーパターンを背景に敷き、爽やかな印象を作ります。

<h2 class="hd-stripe">見出しテキスト</h2>

.hd-stripe {
  padding: 0.7rem 1rem;
  color: #0f766e;
  background: repeating-linear-gradient(
    -45deg,
    #ccfbf1,
    #ccfbf1 6px,
    #f0fdfa 6px,
    #f0fdfa 12px
  );
  border-left: 6px solid #14b8a6;
  border-radius: 0 4px 4px 0;
}

④小見出し・アクセント系（主にh3・h4向け）

16. 先端シャープ（矢印）下線

下線の先端が矢印（斜めカット）になっており、視線を右へ誘導します。

<h3 class="hd-arrow-line">見出しテキスト</h3>

.hd-arrow-line {
  position: relative;
  padding-bottom: 0.4rem;
  color: #1e293b;
}
.hd-arrow-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #3b82f6;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

17. チェックマーク風アイコン（CSSのみで描画）

フォントや画像を使わず、CSSのborder回転でチェックアイコンを先頭に付けた見出しです。

<h3 class="hd-check">見出しテキスト</h3>

.hd-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #1e293b;
}
.hd-check::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 12px;
  border-right: 3px solid #10b981;
  border-bottom: 3px solid #10b981;
  transform: rotate(45deg) translate(-2px, -2px);
}

18. ピル（角丸バッジ）風見出し

コンパクトでまとまりがあり、箇条書きの補足や小トピック（h4）に最適です。

<h4 class="hd-pill">見出しテキスト</h4>

.hd-pill {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: #e2e8f0;
  color: #334155;
  border-radius: 9999px;
  font-size: 0.95rem;
}

19. 左右スラッシュ（//）囲み

シャープな斜線で文字を挟み、テック系やスタイリッシュなメディアに馴染む小見出しです。

<h4 class="hd-slash">見出しテキスト</h4>

.hd-slash {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #475569;
}
.hd-slash::before,
.hd-slash::after {
  content: '//';
  color: #3b82f6;
  font-weight: bold;
}

20. 「POINT」プレフィックス付き

見出しの前に「POINT」や「Q」などの英語ラベルを添えた、解説記事で重宝するスタイルです。

<h3 class="hd-point">見出しテキスト</h3>

.hd-point {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px dashed #cbd5e1;
  color: #1e293b;
}
.hd-point::before {
  content: 'POINT';
  font-size: 0.75rem;
  font-weight: 700;
  background: #f97316;
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  letter-spacing: 0.05em;
}