HTMLで2重線を引く方法|水平線(hr)のアレンジと枠線の作り方

html

ホームページを作っていて

「見出しの下にちょっとおしゃれな線を引きたい」
「シンプルな1本線じゃなく、2重線(ダブルライン)にしたい」

と思ったことはありませんか?

HTMLの<hr>(エイチアール)タグを使えば簡単に線を引けますが、通常は1本線です。

この記事では、HTMLとCSSを使って

  • 見出しの下や区切りに使える**2重線(ダブルライン)**を作る方法

を、初心者向けにやさしく解説します。

これを読めば、シンプルなページも少し高級感のあるデザインにできますよ。

スポンサーリンク

HTMLの基本的な水平線について

<hr>タグの基本

まず基本をおさらいすると:

<hr>

これだけでページに**水平線(1本線)**が入ります。

デフォルトの<hr>の特徴

特徴説明
見た目1本の細い線
ブラウザのデフォルト(通常はグレー)
親要素の100%
高さ通常1〜2px
位置左右中央

<hr>の制限

CSSを使わなければ、<hr>を2重線にすることはできません。そこで、次からCSSを使った2重線の作り方を紹介します。

CSSで<hr>を2重線にする基本方法

border-style: doubleを使う基本パターン

<style>
.double-hr {
  border: none;              /* デフォルトの線を消す */
  border-top: 3px double #333; /* 2重線にする */
  height: 0;
  width: 80%;
  margin: 20px auto;
}
</style>

<hr class="double-hr">

各プロパティの説明

プロパティ説明効果
border: noneデフォルトの枠線を削除元の線を消す
border-top: 3px double #333上部に2重線を設定太さ3px、色#333
height: 0高さを0に設定余計な空間を削除
width: 80%幅を80%に設定左右に余白を作る
margin: 20px auto上下20px、左右中央位置調整

さまざまな太さとスタイル

<style>
/* 細い2重線 */
.double-thin {
  border: none;
  border-top: 1px double #666;
  width: 60%;
  margin: 15px auto;
}

/* 太い2重線 */
.double-thick {
  border: none;
  border-top: 6px double #2196F3;
  width: 70%;
  margin: 25px auto;
}

/* 色付き2重線 */
.double-colored {
  border: none;
  border-top: 4px double #FF5722;
  width: 50%;
  margin: 20px auto;
}
</style>

<hr class="double-thin">
<hr class="double-thick">
<hr class="double-colored">

<div>を使った2重線の作り方

基本的な<div>での2重線

<hr>以外にも、<div>に枠線をつけて2重線を作る方法があります:

<style>
.double-line-div {
  border-top: 3px double #4CAF50;
  width: 60%;
  margin: 30px auto;
}
</style>

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

<div>を使うメリット

メリット説明
柔軟性より複雑なスタイリングが可能
拡張性他の要素と組み合わせやすい
カスタマイズ背景色や影などの追加が簡単

実用的な<div>2重線の例

<style>
.section-divider {
  border-top: 3px double #E91E63;
  width: 80%;
  margin: 40px auto;
  position: relative;
}

.section-divider::after {
  content: "◆";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
  color: #E91E63;
  font-size: 16px;
}
</style>

<div class="section-divider"></div>

2重線のデザインバリエーション

色とスタイルのバリエーション

<style>
/* エレガントなゴールド */
.elegant-gold {
  border: none;
  border-top: 3px double #FFD700;
  width: 70%;
  margin: 25px auto;
  opacity: 0.8;
}

/* クールなブルー */
.cool-blue {
  border: none;
  border-top: 4px double #1976D2;
  width: 50%;
  margin: 20px auto;
}

/* 温かみのあるオレンジ */
.warm-orange {
  border: none;
  border-top: 3px double #FF9800;
  width: 65%;
  margin: 30px auto;
}

/* ミニマルなグレー */
.minimal-gray {
  border: none;
  border-top: 2px double #9E9E9E;
  width: 40%;
  margin: 15px auto;
}
</style>

グラデーションを使った2重線

<style>
.gradient-double {
  height: 4px;
  width: 80%;
  margin: 30px auto;
  background: linear-gradient(to right, 
    transparent, 
    #FF6B6B 20%, 
    #FF6B6B 80%, 
    transparent
  );
  position: relative;
}

.gradient-double::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: white;
}
</style>

<div class="gradient-double"></div>

文字入り2重線のデザイン

中央に文字を配置

<style>
.double-line-text {
  display: flex;
  align-items: center;
  text-align: center;
  width: 80%;
  margin: 30px auto;
  font-weight: bold;
  color: #333;
}

.double-line-text::before,
.double-line-text::after {
  content: "";
  flex: 1;
  border-top: 3px double #333;
}

.double-line-text:not(:empty)::before {
  margin-right: 15px;
}

.double-line-text:not(:empty)::after {
  margin-left: 15px;
}
</style>

<div class="double-line-text">見出し</div>
<div class="double-line-text">SECTION</div>
<div class="double-line-text">◇ 特別なお知らせ ◇</div>

アイコン付き2重線

<style>
.icon-double-line {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 40px auto;
  text-align: center;
}

.icon-double-line::before,
.icon-double-line::after {
  content: "";
  flex: 1;
  border-top: 2px double #4CAF50;
}

.icon-double-line .icon {
  margin: 0 20px;
  font-size: 24px;
  color: #4CAF50;
}
</style>

<div class="icon-double-line">
  <span class="icon">★</span>
</div>

<div class="icon-double-line">
  <span class="icon">❖</span>
</div>

背景色付きテキスト

<style>
.bg-text-double {
  position: relative;
  text-align: center;
  margin: 40px auto;
  width: 80%;
}

.bg-text-double::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 3px double #9C27B0;
  z-index: 1;
}

.bg-text-double span {
  background: white;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  font-weight: bold;
  color: #9C27B0;
}
</style>

<div class="bg-text-double">
  <span>重要なお知らせ</span>
</div>

レスポンシブ対応の2重線

画面サイズに応じた調整

<style>
.responsive-double {
  border: none;
  border-top: 3px double #607D8B;
  width: 80%;
  margin: 20px auto;
}

/* タブレット */
@media (max-width: 768px) {
  .responsive-double {
    width: 90%;
    border-top-width: 2px;
    margin: 15px auto;
  }
}

/* スマートフォン */
@media (max-width: 480px) {
  .responsive-double {
    width: 95%;
    border-top-width: 2px;
    margin: 10px auto;
  }
}
</style>

<hr class="responsive-double">

可変幅を使った2重線

<style>
.flexible-double {
  border: none;
  border-top: clamp(2px, 1vw, 4px) double #3F51B5;
  width: clamp(50%, 80vw, 90%);
  margin: clamp(15px, 3vw, 30px) auto;
}
</style>

<hr class="flexible-double">

実用的なデザインパターン

記事の区切り用2重線

<style>
.article-separator {
  border: none;
  border-top: 2px double #E0E0E0;
  width: 60%;
  margin: 50px auto;
  opacity: 0.7;
}

.article-separator.emphasis {
  border-top-color: #FF5722;
  border-top-width: 3px;
  width: 80%;
  opacity: 1;
}
</style>

<article>
  <h2>記事タイトル1</h2>
  <p>記事の内容...</p>
  
  <hr class="article-separator">
  
  <h2>記事タイトル2</h2>
  <p>記事の内容...</p>
  
  <hr class="article-separator emphasis">
  
  <h2>重要な記事</h2>
  <p>重要な内容...</p>
</article>

ヘッダー・フッター用の装飾線

<style>
.header-double {
  border: none;
  border-bottom: 4px double #2196F3;
  width: 100%;
  margin: 0;
  padding-bottom: 10px;
}

.footer-double {
  border: none;
  border-top: 3px double #795548;
  width: 100%;
  margin: 0;
  padding-top: 10px;
}
</style>

<header>
  <h1>サイトタイトル</h1>
  <hr class="header-double">
</header>

<footer>
  <hr class="footer-double">
  <p>&copy; 2024 サイト名</p>
</footer>

カード要素の装飾

<style>
.card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 400px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-title {
  margin: 0 0 15px 0;
  text-align: center;
  position: relative;
}

.card-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 2px double #007bff;
  width: 60px;
}
</style>

<div class="card">
  <h3 class="card-title">カードタイトル</h3>
  <p>カードの内容がここに入ります。2重線で装飾された見出しが特徴的です。</p>
</div>

2重線のアニメーション効果

フェードイン効果

<style>
.animated-double {
  border: none;
  border-top: 3px double #E91E63;
  width: 0;
  margin: 30px auto;
  transition: width 2s ease-in-out;
}

.animated-double.show {
  width: 70%;
}

/* ページロード時にアニメーション実行 */
.animated-double {
  animation: expandLine 2s ease-in-out forwards;
}

@keyframes expandLine {
  from { width: 0; }
  to { width: 70%; }
}
</style>

<hr class="animated-double">

ホバー効果

<style>
.hover-double {
  border: none;
  border-top: 3px double #9C27B0;
  width: 50%;
  margin: 30px auto;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hover-double:hover {
  width: 80%;
  border-top-color: #FF5722;
  border-top-width: 4px;
}
</style>

<hr class="hover-double">

パルス効果

<style>
.pulse-double {
  border: none;
  border-top: 3px double #4CAF50;
  width: 60%;
  margin: 30px auto;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.7; transform: scaleX(1.1); }
  100% { opacity: 1; transform: scaleX(1); }
}
</style>

<hr class="pulse-double">

高度な2重線テクニック

CSS擬似要素を使った複雑な2重線

<style>
.complex-double {
  position: relative;
  height: 10px;
  width: 80%;
  margin: 40px auto;
  background: transparent;
}

.complex-double::before,
.complex-double::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #673AB7;
}

.complex-double::before {
  top: 0;
}

.complex-double::after {
  bottom: 0;
}

/* 中央にドット装飾 */
.complex-double .center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #673AB7;
  border-radius: 50%;
}
</style>

<div class="complex-double">
  <div class="center-dot"></div>
</div>

グリッド状の2重線パターン

<style>
.grid-double {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: 80%;
  margin: 40px auto;
}

.grid-double::before,
.grid-double::after {
  content: "";
  border-top: 2px double #795548;
}

.grid-double .center-text {
  font-weight: bold;
  color: #795548;
  white-space: nowrap;
}
</style>

<div class="grid-double">
  <div class="center-text">PREMIUM CONTENT</div>
</div>

よくある問題と解決法

2重線が表示されない場合

問題1:線が細すぎる

/* NG: 線が細すぎて2重に見えない */
.too-thin {
  border-top: 1px double #333;
}

/* OK: 適切な太さ */
.good-thickness {
  border-top: 3px double #333;
}

問題2:デフォルトの枠線が残っている

/* NG: デフォルトの枠線が残る */
.with-default {
  border-top: 3px double #333;
}

/* OK: デフォルトの枠線を削除 */
.without-default {
  border: none;
  border-top: 3px double #333;
}

ブラウザ互換性の問題

/* より安全な書き方 */
.safe-double {
  border: none;
  border-top: 3px double #333;
  height: 0;
  
  /* IE対応 */
  *height: 3px;
  *border-top: none;
  *background: url('double-line.png') repeat-x;
}

モバイルでの表示問題

/* モバイル対応 */
.mobile-friendly {
  border: none;
  border-top: 2px double #333;
  width: 90%;
  margin: 15px auto;
  
  /* 高解像度ディスプレイ対応 */
  @media (-webkit-min-device-pixel-ratio: 2) {
    border-top-width: 1px;
  }
}

2重線の使い分けガイド

用途別の推奨スタイル

用途推奨スタイル理由
記事の区切り細め(2-3px)、控えめな色読みやすさを重視
見出しの装飾中程度(3-4px)、テーマカラー目立たせたい
セクション区切り太め(4-5px)、強めの色明確な区切りを示す
フッター装飾中程度(3px)、落ち着いた色上品な仕上がり

色選びのコツ

/* エレガント系 */
.elegant { border-top: 3px double #8D6E63; }

/* モダン系 */
.modern { border-top: 3px double #37474F; }

/* 可愛い系 */
.cute { border-top: 3px double #F8BBD9; }

/* ビジネス系 */
.business { border-top: 3px double #1565C0; }

/* ナチュラル系 */
.natural { border-top: 3px double #689F38; }

まとめ

HTMLで2重線を引く方法を多角的に解説しました。

基本的な手法

  1. <hr>タグ + CSS:最もシンプルで一般的
  2. <div>タグ + CSS:より柔軟なカスタマイズが可能
  3. 擬似要素:高度なデザインに対応

重要なポイント

  • 適切な太さ:2重線として認識されるには最低3px必要
  • デフォルト枠線の削除border: noneで既存の線を消去
  • レスポンシブ対応:画面サイズに応じた調整
  • アクセシビリティ:装飾的な線は適切にマークアップ

カスタマイズの要素

要素調整項目効果
太さborder-width線の存在感
border-colorデザインの印象
widthレイアウトでの役割
位置margin他要素との関係

コメント

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