2022-08-15

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 要素を左端に寄せたければ、「margin-left 」プロパティで左マージンの幅を指定してください。

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


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

★ 表示結果

関連記事