HTML | 区切り線を描画するhrタグの記述方法と簡単なデザインサンプルコード
HTMLで区切り線を描画する<hr>タグの記述方法と簡単なサンプルコードを紹介しています。
HTMLで区切り線を描画するhrタグ
HTMLの<hr>タグはHTML5よりデザイン的な水平線としての扱いから段落を区切る区切り線という位置づけになりました。
<hr>タグは挿入したい場所にそのまま記述するだけで描画されます。
例えば、文章の段落毎に区切り線を挿入する場合は以下のように記述する事ができます。
<p>文章...</p>
<hr>
<p>文章...</p>
<hr>
<p>文章...</p>
<hr>以下は上記のHTMLコードを実際に描画したものになります。
文章…
文章…
文章…
区切り線の色や太さ、余白のデザイン
<hr>タグも他のHTMLタグと同様にstyle属性によるデザインの変更が可能です。<hr>タグそのもののスタイルを利用できるものと、borderやbackgroundなどを使ってデザインする方法があります。
よりデザイン性の高いものにするには、コードが長くなりますのでCSS記述の方が向いています。
<hr>タグの色を変更する。
<hr color="blue"><hr style="border-top:blue;"><hr>タグの太さを変更する。
<hr style="border-top:6px;"><hr>タグの長さを変更する。
<hr style="width:70%;">色、太さ、長さをまとめて指定する。
<hr style="border-top:5px solid blue;width:70%;">