最終更新日: 2021年1月9日

    CSSでhrに色を付ける方法をサンプルコード付き解説！

    CSSでhrタグに色を付ける方法をサンプルコード付きで解説します。文字とは関係ない直線をHTML/CSSで表現する際はhrタグを使用します。そのhrタグの使い方の基本である、色を付ける方法をサンプルコード付きで解説します。

    コンテンツ [表示]

    1. 1CSSでhrに色を付ける方法を解説

    CSSでhrに色を付ける方法を解説

    hrタグとはhorizontal rule（水平線）の事で、直線を引くためのタグです。hrタグの色をCSSで変更するには、hrタグに対して下記のようにborderプロパティまたはborder-colorプロパティを使います。

    borderプロパティ

    hr.example1{
  border: 太さ　種類　色;
}

hr.example2{
  border-color:色;
}
    あわせて読みたい
    CSSの色の指定方法をサンプルコード付き解説！のイメージ
    CSSの色の指定方法をサンプルコード付き解説！
    CSSの色の指定方法は「キーワード」「カラーコード」「RGB」「HSL」など複数あります。それぞれの色の指定の仕方についてサンプルコード付きで解説します。

    borderプロパティもborder-colorプロパティも同じ効果があることが確認できました。

    また、borderプロパティの派生としてborder-bottomプロパティなども使うことができます。この場合直線の下側だけ色が変更されるていることを下記のサンプルコードで確認してください。

    noshade属性は立体感をなくすための属性です。影の装飾をなくすことができます。

    GeekHive採用サイト

    関連記事