CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。

以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    hr{
        margin-bottom: 20px;
    }
    .solid {
        border-top: 5px solid rgb(16, 2, 141);
    }
    .dashed {
        border-top: 5px dashed rgb(190, 13, 146);
    }
    .double {
        border-top: 5px double rgb(22, 145, 11);
    }
    .dotted {
        border: 5px dotted rgb(200, 255, 0);
    }
    .round {
        border: 5px solid rgb(35, 196, 142);
        border-radius: 5px;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">HR styling example</h1>
<hr class="solid">
<hr class="dashed">
<hr class="double">
<hr class="dotted">
<hr class="round">
</body>
</html>

各スタイルのポイント

  • solid（実線）：もっとも基本的なスタイル。border-topにsolidを指定します。
  • dashed（破線）：区切り線を目立たせたい場合に便利です。
  • double（二重線）：太さがある程度必要なため、5px以上の指定がおすすめです。
  • dotted（点線）：柔らかい印象を与えたいときに適しています。
  • round（角丸）：border-radiusを組み合わせることで、角の丸い枠線になります。

実行結果

上記のコードを実行すると、以下のように5種類の異なるスタイルの水平線が表示されます。

CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

  1. CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説

    CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。 サンプルコード <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進