HTML～レイアウト

無料ではじめる！ホームページ入門～ホームページ作成解説サイト～

HOME > HTML > レイアウト

レイアウト

<table>～</table>タグでテーブルをつくります。
<tr>～</tr>タグで行を、<td>～</td>タグでセルをつくります。

HTMLソース

結果

1-1	1-2	1-3
2-1	2-2	2-3

border=0を指定すると枠線を非表示にすることができます。
width属性でテーブルの幅やセルの幅を指定したり、テーブルの中にテーブルをつくったりすることで、ただの表としてだけでなくページのレイアウトに活用することができます。

このページもいくつかのテーブルを使っています。border属性に0を指定して枠線を消していますが、枠線を表示させるとこうなります。→こちら。

<hr>～</hr>タグを使って横罫線を引くことができます。

HTMLソース

<p>
太さを５、長さを４００ピクセルに設定。
</p>
<hr size="5" width="400">
<p>
太さを２、長さを３０パーセント、右揃えに設定。
</p>
<hr size="2" width="30%" align="right">

結果

太さを５、長さを４００ピクセルに設定。

太さを２、長さを３０パーセント、右揃えに設定。

<div>～</div>タグのalign属性で文章や画像位置をまとめて指定します。

HTMLソース

<div align="right">
<p>
画像やテキストを右揃えにします。
</p>
<img src="../img/dog.gif" width="41" height="56">
</div>

結果

画像やテキストを右揃えにします。

HTML文書内の空白や改行などをブラウザ上にそのまま表示させたいときには<pre>～</pre>タグを使います。
<pre>～</pre>タグで挟まれたテキストは等幅フォントで表示され、空白や改行などもそのまま表示されます。

HTMLソース

<pre>
空白や改行
もそのまま表示されます。
</pre>

結果

空白    や改行
もそのまま表示されます。

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送