カテゴリー:
CSS
タグ:
 css hr border

このエントリーをはてなブックマークに追加
更新日時:
2014年05月14日(水)
作成日時:
2014年05月14日(水)

前の記事 / 次の記事

基本的には線を引くときはborderをsolidにすればいいと思うんだけど、
基本的な嗜好を持ち合わせていないのでhrで線を引きたい。
HTML5でも水平線としてではなくテーマの区切りとして生き残ったみたいだし。

何でborderをsolidにするのが嫌なのかというと、
どの要素で線を引いているのかよく分からなくなるから。
border-topをsolidにしたのかborder-bottomをsolidにしたのか、

予め決めておけばいいんだけど、
その場合でもborder-bottomでsolidする決めにしたとしても、
一番先頭の要素の上辺は前の要素のborder-bottomが存在しないから
border-topをsolidする運命にある。

で、hrで線を引こうとするととりあえず太くなる。
なんでかっていうとデフォルトの状態だと一本の線のように見えるけど
実は2本の線が重なっているから。border-topとborder-bottomが伴に存在している。

:sass
  hr
    height: 100px

とかすると線が2本あるのが分かると思う。

このまま使うとborderをsolidにした場合と較べて線が太くなるので、
こいついらのどちらかを消して1本の線として使いたい。

そこで、

:sass
  hr.as-line
    borde-top: 0
    border-bottom: 1px solid

とかすれば1本になる。
更に、線にマージンやパディングが付いていると使いにくいので、

:sass
  hr.as-line
    margin: 0
    pading: 0
    borde-top: 0
    border-bottom: 1px solid

とかしてみる。