CSS: hr 要素(水平線)の「長さ」を指定する

CSSで hr 要素の「長さ」を指定するには、width プロパティを使用します。

長さの指定は「実数値+単位」や「パーセンテージ」を指定します (300px、90% 等)。

例)長さ「50%」、太さ「3px」、色「blue」の指定例


hr {
    height: 3px;
    width: 50%;
    background-color: blue;
    border: none;
}

次のように指定しても同じ結果になります。


hr {
    width: 50%;
    border-top: 3px solid blue;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

どちらにせよ、hr 要素の「長さ」を指定するには width プロパティを使用します。

★ 表示結果



hr 要素を左端に寄せたい場合

上の場合、hr 要素が中央に表示されています。
もし hr 要素を左端に寄せたければ、 「margin-left 」プロパティで左マージンの幅を指定してください。

次のように設定すると左側に寄ります。


hr {
    height: 3px;
    width: 50%;
    margin-left: 1px;
    background-color: blue;
    border: none;
}

★ 表示結果



関連記事

HTML・CSS入門