HTMLで横線を引く方法｜基本のhrからおしゃれなデザインまで解説

html

「見出しの下に線を引いて区切りたい」
「記事の中で話題を分けたい」
「WordやGoogleドキュメントみたいに、簡単に区切り線を入れたい」

ホームページやブログを作っていて、こんなふうに思ったことはありませんか？

そんなときに便利なのが横線（水平線）です。適切に使うことで、コンテンツを見やすく整理でき、ページ全体の印象もぐっと良くなります。

この記事では、HTMLで横線を引く基本的な方法から、CSSで横線をおしゃれにデザインするテクニックまで、初心者向けにわかりやすく紹介します。これを読めば、単なる1本線だけでなく、プロが作ったような洗練された横線も作れるようになりますよ。

スポンサーリンク

HTMLで横線を引く基本：hrタグ

hrタグの使い方

横線を引く最も簡単な方法は <hr>（エイチアール）タグです：

<p>最初の段落です。</p>
<hr>
<p>横線で区切られた次の段落です。</p>

これだけで、ブラウザに横線（水平線）が表示されます。

hrタグの特徴

  • 単独で使える: 閉じタグ不要（自己完結型タグ）
  • 自動的に改行: 前後に改行が入る
  • デフォルトスタイル: 薄いグレーの1本線
  • セマンティック: 内容の区切りを意味する

hrタグの正しい使い方

文書の構造的な区切り

<section>
  <h2>第1章：基礎知識</h2>
  <p>基礎的な内容です。</p>
</section>

<hr>

<section>
  <h2>第2章：応用編</h2>
  <p>応用的な内容です。</p>
</section>

ブログ記事での話題転換

<article>
  <h1>今日の出来事</h1>
  
  <h2>午前中</h2>
  <p>朝は散歩に出かけました。</p>
  
  <hr>
  
  <h2>午後</h2>
  <p>午後はプログラミングの勉強をしました。</p>
</article>

引用文と本文の区切り

<blockquote>
  「プログラミングは創造的な活動である」
</blockquote>

<hr>

<p>この言葉に深く共感します。なぜなら...</p>

hrタグのデフォルトスタイル

ブラウザによってhrタグのデフォルトスタイルは少し異なりますが、一般的には以下のような見た目になります：

  • 太さ: 1〜2px程度
  • 色: 薄いグレー（#ccc程度）
  • スタイル: 実線（solid）
  • 幅: 100%（画面幅いっぱい）

CSSで横線のデザインをカスタマイズ

基本的なカスタマイズ

色と太さを変える

hr {
  border: none;              /* デフォルトのボーダーを消す */
  border-top: 3px solid #ff6600;  /* 新しいスタイルを指定 */
  width: 50%;               /* 幅を50%に */
  margin: 20px auto;        /* 上下20px、左右中央寄せ */
}

<p>最初の段落</p>
<hr>
<p>カスタマイズされた横線の後の段落</p>

より詳細な設定

hr {
  border: none;
  border-top: 2px solid #4CAF50;
  width: 80%;
  margin: 30px auto;
  opacity: 0.7;             /* 透明度を設定 */
}

様々な線のスタイル

点線（dashed）

hr.dashed {
  border: none;
  border-top: 2px dashed #e74c3c;
  width: 60%;
  margin: 25px auto;
}

<p>前の内容</p>
<hr class="dashed">
<p>次の内容</p>

点々線（dotted）

hr.dotted {
  border: none;
  border-top: 3px dotted #9b59b6;
  width: 40%;
  margin: 20px auto;
}

二重線（double）

hr.double {
  border: none;
  border-top: 4px double #333;
  width: 70%;
  margin: 30px auto;
}

グラデーション線

hr.gradient {
  border: none;
  height: 3px;
  background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1);
  margin: 25px auto;
  border-radius: 2px;
}

幅とポジションの調整

様々な幅設定

/* 短い線 */
hr.short {
  width: 20%;
  margin: 15px auto;
}

/* 中程度の線 */
hr.medium {
  width: 50%;
  margin: 20px auto;
}

/* 長い線 */
hr.long {
  width: 90%;
  margin: 25px auto;
}

左寄せ・右寄せの線

/* 左寄せ */
hr.left {
  width: 30%;
  margin: 20px 0 20px 0;
}

/* 右寄せ */
hr.right {
  width: 30%;
  margin: 20px 0 20px auto;
}

レスポンシブ対応の横線

hr.responsive {
  border: none;
  border-top: 2px solid #333;
  width: 80%;
  margin: 20px auto;
}

@media (max-width: 768px) {
  hr.responsive {
    width: 90%;
    border-top-width: 1px;
    margin: 15px auto;
  }
}

@media (max-width: 480px) {
  hr.responsive {
    width: 95%;
    margin: 10px auto;
  }
}

見出しと組み合わせたデザイン

見出しの下に横線

hrタグを使った方法

<h2>商品紹介</h2>
<hr class="heading-line">
<p>この商品は素晴らしい特徴を持っています...</p>

.heading-line {
  border: none;
  border-top: 2px solid #007bff;
  width: 50%;
  margin: 10px 0 20px 0;
}

CSSのborder-bottomを使った方法

h2.with-line {
  border-bottom: 2px solid #333;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

<h2 class="with-line">商品紹介</h2>
<p>この商品は...</p>

見出しの左端に縦線

h2.left-border {
  border-left: 4px solid #e74c3c;
  padding-left: 15px;
  margin: 20px 0;
}

<h2 class="left-border">重要なお知らせ</h2>
<p>お知らせの内容...</p>

見出しを囲む線

h2.boxed {
  border: 2px solid #4CAF50;
  padding: 15px;
  text-align: center;
  margin: 25px 0;
  border-radius: 8px;
}

おしゃれな横線デザインパターン

アイコンと組み合わせた線

<div class="icon-divider">
  <hr class="line-with-icon">
  <span class="icon">★</span>
</div>

.icon-divider {
  position: relative;
  text-align: center;
  margin: 30px 0;
}

.line-with-icon {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0;
}

.icon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 15px;
  color: #666;
  font-size: 18px;
}

文字と組み合わせた区切り線

<div class="text-divider">
  <span>続きを読む</span>
</div>

.text-divider {
  text-align: center;
  margin: 40px 0;
  position: relative;
}

.text-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
  z-index: 1;
}

.text-divider span {
  background: white;
  padding: 0 20px;
  color: #666;
  position: relative;
  z-index: 2;
}

波線の横線

hr.wave {
  border: none;
  height: 10px;
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 5px,
    #ecf0f1 5px,
    #ecf0f1 10px
  );
  margin: 20px auto;
  width: 60%;
}

影付きの横線

hr.shadow {
  border: none;
  height: 2px;
  background: #333;
  margin: 25px auto;
  width: 70%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

アニメーション付きの横線

hr.animated {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  margin: 30px auto;
  width: 0;
  animation: expandLine 2s ease-in-out forwards;
}

@keyframes expandLine {
  from {
    width: 0;
  }
  to {
    width: 60%;
  }
}

実用的な横線の活用例

ブログ記事での使い分け

<article class="blog-post">
  <h1>HTMLとCSSの基礎</h1>
  
  <section>
    <h2>HTMLとは</h2>
    <p>HTMLの説明...</p>
  </section>
  
  <hr class="section-divider">
  
  <section>
    <h2>CSSとは</h2>
    <p>CSSの説明...</p>
  </section>
  
  <hr class="article-end">
  
  <footer>
    <p>この記事が参考になりましたら、シェアをお願いします。</p>
  </footer>
</article>

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.section-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 40px 0;
}

.article-end {
  border: none;
  border-top: 2px solid #333;
  width: 50%;
  margin: 50px auto 30px;
}

商品ページでの価格区切り

<div class="product-pricing">
  <div class="price-tier">
    <h3>ベーシックプラン</h3>
    <p class="price">¥1,000/月</p>
  </div>
  
  <hr class="price-divider">
  
  <div class="price-tier">
    <h3>プレミアムプラン</h3>
    <p class="price">¥2,000/月</p>
  </div>
</div>

.product-pricing {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.price-tier {
  text-align: center;
  padding: 15px 0;
}

.price-divider {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 20px 0;
}

.price {
  font-size: 1.5em;
  font-weight: bold;
  color: #e74c3c;
}

コメント欄での区切り

<div class="comments-section">
  <h3>コメント</h3>
  
  <div class="comment">
    <h4>田中さん</h4>
    <p>とても参考になりました！</p>
    <small>2025年1月15日</small>
  </div>
  
  <hr class="comment-divider">
  
  <div class="comment">
    <h4>佐藤さん</h4>
    <p>わかりやすい説明でした。</p>
    <small>2025年1月16日</small>
  </div>
</div>

.comment {
  padding: 15px 0;
}

.comment-divider {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}

divとCSSで作る横線

基本的なdivを使った横線

hrタグ以外にも、divとCSSで横線を作ることができます：

<div class="custom-line"></div>

.custom-line {
  height: 2px;
  background-color: #333;
  margin: 20px auto;
  width: 60%;
}

より複雑なデザインの横線

.decorative-line {
  height: 1px;
  background: linear-gradient(to right, 
    transparent, 
    #333 20%, 
    #333 80%, 
    transparent
  );
  margin: 30px 0;
}

複数の線を組み合わせ

<div class="multi-line-divider">
  <div class="line thick"></div>
  <div class="line thin"></div>
  <div class="line thick"></div>
</div>

.multi-line-divider {
  margin: 30px 0;
}

.line {
  margin: 3px auto;
}

.line.thick {
  height: 3px;
  background: #333;
  width: 60%;
}

.line.thin {
  height: 1px;
  background: #666;
  width: 40%;
}

注意点とベストプラクティス

hrタグの適切な使用

良い例：意味的な区切り

<article>
  <h1>記事タイトル</h1>
  <p>導入部分...</p>
  
  <hr> <!-- 論理的な区切り -->
  
  <h2>本文</h2>
  <p>本文の内容...</p>
</article>

悪い例：装飾目的だけの使用

<!-- 推奨されない -->
<h2>見出し</h2>
<hr> <!-- 単なる装飾として使用 -->
<hr>
<hr>

アクセシビリティの考慮

スクリーンリーダー対応

<hr aria-label="セクションの区切り">

適切なコントラスト比

hr {
  border-top: 2px solid #666; /* 背景色とのコントラストを確保 */
}

SEOとセマンティック

hrタグは文書の構造を示すセマンティックな要素なので、意味のある区切りに使用することが重要です。

トラブルシューティング

よくある問題と解決法

hrタグが表示されない

原因: CSSでborderが消されている

/* 問題のあるCSS */
hr {
  border: none; /* この後に新しいスタイルを指定する必要がある */
}

/* 解決法 */
hr {
  border: none;
  border-top: 1px solid #333; /* 新しいスタイルを指定 */
}

横線が中央に来ない

原因: marginの設定が間違っている

/* 解決法 */
hr {
  margin: 20px auto; /* autoで左右中央寄せ */
}

スマホで横線が見にくい

解決法: レスポンシブ対応

@media (max-width: 768px) {
  hr {
    border-top-width: 2px; /* スマホでは少し太く */
    margin: 15px auto;     /* 間隔を調整 */
  }
}

横線の上下の間隔が詰まる

原因: marginの相殺が発生

/* 解決法 */
hr {
  margin: 30px auto;
  display: block; /* ブロック要素として明確に指定 */
}

現代的なCSS技術

CSS Grid を使った複雑な区切り

.grid-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
}

.grid-divider::before,
.grid-divider::after {
  content: '';
  height: 1px;
  background: #ddd;
}

<div class="grid-divider">
  <span>または</span>
</div>

CSS Custom Properties（CSS変数）

:root {
  --divider-color: #333;
  --divider-width: 60%;
  --divider-thickness: 2px;
}

hr.themed {
  border: none;
  border-top: var(--divider-thickness) solid var(--divider-color);
  width: var(--divider-width);
  margin: 20px auto;
}

/* ダークテーマ */
.dark-theme {
  --divider-color: #ccc;
}

まとめ

HTMLで横線を引くためのポイントをまとめます：

基本的な方法

  • <hr> タグが最も簡単で意味的に正しい
  • CSSでカスタマイズして見た目を調整
  • 文書の論理的な区切りに使用

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

  • solid、dashed、dotted、double でスタイル変更
  • グラデーション、影、アニメーションで装飾
  • 幅、色、太さを自由に調整

実用的な活用

  • ブログ記事のセクション区切り
  • 商品ページの価格区切り
  • コメント欄の区切り

注意点

  • セマンティックな使用を心がける
  • アクセシビリティを考慮
  • レスポンシブ対応を忘れずに

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました