青系見出しデザイン10パターン

使用する青系の色の例:
パターン 1: シンプルな下線
パターン 2: 左側の太い線
パターン 3: 背景色によるハイライト
パターン 4: 点線の下線
パターン 5: グラデーションの下線
パターン 6: テキストの色と波線の下線
パターン 7: 擬似要素（::before）を使った装飾
パターン 8: 二重線の下線
パターン 9: 太い下線
パターン 10: 上下二重線

使用する青系の色の例:

#0077cc (鮮やかな青)
#3498db (明るい青)
#2c3e50 (濃い、落ち着いた青)
lightblue (淡い青)
steelblue (少し灰色がかった青)

パターン 1: シンプルな下線

見出しの下に細い実線の青い線を追加します。

CSS

h1 {
  border-bottom: 2px solid #0077cc;
  padding-bottom: 5px; /* 線との間に少し隙間を作る */
}

パターン 2: 左側の太い線

見出しの左側に太い青い線を追加して、ブロックのような印象を与えます。

CSS

h1 {
  border-left: 8px solid #3498db;
  padding-left: 10px; /* 線との間に隙間を作る */
}

パターン 3: 背景色によるハイライト

見出しの背景に薄い青色をつけて、目立たせます。

CSS

h1 {
  background-color: lightblue;
  padding: 10px 15px; /* 内側の余白 */
}

パターン 4: 点線の下線

見出しの下に点線の青い線を追加します。

CSS

h1 {
  border-bottom: 2px dashed steelblue;
  padding-bottom: 5px;
}

パターン 5: グラデーションの下線

グラデーションの下線です。青のグラデーションを使用します。

CSS

h1 {
  position: relative;
  padding: 0.25em 0;
  padding-bottom: 5px; /* グラデーションとの隙間 */
}

h1:after {
  content: "";
  display: block;
  height: 3px; /* グラデーションの高さ */
  background: linear-gradient(to right, #0077cc, transparent); /* 青から透明へのグラデーション */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

パターン 6: テキストの色と波線の下線

見出しの文字色を青にし、波線の下線をつけます。

CSS

h1 {
  color: #2c3e50; /* 濃い青の見出し文字 */
  text-decoration: underline wavy #3498db; /* 波線の下線 */
  text-underline-offset: 5px; /* テキストからの距離 */
}

パターン 7: 擬似要素（::before）を使った装飾

見出しの前に青い四角形や丸などの装飾を追加します。

CSS

h1 {
  position: relative;
  padding-left: 20px; /* 擬似要素の分のスペース */
}

h1::before {
  content: "";
  display: block;
  width: 10px; /* 装飾の幅 */
  height: 10px; /* 装飾の高さ */
  background-color: #0077cc;
  position: absolute;
  left: 0;
  top: 50%; /* 垂直方向中央 */
  transform: translateY(-50%); /* 中央揃え */
  /* border-radius: 50%; 丸にする場合 */
}

パターン 8: 二重線の下線

見出しの下に二重線を引きます。

CSS

h1 {
  border-bottom: 4px double #3498db;
  padding-bottom: 5px;
}

パターン 9: 太い下線

見出しの下に太い青い線を引きます。

CSS

h1 {
  border-bottom: 5px solid #2c3e50;
  padding-bottom: 5px;
}

パターン 10: 上下二重線

見出しの上下に二重線を引きます。

CSS

h1 {
  border-top: 3px double #0077cc;
  border-bottom: 3px double #0077cc;
  padding: 5px 0; /* 上下パディング */
}

>_DEVELOP