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属性は立体感をなくすための属性です。影の装飾をなくすことができます。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。