使用する青系の色の例:
#0077cc(鮮やかな青)#3498db(明るい青)#2c3e50(濃い、落ち着いた青)lightblue(淡い青)steelblue(少し灰色がかった青)
パターン 1: シンプルな下線
見出しの下に細い実線の青い線を追加します。
CSS
|
1 2 3 4 5 |
h1 { border-bottom: 2px solid #0077cc; padding-bottom: 5px; /* 線との間に少し隙間を作る */ } |
パターン 2: 左側の太い線
見出しの左側に太い青い線を追加して、ブロックのような印象を与えます。
CSS
|
1 2 3 4 5 |
h1 { border-left: 8px solid #3498db; padding-left: 10px; /* 線との間に隙間を作る */ } |
パターン 3: 背景色によるハイライト
見出しの背景に薄い青色をつけて、目立たせます。
CSS
|
1 2 3 4 5 |
h1 { background-color: lightblue; padding: 10px 15px; /* 内側の余白 */ } |
パターン 4: 点線の下線
見出しの下に点線の青い線を追加します。
CSS
|
1 2 3 4 5 |
h1 { border-bottom: 2px dashed steelblue; padding-bottom: 5px; } |
パターン 5: グラデーションの下線
グラデーションの下線です。青のグラデーションを使用します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 2 3 4 5 6 |
h1 { color: #2c3e50; /* 濃い青の見出し文字 */ text-decoration: underline wavy #3498db; /* 波線の下線 */ text-underline-offset: 5px; /* テキストからの距離 */ } |
パターン 7: 擬似要素（::before）を使った装飾
見出しの前に青い四角形や丸などの装飾を追加します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 |
h1 { border-bottom: 4px double #3498db; padding-bottom: 5px; } |
パターン 9: 太い下線
見出しの下に太い青い線を引きます。
CSS
|
1 2 3 4 5 |
h1 { border-bottom: 5px solid #2c3e50; padding-bottom: 5px; } |
パターン 10: 上下二重線
見出しの上下に二重線を引きます。
CSS
|
1 2 3 4 5 |
h1 { border-top: 3px double #0077cc; border-bottom: 3px double #0077cc; padding: 5px 0; /* 上下パディング */ } |