ホームページを整える

第３節　ホームページを整える

　　今まで習ったことで、一通りの事は出来るようなったけど
　　デザインがイマイチだったり、
　　レイアウトのバランスも気になる所もあるよね
　　もう一歩、ホームページとしての形を
　　ぼくと一緒に整えていきましょう

　①　全体を中央寄せにする
　②　テーブルの幅、空きの設定
　③　テーブルの活用（タイトル等を飾る）
　④　水平線を引く

　⑤　テーブルの各セルの設定
　⑥　セルの各列毎の属性の一括設定
　⑦　画像まわりの余白の設定
　⑧　イラスト画像を入れる

①　全体を中央寄せにする

今のホームページは、中央寄せの部分や、左寄せの部分があり、何となくアンバランスですね。
それでは全体を、中央寄せしてみましょう。　タイトル・メールは、すでに中央寄せしてあります。

「あいさつ」の部分

まずは、あいさつの部分を中央寄せします
赤字の部分が修正したところです。

メモ帳

<!-- ++++++++++ あいさつ ++++++++++ -->
 <div align="center">　　←中央寄せ開始
  <img src="kuma.gif" align="left">

  <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">
   ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
   まだ始めたばかりなので、内容はあまりありませんが、<br><br>
   すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
  </font><br clear="all"><br>
 </div>　　←中央寄せ終了

これを，HTMLファイルにして表示すると，次のようになります。

ようこそ、くまさんのホームページへ、おいでくださいました。

まだ始めたばかりなので、内容はあまりありませんが、

すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。

画像が左端に寄り、右の余白部分の中央に文字が、中央寄せで表示されました。
画像と、文字を一緒に中央寄せし、また文字部分は左寄せにしたいのですが、うまくいきません。

このような場合、画像と文字を テーブル でくくり、それをセンタリングします
赤字の部分が修正したところです。

メモ帳

<!-- ++++++++++ あいさつ ++++++++++ -->
  <div align="center">　　←中央寄せ開始
<table border="1">　　←テーブルでくくる（開始）
  <tr>
   <td>　　←１列目
    <img src="kuma.gif">　　←くまの画像貼り付け
   </td>　　　　　　　　　　　（テーブルにしたので回り込みは不要）
   <td>　　←２列目
    <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">　　←あいさつ文
     ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
     まだ始めたばかりなので、内容はあまりありませんが、<br><br>
     すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
    </font>
   </td>
  </tr>
</table>　　←テーブルでくくる（終了）
  </div>　　←中央寄せ終了

これを，HTMLファイルにして表示すると，次のようになります。

テーブルの罫線を非表示にする（ border="0" ）と次のようになります。

文字列の縦の配置も中央寄せになり、ここでも思った様になりました。
テーブルの、おさらいしましょう。 規定値というのは、初めから設定してある性質のこと。

　　テーブルのおさらい
<table border="0"> 　：　罫線を表示しない（これが規定値！）
セルの縦方向の規定値：中央寄せ
セルの横方向の規定値：左寄せ

「自己紹介」の部分

最後に、ホームページの「自己紹介」の部分を、中央寄せして表示します。

　　<div align="center"> 「自己紹介」の部分 </div>

で中央寄せし、ＨＴＭＬファイル表示すれば、次のようになります。

まずは、自己紹介します

なまえ	くまさん
住　所	兵庫県の中部の田園地帯
仕　事	パープリンの助手
年　齢	３０歳代
趣　味	パソコン・お酒が特に好き
高　校	ぱーぷりん高校を何とか卒業
大　学	ぱーぷりん大学でパソコンを専攻

ホームページの全体へ応用は次の項目を併せます。

②　テーブルの幅、空きの設定

先程センターリングした、ホームページの「自己紹介」のテーブルについて、工夫してみましょう。

各セルの文字列で、左側は空白文字で罫線との間隔がありますが、右側と上下側の罫線との間隔が詰まり窮屈に感じます。　また、テーブルの横幅が小さいので、全体的バランスが悪いですね。

これらの改善のため、テーブルの幅の設定と、文字と罫線の間隔の設定を学習しましょう。

　　テーブルの幅、文字と罫線の間隔の設定
<table cellpadding="**"> ： ** ピクセル(px)分の文字と罫線の間隔を設定
<table width="**"> ：テーブル幅を ** ピクセル(px)に設定
<td width="**">　　：セル幅を ** ピクセル(px)に設定

　ここでは、各セル幅の合計がテーブル幅と考えましょう

テーブルの、文字と罫線の間隔を１０ピクセル(px)分を確保します。
「なまえ」のセル幅を１００ピクセル(px)、「くまさん」のセル幅を３５０ピクセル(px)分を確保します。

こうして、第１行目で、各列の幅を設定すれば、すべての列幅が決まります。
赤字の部分が修正したところです。　全角の空白を□で表します。

メモ帳

<!-- ++++++++++ 自己紹介  ++++++++++ -->
 <div align="center">
  <font color="#bb00ff">
 <b>まずは、自己紹介します</b>
 </font><br><br>

 <table border="1" cellpadding="10">　　←文字と罫線の間隔10px
  <tr>
   <td width="100">□なまえ</td>　　←セル幅100pxの指定
   <td width="350">□<i>くまさん</i></td></tr>　　←セル幅350pxの指定
  <tr>
   <td>□住　所</td>
   <td>□兵庫県の中部の田園地帯</td></tr>
  <tr>
   <td>□仕　事</td>
   <td>□ぱーぷりん　の助手</td></tr>
  <tr>
   <td>□年　齢</td>
   <td>□３０歳代</td></tr>
  <tr>
   <td>□趣　味</td>
   <td>□<u>パソコン・スキー</u>が特に好き</td></tr>
  <tr>
   <td>□高　校</td>
   <td>□ぱーぷりん高校を何とか卒業</td></tr>
  <tr>
   <td>□大　学</td>
   <td>□ぱーぷりん大学でパソコンを専攻</td></tr>
 </table></div>

これを，HTMLファイルにして表示すると，次のようになります。

まずは、自己紹介します

なまえ	くまさん
住　所	兵庫県の中部の田園地帯
仕　事	ぱーぷりん　の助手
年　齢	３０歳代
趣　味	パソコン・スキーが特に好き
高　校	ぱーぷりん高校を何とか卒業
大　学	ぱーぷりん大学でパソコンを専攻

ホームページ全体に応用

それでは、ホームページに、前の２項の修正を加えてみましょう。
もう一点、メールの位置を下に持ってきましょう。
赤字の部分が修正したところです。　全角の空白を□で表します。

メモ帳

 <html>
  <head>
   <title>くまさんのHP</title>
  </head>

 <body background="bg.gif">
 <div align="center">　　←センタリング開始（全体を一括指定する）

 <!-- ++++++++++ タイトル ++++++++++ -->
  <font size="7" color="red">
   くまさんのホームページ
  </font><br><br>

 <!-- ++++++++++ あいさつ ++++++++++ -->
 <table border="0">　　←画像と「あいさつ」をテーブルでくくる
  <tr>
   <td>
    <img src="kuma.gif">
   </td>
   <td>
    <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">
     ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
     まだ始めたばかりなので、内容はあまりありませんが、<br><br>
     すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
    </font>
   </td>
  </tr>
 </table><br>

 <!-- ++++++++++ 自己紹介 ++++++++++ -->
  <font color="#bb00ff">
   <b>まずは、自己紹介します</b>
  </font><br><br>

 <table border="1" cellpadding="10">　　←文字と罫線の間隔10px
  <tr>
   <td width="100">□なまえ</td>　　←セル幅の指定
   <td width="350">□<i>くまさん</i></td></tr>　　←セル幅の指定
  <tr>
   <td>□住　所</td>
   <td>□兵庫県の中部の田園地帯</td></tr>
  <tr>
   <td>□仕 事</td>
   <td>□パープリンの助手</td></tr>
  <tr>
   <td>□年　齢</td>
   <td>□３０歳代</td></tr>
  <tr>
   <td>□趣　味</td>
   <td>□<u>パソコン・スキー</u>が特に好き</td></tr>
  <tr>
   <td>□高　校</td>
   <td>□ぱーぷりん高校を何とか卒業</td></tr>
  <tr>
   <td>□大　学</td>
   <td>□ぱーぷりん大学でパソコンを専攻</td></tr>
 </table><br>

 <!-- ++++++++++ メールを貼る ++++++++++ -->　　←メールを下にした
  <a href="mailto:perplin@mh1.117.ne.jp">
   <img src="mail.gif" border="0">
  </a>

 </div>　　←センタリング終了
 </body>
 </html>

右のスイッチをクリックして,表示した上で、ソースを参照してください。

③　テーブルの活用（タイトル等を飾る）

今までもテーブルを学んで来ましたが、このタグは大変幅広い活用が出来ます。
テーブルのよく使う活用法（属性）を、今まで習った部分も合わせ、まとめてみましょう。

配置関連の属性

まずは、配置に関連した属性からです。

　　テーブルの配置関連属性
<table width="**" height="**" align="**" cellpadding="**" cellspacing="**">
　・ width="**" ：テーブルの横幅をピクセル(px)または％で指定します
　・ height="**" ：テーブルの高さをピクセル(px)または％で指定します
　・ align="**" ：テーブルの表示位置を指定します
　　　　center - 中央表示 , left - 左端表示(既定値) , right - 右端表示
　　　　left , right で文章の回込みが始まります
　・ cellpadding="**" ：枠線とセルの内容の間の隙間をピクセル(px)単位で指定します
　・ cellspacing="**" ：内枠の太さを指定します
　　　　0を指定すると、立体感の無い枠線を表示することができます

テーブルの幅や高さは、各セルで幅・高さを設定する時は、テーブル全体幅の設定は不要です。
cellspacing が初めて出てきましたので、ちょと練習してみましょう。

メモ帳

  これが普通のテーブルです
<table border="1">
  <tr> <td>●●</td> <td>××</td> </tr>
  <tr> <td>□□</td> <td>▲▲</td> </tr>
</table><br>

  内枠の太さを１０ピクセルにします
<table  border="1" cellspacing="10">
  <tr> <td>●●</td> <td>××</td> </tr>
  <tr> <td>□□</td> <td>▲▲</td> </tr>
</table>

これを，HTMLファイルにして表示すると，次のようになります。

これが普通のテーブルです

●●	××
□□	▲▲

内枠の太さを１０ピクセルにします

●●	××
□□	▲▲

cellpadding と併せて、行や列のスペースを確保するのに有効な感じですね。

罫線関連の属性

次は、罫線に関連した属性をまとめましょう。

　　テーブルの罫線の関連属性
<table border="**" bordercolor="**" frame="**">
　・ border="**" ：枠線の（外枠の）太さを指定します
　　　　この属性を記述しない、または、0を指定すると枠線を表示しません
　・ bordercolor="**" ：枠線の色を指定します
　・ frame="**" ：各セルの上下左右の枠線について、表示する/しないを制御します
　　　　void - 表示しない（既定値） , above - 上側のみ , below - 下側のみ
　　　　hsides - 上下のみ , vsides - 左右のみ , lhs - 左側のみ
　　　　rhs - 右側のみ , box - 上下左右 , border - 上下左右

外枠に厚みをつければ、テーブルに立体感が出ます。
この事を、タイトルの飾り付けに応用してみましょう。

メモ帳

<div align=center>
  　タイトルをテーブルで囲います(border=1)
 <table border="1">　　←外枠の厚みを 1px にする
  <tr><td>
   <font size="7" color="red">くまさんのホームページ</font>
  </td></tr>
 </table><br>

　 立体感を付けます(border=5)
 <table border="5">　　←外枠の厚みを 5px にする
  <tr><td>
   <font size="7" color="red">くまさんのホームページ</font>
  </td></tr>
 </table><br>

　　枠線との隙間を10ピクセル空けます
 <table border="5" cellpadding="10">　　←さらに枠線との隙間を 10 pxにする
  <tr><td>
   <font size="7" color="red">くまさんのホームページ</font>
  </td></tr>
 </table>
</div>

これを，HTMLファイルにして表示すると，次のようになります。

タイトルをテーブルで囲います(border=1)

くまさんのホームページ

立体感を付けます(border=5)

くまさんのホームページ

枠線との隙間を10ピクセル空けます

くまさんのホームページ

バナー風な感じになって、少しはカッコが付いたかな？

背景関連の属性

最後に、背景に関連した属性をまとめましょう。

　　テーブルの背景関連属性
<table bgcolor="**" background="**">
　・ bgcolor="**" ：背景色を指定します
　・ background="**" ：背景画像を指定します

タイトルの背景に色(#ffdddd)を付けてみましょう。

メモ帳

<div align=center>
 背景の色を付けます(bgcolor=#ffdddd)
 <table border="5" cellpadding="10" bgcolor="#ffdddd">
  <tr><td>
   <font size="7" color="red">くまさんのホームページ</font>
  </td></tr>
 </table>
</div>

これを，HTMLファイルにして表示すると，次のようになります。

背景の色を付けます(bgcolor=#ffdddd)

くまさんのホームページ

ホームページの全体へ応用は次の項目を併せます。

④　水平線をひく

水平線も文字とアレンジすると、簡単な割に、そこそこデザインに利用できます。
それでは、水平線を引くタグを説明しましょう。

　　水平線を引く　：　ｈｒタグ
<hr size="**" width="**" align="**" color="**">
　・ size="**" ：線の幅をピクセル(px)単位で指定
　・ width="**" ：線の長さをピクセル(px)またはパーセンテージで指定
　・ align="**" ：線の表示位置を指定　center：中央 , left：左端 , right：右端
　・ color="**" ：線の色を指定　　色名、またはＲＧＢ指定

　　　　注！・・・前後で改行するようです

タイトル文字の上下に水平線を引くと、前項とは違ったデザインになります。
線厚はやや太めの 5ピクセル（px）とし、幅はタイトルとバランスをとり 550ピクセル(px)としてみましょう。

メモ帳

<div align="center">
 <hr size="5" width="550" color="green">　←上のライン
  <font size="7" color="red"> くまさんのホームページ </font>
 <hr size="5" width="550" color="green">　←下のライン
</div>

これを，HTMLファイルにして表示すると，次のようになります。

くまさんのホームページ

ボーダー厚を変え、色を変え、幅を変えて色々試し、お好みに合ったものにしてください。
上の例でわかるよう、<hr> タグは前後で改行されます。

ホームページ全体に応用

それでは、ホームページに、前の２項の応用してみましょう。
タイトルにはボーダーを、自己紹介のテーブルは立体感と、背景に色つけします。
また、「まずは自己紹介します」の部分を文字を大きくタイトル調に変えました。
赤字の部分が修正したところです。全角の空白を□で表します。

メモ帳

 <html><head>
  <title>くまさんのHP</title>
 </head>

 <body background="bg.gif">
  <div align="center">

 <!-- ++++++++++ タイトル ++++++++++ -->
  <hr size="5" width="550" color="green">　←タイトル上ボーダー
   <font size="7" color="red"> くまさんのホームページ </font>
  <hr size="5" width="550" color="green"><br>　←タイトル下ボーダー

 <!-- ++++++++++ あいさつ ++++++++++ -->
  <table border="0">
   <tr><td>
    <img src="kuma.gif">
   </td><td>
    <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">
     ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
     まだ始めたばかりなので、内容はあまりありませんが、<br><br>
     すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
    </font>
   </td></tr>
  </table><br>

 <!-- ++++++++++ 自己紹介 ++++++++++ -->
  <font size="5" color="#bb00ff">　←文字を大きくした
   <b>★　自 己 紹 介　★</b>　←前後に★を付けた
  </font><br><br>
　　　　　　↓テーブル枠の厚み:5px　罫線間隔：10px　背景色#ddffff
  <table border="5" cellpadding="10" bgcolor="#ddffff">
   <tr><td width="100">□なまえ</td>
       <td width="350"><i>□くまさん</i></td></tr>
   <tr><td>□住　所</td>
       <td>□兵庫県の中部の田園地帯</td></tr>
   <tr><td>□仕　事</td>
       <td>□パープリンの助手</td></tr>
   <tr><td>□年　齢</td>
       <td>□３０歳代</td></tr>
   <tr><td>□趣　味</td>
       <td>□<u>パソコン・スキー</u>が特に好き</td></tr>
   <tr><td>□高　校</td>
       <td>□ぱーぷりん高校を何とか卒業</td></tr>
   <tr><td>□大　学</td>
       <td>□ぱーぷりん大学でパソコンを専攻</td></tr>
  </table><br>

 <!-- ++++++++++ メールを貼る ++++++++++ -->
  <a href="mailto:perplin@mh1.117.ne.jp">
   <img src="mail.gif" border="0">
  </a><br>

 </div>
 </body></html>

右のスイッチをクリックして,表示した上で、ソースを参照してください。

⑤　テーブルの各セルの設定

テーブルは、全体の設定以外に、セルの個別・行毎の設定もできます。

配置関連の属性

まずは、配置に関連した属性から説明します。

　　各セル・各行の配置関連の設定　：　tr , td タグ
<td width="**" height="**" align="**" valign="**">　：　各セル毎の設定
<tr height="**" align="**" valign="**">　　　　　　　　　：　各行毎の設定
　・ width="**" ：セルの横幅をピクセル(px)で指定
　・ height="**" ：セルの高さをピクセル(px)で指定
　・ align="**" ：セル内データの横方向の配置を指定
　　　　　　center ：中央揃え　,　left ：左端揃え（規定値）　,　right ：右端揃え
　・ valign="**" ：セル内データの縦方向の配置を指定
　　　　　　baseline ：ベースライン揃え　,　bottom ：下揃え
　　　　　　middle ：中央揃え（規定値）　,　top ：上揃え

行毎、セル毎の配置の練習をしてみましょう。
ついでに、文字の回込みのテストも、してみました。

メモ帳

<table width="300" border="1" align="left">　←回り込み設定
 <tr height="50" align="center" valign="top">　←１行目：行で、まとめて設定
  <td>●●</td> <td>××</td> <td>★★</td> </tr>
 <tr height="50">　←２行目：高さだけ、まとめて設定
  <td align="left" valign="bottom">左・下</td>　←１列目：セルを設定
  <td align="center" valign="top">中央・上</td>　←２列目：セルを設定
  <td align="right" valign="middle">右・中</td> </tr>　←３列目：セルを設定
</table>
 一行目はまとめて、中央で上寄せに設定<br>
 ２行目は、セル毎に変えてみました<br clear="all">　←回り込みを解除
 回込みを中断しました

これを，HTMLファイルにして表示すると，次のようになります。

●●	××	★★
左・下	中央・上	右・中

一行目はまとめて、中央で上寄せに設定
２行目は、セル毎に変えてみました
回込みを中断しました

背景関連の属性

次は、背景に関連した属性を説明します。

　　各セル・各行の背景関連の設定　：　tr , td タグ
<td bgcolor="**" background="**">　：　各セル毎の設定
<tr bgcolor="**" background="**">　：　各行毎の設定
　・ bgcolor="**" ：背景色を指定します
　・ background="**" ：背景画像を指定します
　* ie では tr で、一行一括に background で画像表示は出来ないようです

行毎、セル毎の背景の練習をしてみましょう。
ついでに、文字の回込みのテストも、してみました。

メモ帳

<table width="350" border="1" align="right">　←回り込み設定
 <tr height="50" bgcolor="blue">　←１行目：行で、まとめて設定
  <td>●●</td> <td>××</td> <td>★★</td> </tr>
 <tr height=100>
  <td bgcolor="red">★★</td>　←１列目：セルを設定
  <td background="bg.gif">●●</td>　←２列目：セルを設定
  <td bgcolor="green">××</td> </tr>　←３列目：セルを設定
</table>
 一行目はまとめて、blue を塗りました<br>
 ２行目は、セル毎に変えてみました<br clear="all">　←回り込み中止
 回込みを中断しました

これを，HTMLファイルにして表示すると，次のようになります。

●●	××	★★
★★	●●	××

一行目はまとめて、blue を塗りました
２行目は、セル毎に変えてみました
回込みを中断しました

ホームページの全体へ応用は次の項目を併せます。

⑥　セルの各列毎の属性の一括設定

セルの個別・行毎の属性設定ができましたが、大きなテーブルなどで、各列毎に同じ属性になる事がよくあります。　このような場合、その都度セルに同じ設定を繰り返すのは大変（特に変更・更新したいときなど・・）で、各列毎に属性の一括設定が出来れば楽ですね。
ＨＴＭＬでは、次のように列の一括設定が出来ます。

　　セルの各列毎の属性の一括設定　：　colgroup タグ
<colgroup width="**" span="**" align="**" valign="**" bgcolor="**">
　・ width="**" ：セルの横幅をピクセル(px)で指定
　・ span="**" ：例えばspan=3とすると、3列の指定を一度に行える
　・ align="**" ：セル内データの横方向の配置を指定
　　　　　　center ：中央揃え　,　left ：左端揃え（規定値）　,　right ：右端揃え
　・ valign="**" ：セル内データの縦方向の配置を指定
　　　　　　baseline ：ベースライン揃え　,　bottom ：下揃え
　　　　　　middle ：中央揃え（規定値）　,　top ：上揃え
　・ bgcolor="**" ：背景色を指定

　　* 正式には</colgroup>が続くのですが、省略される事が多いようです

それでは、colgroup タグ の使い方を例題で練習しましょう。

メモ帳

<table border="1" align="left">
   <colgroup width="100" align="center" valign="top">　←１列目の属性
   <colgroup span="2" width="50" align="right" bgcolor="pink">
　　　　　↑２，３列目の属性
 <tr height="50"> <td>●●</td> <td>××</td> <td>★★</td> </tr>
 <tr height="40"> <td>××</td> <td>★★</td> <td>●●</td> </tr>
 <tr height="60"> <td>■■</td> <td>☆☆</td> <td>△△</td> </tr>
</table><br>
  １列目は、中央で上寄せに設定しました<br>
  ２、３列目は、まとめて右寄せで背景を pink にしました

これを，HTMLファイルにして表示すると，次のようになります。

●●	××	★★
××	★★	●●
■■	☆☆	△△

１列目は、中央で上寄せに設定しました
２、３列目は、まとめて右寄せで背景を pink にしました

ホームページに応用

ホームページの「自己紹介」で、左側列を、全角空白文字を取った上で、中央寄せしましょう。
もう一点、左右の各列で背景色を変えてみましょう。　全角の空白を□で表します。
関連の部分のソースのみを次に示します。

メモ帳

<!-- ++++++++++ 自己紹介 ++++++++++ -->
 <font size="5" color="#bb00ff">
  <b>★　自 己 紹 介　★</b>
 </font><br><br>

<table border="5" cellpadding="10">

   <colgroup width="100" align="center" bgcolor="#ffdddd">　←１列目の属性
   <colgroup width="350" bgcolor="#ffeeee">　←２列目の属性

 <tr><td>なまえ</td>　←１列目の全角空白を取った（以下同様）
     <td>□<i>くまさん</i></td></tr>
 <tr><td>住　所</td>
     <td>□兵庫県の中部の田園地帯</td></tr>
 <tr><td>仕　事</td>
     <td>□ぱーぷりんの助手</td></tr>
 <tr><td>年　齢</td>
     <td>□３０歳代</td></tr>
 <tr><td>趣　味</td>
     <td>□<u>パソコン・スキー</u>が特に好き</td></tr>
 <tr><td>高　校</td>
     <td>□ぱーぷりん高校を何とか卒業</td></tr>
 <tr><td>大　学</td>
     <td>□ぱーぷりん大学でパソコンを専攻</td></tr>
</table><br>

右のスイッチをクリックして,表示した上で、ソースを参照してください。

⑦　画像まわりの余白の設定

レイアウトの都合で、画像の周りに余白を設定したい時がよくありますね。
その設定の方法を説明しましょう。

　　画像の周りに余白の設定　：　img src タグ
<img src="**" hspace="**" vspace="**">
　・ hspace="**" ：画像の左右に ** ピクセル(px)の空白部分を設定
　・ vspace="**" ：画像の上下に ** ピクセル(px)の空白部分を設定

画像周りの余白の取り方を、例題で練習しましょう。

メモ帳

<div align="center">
 ☆☆☆☆☆☆<br>
  これが　☆☆☆
    <img src="momo.jpg" align="middle">
  ☆☆☆　普通の状態<br>
 ☆☆☆☆☆☆<br><br>

 <hr width="70%">

 ☆☆☆☆☆☆<br>
  横に３０ピクセル　☆☆☆
   <img src="momo.jpg" align="middle" hspace="30" vspace="20">
  ☆☆☆　縦に２０ピクセル<br>
 ☆☆☆の空白部分を入れました
</div>

これを，HTMLファイルにして表示すると，次のようになります。

☆☆☆☆☆☆
これが　☆☆☆

☆☆☆　普通の状態
☆☆☆☆☆☆

☆☆☆☆☆☆
横に３０ピクセル　☆☆☆

☆☆☆　縦に２０ピクセル
☆☆☆の空白部分を入れました

ホームページの全体へ応用は次の項目を併せます。

⑧　イラスト画像を入れる

もう一息、飾り付けが欲しいですね。　フリー素材をお借りして、飾り付けてみましょう。
以前にもお世話になった素材屋４０５番地さんでお借りします。
次は、飾り付けに使う画像とファイル名の一覧です。
これらの画像ファイルを、ＨＴＭＬファイルと同じ所（今はデスクトップ）に置いておきます。

line2.gif
line3.gif
profile.gif	watashi1.gif	mail2.gif
tulip1.gif	tulip3.gif	tulip4.gif
hana1.gif	hana4.gif

あいさつ文を飾る

あいさつ文の上下を、ライン画像 line3.gif で飾ってみます。

メモ帳

<div align="center">
  <img src="line3.gif">
<table border="0">
  <tr><td>
    <img src="kuma.gif">
  </td><td>
    <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">
      ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
      まだ始めたばかりなので、内容はあまりありませんが、<br><br>
      すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
    </font>
  </td></tr>
</table>
  <img src="line3.gif"><br>
</div>

これを，HTMLファイルにして表示すると，次のようになります。

「自己紹介」を飾る

次に、「自己紹介」の両横の「★」を、ロゴ付きバナー profile.gif と watashi1.gif に変えてみます。
さらに両画像と中の文字の縦方向を、「中央合わせ」にします。

メモ帳

 <font size=5 color=#bb00ff>
  <img src="profile.gif" align="absmiddle">　←左の画像（中央合わせ）
   <b>　　自 己 紹 介　　</b>
  <img src="watashi1.gif" align="absmiddle">　←右の画像（中央合わせ）
 </font>

これを，htmlファイルにして表示すると，次のようになります。

　　自己紹介　　

その他、細かく飾る

それから、「自己紹介」とメールの間を飾ります。
チューリップの花３つ tulip*.gif を横に並べ、その間を５０ピクセル空けます。

メモ帳

 <img src="tulip1.gif">
 <img src="tulip3.gif">
 <img src="tulip4.gif">
   普通に３つのチューリップを並べました<br><br>
 <img src="tulip1.gif">
 <img src="tulip3.gif" hspace=50>　←中央画像の両横を50px空けた
 <img src="tulip4.gif">
   中央のチューリップに５０ピクセルの空白を空けました

HTMLファイルにして表示すると，次のようになります。

普通に３つのチューリップを並べました

中央のチューリップに５０ピクセルの空白を空けました

その他、適宜花を貼り付けたり、ラインを入れたりします。
メールの画像も、くまさん入りのものに取り替えます。

ホームページ全体に応用

以上の飾り付けをしたホームページの、ソースファイルです。
もう慣れられた事でしょうから、全角の代用表示（□）は今後省略します。

メモ帳

<html><head>
  <title>くまさんのHP</title>
</head>

<body background="bg.gif">
<div align="center">

<!-- ++++++++++ タイトル ++++++++++ -->
 <hr size="5" width="550" color="green">
　<font size="7" color="red">くまさんのホームページ</font>
 <hr size="5" width="550" color="green">

<!-- ++++++++++ あいさつ ++++++++++ -->
 <img src="hana1.gif" vspace="10"><br>　←花の画像 hana1.gif を挟みました
 <img src="line3.gif">　←ライン line3.gif を入れました

<table border="0">
 <tr><td>
  <img src="kuma.gif">
 </td><td>
  <font color="navy" face="HG創英角ﾎﾟｯﾌﾟ体">
   ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
   まだ始めたばかりなので、内容はあまりありませんが、<br><br>
   すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
  </font>
 </td></tr>
</table>

 <img src="line3.gif"><br>　←ライン line3.gif を入れました
 <img src="hana4.gif" vspace=10><br>　←花の画像 hana4.gif を挟みました

<!-- ++++++++++ 自己紹介 ++++++++++ -->
 <font size="5" color="#bb00ff">
  <img src="profile.gif" align="absmiddle">
　　　　　↑バナー profile.gif を付けました
   <b>　　自 己 紹 介　　</b>
  <img src="watashi1.gif" align="absmiddle">
　　　　　↑バナー watashi1.gif を付けました
 </font><br><br>

<table border="5" cellpadding="10">

   <colgroup width="100" align="center" bgcolor="#ffdddd"></colgroup>
   <colgroup width="350" bgcolor="#ffeeee"></colgroup>

 <tr><td>なまえ</td>
     <td>　<i>くまさん</i></td></tr>
 <tr><td>住　所</td>
     <td>　兵庫県の中部の田園地帯</td></tr>
 <tr><td>仕　事</td>
     <td>　ぱーぷりんの助手</td></tr>
 <tr><td>年　齢</td>
     <td>　３０歳代</td></tr>
 <tr><td>趣　味</td>
     <td>　<u>パソコン・スキー</u>が特に好き</td></tr>
 <tr><td>高　校</td>
     <td>　ぱーぷりん高校を何とか卒業</td></tr>
 <tr><td>大　学</td>
     <td>　ぱーぷりん大学でパソコンを専攻</td></tr>
</table><br>

 <img src="tulip1.gif">
 <img src="tulip3.gif" hspace="50">　　←３つのチューリップを付けました
 <img src="tulip4.gif"><br><br>
 <img src="line2.gif"><br><br>　←ライン line2.gif を入れました

<!-- ++++++++++ メールを貼る ++++++++++ -->
 <a href="mailto:perplin@mh1.117.ne.jp">
  <img src="mail2.gif" border="0">　←メールの画像を入れ替えました
 </a><br>

</div>
</body></html>

右のスイッチをクリックして,表示した上で、ソースを参照してください。

如何でしょう？　少しはホームページらしくなったでしょうか？