🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

見出し下にラインを追加する CSS テンプレート

📝 使用用途

このテンプレートでは、CSS の border-bottom プロパティを使って、見出しの下にラインを追加する方法を紹介します。

📘 解説

上記の CSS コードでは、h1 要素に対して border-bottom を使用して、見出しの下に線を引いています。色や太さは自由に調整できます。

🔹 部分コード

見出し 
<h1>見出し</h1>

<style>
  h1 {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }
</style>

💻 まるっとコピペで動くコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS: 見出し下にライン border-bottom で装飾</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    h1 {
      border-bottom: 2px solid #000;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>見出し</h1>
  <p>このテンプレートでは、CSS の <code>border-bottom</code> プロパティを使って、見出しの下にラインを追加する方法を紹介します。</p>
</body>
</html>
コピーしました！

🎨 見出しデザインの実践テクニック

border-bottomを使った見出しの装飾は、セクションの区切りを明確にしつつ、洗練されたデザインを実現する効果的な方法です。適切なライン装飾は、コンテンツの階層構造を視覚的に表現します。

🌈 デザインのバリエーション

基本の実線(solid)だけでなく、dottedやdashedで点線・破線に、doubleで二重線に変更できます。色は#000(黒)の代わりに、#3498db(青)や#e74c3c(赤)など、サイトのカラーテーマに合わせて調整可能です。

📏 最適なサイジング

線の太さは1px～3pxが一般的で、padding-bottomでテキストとラインの間隔を調整します。見出しレベル(h1～h6)ごとに異なる太さを設定すると、情報階層がより明確になります。例えばh1は3px、h2は2pxなど。

✨ 高度な装飾テクニック

linear-gradient()を使えばグラデーションラインを、box-shadowを組み合わせれば立体的な効果を作れます。擬似要素(::after)で装飾を追加すると、よりオリジナリティのあるデザインが可能です。

見出しのライン装飾はコンテンツの視覚的ガイドとして重要ですが、過度な装飾はかえって読みにくくなる可能性があります。サイト全体で一貫したスタイルを保ちつつ、重要なセクションにのみ効果的に使用しましょう。

関連テンプレート