【CSS】hr 要素(水平線)の「色」と「太さ」を指定する

スポンサーリンク

hr 要素の「」や「太さ」 をCSSで指定する方法を2通り紹介します。

どちらの方法も、例として 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 以外のプロパティを非表示設定にします。


hr {
    border-top: 4px solid red;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

「上の記述」と「下の記述」は同じ結果となります。 短い方がいいなら下の記述を使ってください。


hr {
    border-style: none;
    border-top: 4px solid red;
}

表示結果



関連記事

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト