ホームページを作っていて
「見出しの下にちょっとおしゃれな線を引きたい」
「シンプルな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>© 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重線を引く方法を多角的に解説しました。
基本的な手法
<hr>
タグ + CSS:最もシンプルで一般的<div>
タグ + CSS:より柔軟なカスタマイズが可能- 擬似要素:高度なデザインに対応
重要なポイント
- 適切な太さ:2重線として認識されるには最低3px必要
- デフォルト枠線の削除:
border: none
で既存の線を消去 - レスポンシブ対応:画面サイズに応じた調整
- アクセシビリティ:装飾的な線は適切にマークアップ
カスタマイズの要素
要素 | 調整項目 | 効果 |
---|---|---|
太さ | border-width | 線の存在感 |
色 | border-color | デザインの印象 |
幅 | width | レイアウトでの役割 |
位置 | margin | 他要素との関係 |
コメント