【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;
}

★ 表示結果



関連記事

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト