チェックフィールド株式会社

東京 港区 千代田区 中央区 ITの運用管理やコンサルティング・相談・サポートはにお任せください

スタッフぶろぐ

このエントリをはてなブックマークに登録

I初心者にやさしいHTML講座:罫線を使ってレイアウトを区切る

今回は罫線を使ってレイアウトを区切る方法をご紹介します。

罫線を表示するには<hr>タグを使います。

また、width属性で幅(横の長さ)を、size属性で太さ(縦の高さ)を指定します。

<p>ここに本文が入ります。ここに本文が入ります。</p>
<hr>
<p>ここに本文が入ります。ここに本文が入ります。</p>

出力結果

ここに本文が入ります。ここに本文が入ります。


ここに本文が入ります。ここに本文が入ります。

また、CSSを使って罫線に様々な装飾をすることもできます。

<p>ここに本文が入ります。ここに本文が入ります。</p>
<hr style="border: 0; border-bottom: 3px solid red;">
<p>ここに本文が入ります。ここに本文が入ります。</p>
<hr style="border: 0; border-bottom: 1px dashed #ff8c00;">
<p>ここに本文が入ります。ここに本文が入ります。</p>
<hr style="height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);">
<p>ここに本文が入ります。ここに本文が入ります。</p>

出力結果

ここに本文が入ります。ここに本文が入ります。


ここに本文が入ります。ここに本文が入ります。


ここに本文が入ります。ここに本文が入ります。


ここに本文が入ります。ここに本文が入ります。

▼詳細はこちらからもご覧になれます。
http://www.htmq.com/html/hr.shtml
http://coliss.com/articles/build-websites/operation/css/css-simple-styles-for-horizontal-rules-by-css-tricks.html

文章と文章を見やすく区切るのにぜひおすすめです。