ページのレイアウト

hr要素で、ページに線を付けることができます。hr要素には終了タグはありません。

width属性で線の長さ（横の長さ）を指定できます。属性値には、半角数字と1%から100%までの%で指定することができます。

半角数字指定の場合、指定した長さになりますが%指定の場合、ブラウザの大きさに対して線の長さが自動的に変わります。

size属性で線の太さ（縦の長さ）を指定することができます。属性値には半角数字のみ指定できます。

align属性で線の位置を指定することができます。属性値には、left、center、rightのどれかを指定できます。leftは左寄せ、centerは中央寄せ、rightは右寄せになります。

noshade属性で線を塗りつぶしにすることができます。この属性に、属性値はありません。

<hr>↑これは普通の線（何も指定なし）です。
<hr width="450">↑width属性を450にしています。
<hr width="50%">↑width属性を50%にしています。
<hr size="20">↑size属性を20にしています。
<hr align="left" width="50%">↑arign属性をleftにしています。
<hr noshade>↑noshade属性にしています。

↑これは普通の線（何も指定なし）です。

↑width属性を450にしています。

↑width属性を50%にしています。

↑size属性を20にしています。

↑arign属性をleftにしています。

↑noshade属性にしています。

center要素を使うと、囲んだ部分をセンタリング（中央寄せ）することができます。

<center>ここは中央寄せにしてあります。</center><br>
ここは何も指定してません。

ここは中央寄せにしてあります。
ここは何も指定してません。

改行や空白行などは、br要素などを使わなければできませんでしたが、pre要素を使うと空白行や改行をbrなどを使わなくても表示できます。この要素は、ソースコードなどを書くときに便利です。

<pre>ソースの中で改行するとブラウザへの表示も自動的に改行します。

ここは空白行です。</pre>

ソースの中で改行するとブラウザへの表示も自動的に改行します。

ここは空白行です。

p要素、h1～h6要素、div要素の align属性で囲んだ部分の位置を指定することができます。

前にも説明したように属性値には、left、center、rightのどれかを指定できます。leftは左寄せ、centerは中央寄せ、rightは右寄せになります。

<p align="right">p要素でalign属性をrightにしています。</p>
<h4 align="center">h4要素でalign属性をcenterにしています。</h4>
<div align="left">div要素でalign属性をleftにしています。</div>

p要素でalign属性をrightにしています。

h4要素でalign属性をcenterにしています。

div要素でalign属性をleftにしています。