HTML hrタグの役割とCSSデザイン：基本から応用まで実例を交えて解説

2026年5月4日

基礎知識

Webサイトのコンテンツを制作する際、情報の区切りを視覚的に示すことは、読者の理解を助ける重要な要素です。

その中で最も古くから使われ、かつ今日でも頻繁に利用されているのがタグです。

一見すると、単に「一本の線を引くだけ」のシンプルなタグに思えるかもしれません。

しかし、HTML5以降のセマンティクス（意味論）の変化や、現代のモダンなCSSを用いたデザインのカスタマイズ性を考慮すると、非常に奥の深い要素であることがわかります。

本記事では、タグの本来の役割から、2026年現在のトレンドを踏まえたCSSデザインの実例まで、詳しく解説していきます。

目次 [ close ]

タグの基本的な役割と定義の変化

タグは、かつてHTML4までは「Horizontal Rule（水平の横線）」の略称として定義されており、視覚的な装飾としての役割が強いものでした。

しかし、HTML5および現在のHTML Living Standardにおいては、その定義が大きく変わっています。

現在の定義では、タグは「段落レベルでのテーマの変わり目（Thematic Break）」を意味する要素として位置づけられています。

例えば、ブログ記事の中で話題が大きく変わる場面や、物語の中で場面が転換する際などに使用するのが正しい方法です。

単に見た目として線を引きたいだけであれば、CSSのborder-bottomプロパティなどを使用すべきであり、意味のある区切りとして線を入れたい場合にのみタグを使用するというのが、WebアクセシビリティやSEOの観点からも推奨される作法です。

基本的な記述方法と非推奨の属性

タグは「空要素」と呼ばれるタグであり、終了タグ（</hr>）を持ちません。

HTML5以降では、非常にシンプルな記述のみで動作します。

HTML

<!-- 基本的なhrタグの記述 -->
<p>前半の話題がここで終わります。</p>

<hr>

<p>ここから後半の新しい話題が始まります。</p>

実行結果

前半の話題がここで終わります。
--------------------------------------------------
ここから後半の新しい話題が始まります。

過去に使われていた非推奨属性

以前のHTMLでは、タグに対して直接、線の太さや色を指定する属性が存在していました。

しかし、これらは現在すべて非推奨（Deprecated）となっており、現代のWeb開発では使用してはいけません。

属性名	役割	現在の代替手段
align	水平線の配置（左・中央・右）	CSSの margin
noshade	影のない立体感のない線にする	CSSの border
size	線の高さ（太さ）	CSSの height または border-width
width	線の横幅	CSSの width

これらの装飾的な設定はすべてCSSで行うのが基本ルールです。

CSSによるスタイリングの基本ステップ

タグをCSSでデザインする際、まず最初に行うべきは「デフォルトスタイルのリセット」です。

ブラウザごとにデフォルトの枠線（border）や影の設定が異なるため、意図したデザインにするために一旦初期化します。

CSS

/* デフォルトのスタイルをリセットする例 */
hr {
  border: none;        /* 枠線を消す */
  height: 1px;         /* 高さを指定する */
  background-color: #333; /* 背景色（線の色）を指定する */
  margin: 2em 0;       /* 上下の余白を確保する */
}

このリセットを行うことで、ブラウザ間の差異をなくし、自由自在なラインデザインが可能になります。

実践的なCSSデザインパターン

ここからは、実際のWebサイトで活用できる具体的なデザインパターンを紹介します。

1. グラデーションを用いた洗練されたライン

中央から両端にかけて消えていくようなグラデーションのラインは、モダンなWebデザインでよく見られます。

HTML

<!-- グラデーションhrの例 -->
<hr class="hr-gradient">

CSS

/* CSS */
.hr-gradient {
  border: none;
  height: 2px;
  /* 左右が透明で中央が濃いグレーのグラデーション */
  background: linear-gradient(to right, transparent, #888, transparent);
  margin: 30px 0;
}

実行結果

（中央付近が濃く、両端が徐々に薄くなる繊細な線が表示される）

2. 破線と点線によるカジュアルな区切り

親しみやすいブログメディアなどでは、実線よりも破線（dashed）や点線（dotted）が好まれます。

HTML

<!-- 破線と点線の例 -->
<hr class="hr-dashed">
<hr class="hr-dotted">

CSS

/* CSS */
.hr-dashed {
  border: none;
  /* border-topを使って破線を表現する */
  border-top: 2px dashed #aaa;
  height: 0;
  width: 100%;
}

.hr-dotted {
  border: none;
  /* border-topを使って点線を表現する */
  border-top: 3px dotted #ccc;
  height: 0;
  width: 50%;
  margin: 20px auto; /* 中央寄せ */
}

3. テキストやアイコンを中央に配置する

「Chapter 1」や「EOF」といったテキスト、あるいは特定のアイコンをラインの途中に挟むデザインも一般的です。

これには擬似要素（::after）を使用するのが効率的です。

HTML

<!-- テキスト入りのhr -->
<hr class="hr-text" data-content="SECTION 02">

CSS

/* CSS */
.hr-text {
  position: relative;
  border: none;
  border-top: 1px solid #ddd;
  text-align: center;
  margin: 40px 0;
  overflow: visible; /* 擬似要素を表示するために必須 */
}

.hr-text::after {
  content: attr(data-content); /* data-content属性から文字を取得 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 15px;
  background-color: #fff; /* 背景色と同じ色にして線を隠す */
  color: #999;
  font-size: 0.8rem;
  font-weight: bold;
}

この手法を使えば、HTML構造を汚すことなく、セマンティックな意味を保ちながら視覚的なアクセントを加えることができます。

SVGを活用したモダンな区切りデザイン

2026年現在のWeb制作では、より複雑な形状（波線やジグザグなど）を実現するためにSVGを利用するケースも増えています。

SVGをbackground-imageとして適用することで、画像ファイルを用意することなくコードだけで複雑なラインを描画できます。

HTML

<!-- SVG波線のhr -->
<hr class="hr-svg">

CSS

/* CSS */
.hr-svg {
  border: none;
  height: 10px;
  /* インラインSVGで波線を定義 */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='10' viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q 25 0, 50 5 T 100 5' stroke='%23888' fill='transparent'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50px 10px;
}

SVGを用いる利点は、レスポンシブデザインにおいても描画が崩れず、高解像度のディスプレイでも常に鮮明に表示される点にあります。

アクセシビリティへの配慮

視覚的に線を引くだけでなく、スクリーンリーダーを利用しているユーザーにとっても、その区切りが意味を持つものである必要があります。

基本的にはタグを使用するだけで、支援技術には「区切り」として認識されます。

しかし、デザイン上の理由でどうしてもdivタグなどで線を引かなければならない場合は、role="separator"属性を付与することを検討してください。

また、逆に装飾目的のみでを使用し、スクリーンリーダーに読み上げさせたくない（無視させたい）場合は、aria-hidden="true"を付与します。

HTML

<!-- 装飾目的のみの線の例 -->
<hr class="decoration-line" aria-hidden="true">

このように、目的が情報の区切りなのか、単なる装飾なのかを明確にすることが、モダンなWebコーディングにおける重要なスキルです。

2026年のトレンド：ユーティリティクラスとコンポーネント化

近年のWeb開発では、Tailwind CSSなどのユーティリティファーストなフレームワークが主流となっています。

また、ReactやVue.jsといったコンポーネントベースのライブラリを使用する場合、も一つのコンポーネントとして再利用可能な形で定義されます。

例えば、以下のようなプロパティ（Props）を受け取れるコンポーネントを作成しておくことで、プロジェクト全体で一貫したデザインを維持できます。

線の種類（実線、破線、グラデーション）
線の太さ
アイコンの有無
上下のマージン幅

これにより、個別にCSSを書く手間を省き、コードの保守性を大幅に向上させることが可能になります。

まとめ

タグは、一見地味な存在ですが、HTMLの構造を整理し、読者にコンテンツの切り替わりを伝える重要な役割を担っています。

本来の役割：単なる「水平線」ではなく「テーマの変わり目（セマンティックな区切り）」を示す。
記述のルール：装飾属性は使わず、CSSですべてのデザインを制御する。
デザインの可能性：グラデーション、テキスト挿入、SVG活用など、CSS次第で多様な表現が可能。
アクセシビリティ：意味のある区切りとして正しく使い、必要に応じてARIA属性を活用する。

2026年のWebデザインにおいても、情報を整理し、美しく伝えるための「引き算のデザイン」としての水平線の重要性は変わりません。

今回紹介したテクニックを活用し、機能性と美しさを両立させたWebサイト制作に役立ててください。