1. ホーム
  2. html

[解決済み] hr要素の色を変更する

2022-03-18 04:23:54

質問

の色を変えたいのですが。 hr タグをCSSで記述しています。下記で試したコードはうまくいかないようです。

hr {
    color: #123455;
}

解決方法は?

を使用する必要があると思います。 border-color の代わりに color で生成される線の色を変更する場合、その線の色は、その線の色に依存します。 <hr> タグを使用します。

ただし、コメントで指摘されているように、線のサイズを変更しても、ボーダーはスタイルで指定した幅のままで、線はデフォルトの色で塗りつぶされます(ほとんどの場合、これは望ましい効果ではありません)。ということで、この場合にも background-color (@Ibu さんの回答で提案されているように)。

HTML 5 ボイラープレート プロジェクトのデフォルトのスタイルシートで が指定されています。 には、次のようなルールがあります。

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

記事 タイトル "あまり知られていない12のCSSの事実" について、SitePoint が最近発表した記事で触れています。 <hr> を設定することができます。 border-color を親の color を指定した場合 hr { border-color: inherit } .