スポンサーサイト

/ スポンサー広告 / Comment[-]

hr要素のスタイリング

/ Web / Comment[0]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

hrは文面がガラリと変わる部分(追伸など)に区切りとして入れるタグなので結構使う場所がある要素なのではないでしょうか。

hr要素の正体はheight:2pxのブロックです。デフォルトでは背景色は白で黒ボーダーが引いてあるようです。
デフォルトのままではただの黒い線なのでスタイリングをしてみましょう。

デフォルトのhr


border:1px solid redを指定した表示。上下に1pxずつheight:2pxのボーダになります。


次はborder:noneを指定した表示です。モダンブラウザでは見えなくなりますが、IE7では無視されるようです。(colorで背景色を指定すればその色のボーダーとして見える)


ただの色の付いた線を引きたい場合は以下のように指定します。

hr {
    height: 1px;
    border: none;
    background: #ccc;
}

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可