CSS: hr 要素(水平線)の「色」と「太さ」を指定する
hr 要素(水平線)の「色」や「太さ」
をCSSで指定する方法を2通り紹介します。
1つはhr要素をボックスとして考え、もう一つはhr要素のボーダー(枠線)を指定します。
どちらの方法も、 具体例として hrの太さを 4px、色を red に指定しています。
方法①: hr をボックスとして考える
この方法では hr をボックスとして考えます。
高さ(太さ)に「height: 4px」を指定し、
背景色に 「background-color: red」を指定しています。
枠線は必要ないので、「border: none」 を指定します。
hr {
height: 4px;
background-color: red;
border: none;
}
表示結果
方法②: ボーダーを設定する
この方法ではボーダーを設定することで hr の色や太さを設定します。
まずborder-top プロパティに目的の色と太さを設定します。 次に、border-top 以外のプロパティを非表示設定にします。
CSS1
hr {
border-top: 4px solid red;
border-right: none;
border-bottom: none;
border-left: none;
}
「上のCSS1」と「下のCSS2」は同じ結果となります。 下のCSSは、最初にボーダーの上下左右に対して「none」を指定し、 その後border-topに目的の色と太さを設定します。 短い方を好むなら下の記述を使ってください。
CSS2
hr {
border-style: none;
border-top: 4px solid red;
}
表示結果