CSSのbackground-colorプロパティを使ってhr要素の色を変える

2024-04-02

HTMLとCSSでhr要素の色を変える方法

HTMLでは、<hr>タグを使って水平線を引くことができます。このタグには、color属性を使って色を指定することができます。

<hr color="red">

上記のように記述すると、赤い水平線が引かれます。

CSS

HTML5では、color属性は非推奨になりました。代わりに、CSSを使って色を指定するのが一般的です。

hr {
  color: red;
}

上記のように記述すると、すべてのhr要素が赤くなります。

特定のhr要素の色だけを変えたい場合は、id属性やclass属性を使って要素を特定することができます。

<hr id="my-hr">

#my-hr {
  color: blue;
}

上記のように記述すると、id="my-hr"を持つhr要素だけが青くなります。

色の指定方法

色は、16進数コードやカラーネームを使って指定することができます。

16進数コード：#rrggbb形式で指定します。例えば、赤は#ff0000、青は#0000ffです。
カラーネーム：red、blue、greenなどのように、色名で指定することができます。

hr要素には、size属性やwidth属性を使って、線の太さや長さを指定することができます。

size属性：線の太さをピクセル単位で指定します。
width属性：線の長さをピクセル単位またはパーセンテージで指定します。

hr {
  color: red;
  size: 2px;
  width: 50%;
}

上記のように記述すると、赤い水平線が2ピクセルの太さで、画面幅の50%の長さで引かれます。

HTMLとCSSを使って、hr要素の色を変える方法はいくつかあります。上記の解説を参考に、自分の目的に合った方法を選んでください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hr要素の色を変えるサンプル</title>
  <style>
    hr {
      color: red;
      size: 2px;
      width: 50%;
    }
    
    #blue-hr {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>hr要素の色を変えるサンプル</h1>
  <p>デフォルトのhr要素</p>
  <hr>
  
  <p>色と太さを変えたhr要素</p>
  <hr>
  
  <p>id属性を使って色を変えたhr要素</p>
  <hr id="blue-hr">
</body>
</html>