techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

水平線はhrでなくborderで

2012/01/19 HTML+CSS

エリアを区切る水平線はhtmlのタグ<hr>でなく、cssのborderを使います。

水平線は、コンテンツではなく、デザイン要素としてみるのが自然ですので、htmlファイルを簡潔にするためにも、cssのborderを使いましょう。

たとえば、フッターの上の水平線。

<hr>を使って

<hr>
<div class=“footer”>Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.</div>

とするのではなく、

htmlは、

<div class=“footer”>Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.</div>

として、CSSで、

.footer{
  border-top:solid 1px red;
}

のように指定します。