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

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



 @ 全体を中央寄せにする
 A テーブルの幅、空きの設定
 B テーブルの活用(タイトル等を飾る)
 C 水平線を引く
 D テーブルの各セルの設定
 E セルの各列毎の属性の一括設定
 F 画像まわりの余白の設定
 G イラスト画像を入れる



@ 全体を中央寄せにする

今のホームページは、中央寄せの部分や、左寄せの部分があり、何となくアンバランスですね。
それでは全体を、中央寄せしてみましょう。 タイトル・メールは、すでに中央寄せしてあります。
「あいさつ」の部分
まずは、あいさつの部分を中央寄せします
赤字の部分が修正したところです。
メモ帳
<!-- ++++++++++ あいさつ ++++++++++ -->
 <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>  ←1列目
    <img src="kuma.gif">  ←くまの画像貼り付け
   </td>           (テーブルにしたので回り込みは不要)
   <td>  ←2列目
    <font color="navy" face="HG創英角ポップ体">  ←あいさつ文
     ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
     まだ始めたばかりなので、内容はあまりありませんが、<br><br>
     すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
    </font>
   </td>
  </tr>
</table>  ←テーブルでくくる(終了)
  </div>  ←中央寄せ終了
これを,HTMLファイルにして表示すると,次のようになります。
ようこそ、くまさんのホームページへ、おいでくださいました。

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

すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
テーブルの罫線を非表示にする( border="0" )と次のようになります。
ようこそ、くまさんのホームページへ、おいでくださいました。

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

すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
文字列の縦の配置も中央寄せになり、ここでも思った様になりました。
テーブルの、おさらいしましょう。 規定値というのは、初めから設定してある性質のこと。
  テーブルのおさらい
<table border="0">  : 罫線を表示しない(これが規定値!)
セルの縦方向の規定値 : 中央寄せ
セルの横方向の規定値 : 左寄せ
「自己紹介」の部分
最後に、ホームページの「自己紹介」の部分を、中央寄せして表示します。

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

で中央寄せし、HTMLファイル表示すれば、次のようになります。
まずは、自己紹介します

 なまえ くまさん
 住 所 兵庫県の中部の田園地帯
 仕 事 パープリンの助手
 年 齢 30歳代
 趣 味 パソコン・お酒が特に好き
 高 校 ぱーぷりん高校を何とか卒業
 大 学 ぱーぷりん大学でパソコンを専攻
ホームページの全体へ応用は次の項目を併せます。


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

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

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

これらの改善のため、テーブルの幅の設定と、文字と罫線の間隔の設定を学習しましょう。
  テーブルの幅、文字と罫線の間隔の設定
<table cellpadding="**"> : ** ピクセル(px)分の文字と罫線の間隔を設定
<table width="**"> : テーブル幅を ** ピクセル(px)に設定
<td width="**">  : セル幅を ** ピクセル(px)に設定

 ここでは、各セル幅の合計がテーブル幅と考えましょう
テーブルの、文字と罫線の間隔を10ピクセル(px)分を確保します。
「なまえ」のセル幅を100ピクセル(px)、「くまさん」のセル幅を350ピクセル(px)分を確保します。

こうして、第1行目で、各列の幅を設定すれば、すべての列幅が決まります。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
<!-- ++++++++++ 自己紹介  ++++++++++ -->
 <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>□30歳代</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ファイルにして表示すると,次のようになります。
まずは、自己紹介します

 なまえ くまさん
 住 所 兵庫県の中部の田園地帯
 仕 事 ぱーぷりん の助手
 年 齢 30歳代
 趣 味 パソコン・スキーが特に好き
 高 校 ぱーぷりん高校を何とか卒業
 大 学 ぱーぷりん大学でパソコンを専攻
ホームページ全体に応用
それでは、ホームページに、前の2項の修正を加えてみましょう。
もう一点、メールの位置を下に持ってきましょう。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
 <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>□30歳代</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>
右のスイッチをクリックして,表示した上で、ソースを参照してください。


B テーブルの活用(タイトル等を飾る)

今までもテーブルを学んで来ましたが、このタグは大変 幅広い活用が出来ます。
テーブルのよく使う活用法(属性)を、今まで習った部分も合わせ、まとめてみましょう。
配置関連の属性
まずは、配置に関連した属性からです。
  テーブルの配置関連属性
<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>

  内枠の太さを10ピクセルにします
<table  border="1" cellspacing="10">
  <tr> <td>●●</td> <td>××</td> </tr>
  <tr> <td>□□</td> <td>▲▲</td> </tr>
</table>
これを,HTMLファイルにして表示すると,次のようになります。
これが普通のテーブルです
●● ××
□□ ▲▲

内枠の太さを10ピクセルにします
●● ××
□□ ▲▲
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)
くまさんのホームページ
ホームページの全体へ応用は次の項目を併せます。


C 水平線をひく

水平線も文字とアレンジすると、簡単な割に、そこそこデザインに利用できます。
それでは、水平線を引くタグを説明しましょう。
  水平線を引く : hrタグ
<hr size="**" width="**" align="**" color="**">
 ・ size="**" : 線の幅をピクセル(px)単位で指定
 ・ width="**" : 線の長さをピクセル(px)またはパーセンテージで指定
 ・ align="**" : 線の表示位置を指定 center:中央 , left:左端 , right:右端
 ・ color="**" : 線の色を指定  色名、またはRGB指定

    注!・・・前後で改行するようです
タイトル文字の上下に水平線を引くと、前項とは違ったデザインになります。
線厚はやや太めの 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> タグは前後で改行されます。
ホームページ全体に応用
それでは、ホームページに、前の2項の応用してみましょう。
タイトルにはボーダーを、自己紹介のテーブルは立体感と、背景に色つけします。
また、「まずは自己紹介します」の部分を文字を大きくタイトル調に変えました。
赤字の部分が修正したところです。 全角の空白を□で表します。
メモ帳
 <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>□30歳代</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>
右のスイッチをクリックして,表示した上で、ソースを参照してください。


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

テーブルは、全体の設定以外に、セルの個別・行毎の設定もできます。
配置関連の属性
まずは、配置に関連した属性から説明します。
  各セル・各行の配置関連の設定 : 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"> ←1行目:行で、まとめて設定
  <td>●●</td> <td>××</td> <td>★★</td> </tr>
 <tr height="50"> ←2行目:高さだけ、まとめて設定
  <td align="left" valign="bottom">左・下</td> ←1列目:セルを設定
  <td align="center" valign="top">中央・上</td> ←2列目:セルを設定
  <td align="right" valign="middle">右・中</td> </tr> ←3列目:セルを設定
</table>
 一行目はまとめて、中央で上寄せに設定<br>
 2行目は、セル毎に変えてみました<br clear="all"> ←回り込みを解除
 回込みを中断しました
これを,HTMLファイルにして表示すると,次のようになります。

●● ×× ★★
左・下 中央・上 右・中
一行目はまとめて、中央で上寄せに設定
2行目は、セル毎に変えてみました
回込みを中断しました
背景関連の属性
次は、背景に関連した属性を説明します。
  各セル・各行の背景関連の設定 : 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"> ←1行目:行で、まとめて設定
  <td>●●</td> <td>××</td> <td>★★</td> </tr>
 <tr height=100>
  <td bgcolor="red">★★</td> ←1列目:セルを設定
  <td background="bg.gif">●●</td> ←2列目:セルを設定
  <td bgcolor="green">××</td> </tr> ←3列目:セルを設定
</table>
 一行目はまとめて、blue を塗りました<br>
 2行目は、セル毎に変えてみました<br clear="all"> ←回り込み中止
 回込みを中断しました
これを,HTMLファイルにして表示すると,次のようになります。

●● ×× ★★
★★ ●● ××
一行目はまとめて、blue を塗りました
2行目は、セル毎に変えてみました
回込みを中断しました
ホームページの全体へ応用は次の項目を併せます。


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

セルの個別・行毎の属性設定ができましたが、大きなテーブルなどで、各列毎に同じ属性になる事がよくあります。 このような場合、その都度セルに同じ設定を繰り返すのは大変(特に変更・更新したいときなど・・)で、各列毎に属性の一括設定が出来れば楽ですね。
HTMLでは、次のように列の一括設定が出来ます。
  セルの各列毎の属性の一括設定 : 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"> ←1列目の属性
   <colgroup span="2" width="50" align="right" bgcolor="pink">
     ↑2,3列目の属性
 <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>
  1列目は、中央で上寄せに設定しました<br>
  2、3列目は、まとめて右寄せで背景を pink にしました
これを,HTMLファイルにして表示すると,次のようになります。
●● ×× ★★
×× ★★ ●●
■■ ☆☆ △△

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

ホームページに応用
ホームページの「自己紹介」で、左側列を、全角空白文字を取った上で、中央寄せしましょう。
もう一点、左右の各列で背景色を変えてみましょう。 全角の空白を□で表します。
関連の部分のソースのみを次に示します。
メモ帳
<!-- ++++++++++ 自己紹介 ++++++++++ -->
 <font size="5" color="#bb00ff">
  <b>★ 自 己 紹 介 ★</b>
 </font><br><br>

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

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

 <tr><td>なまえ</td> ←1列目の全角空白を取った(以下同様)
     <td>□<i>くまさん</i></td></tr>
 <tr><td>住 所</td>
     <td>□兵庫県の中部の田園地帯</td></tr>
 <tr><td>仕 事</td>
     <td>□ぱーぷりんの助手</td></tr>
 <tr><td>年 齢</td>
     <td>□30歳代</td></tr>
 <tr><td>趣 味</td>
     <td>□<u>パソコン・スキー</u>が特に好き</td></tr>
 <tr><td>高 校</td>
     <td>□ぱーぷりん高校を何とか卒業</td></tr>
 <tr><td>大 学</td>
     <td>□ぱーぷりん大学でパソコンを専攻</td></tr>
</table><br>
右のスイッチをクリックして,表示した上で、ソースを参照してください。


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

レイアウトの都合で、画像の周りに余白を設定したい時がよくありますね。
その設定の方法を説明しましょう。
  画像の周りに余白の設定 : 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>
  横に30ピクセル ☆☆☆
   <img src="momo.jpg" align="middle" hspace="30" vspace="20">
  ☆☆☆ 縦に20ピクセル<br>
 ☆☆☆の空白部分を入れました
</div>
これを,HTMLファイルにして表示すると,次のようになります。
☆☆☆☆☆☆
これが ☆☆☆☆☆☆ 普通の状態
☆☆☆☆☆☆


☆☆☆☆☆☆
横に30ピクセル ☆☆☆☆☆☆ 縦に20ピクセル
☆☆☆の空白部分を入れました
ホームページの全体へ応用は次の項目を併せます。


G イラスト画像を入れる

もう一息、飾り付けが欲しいですね。 フリー素材をお借りして、飾り付けてみましょう。
以前にもお世話になった素材屋405番地さんでお借りします。
次は、飾り付けに使う画像とファイル名の一覧です。
これらの画像ファイルを、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.gifwatashi1.gif に変えてみます。
さらに両画像と中の文字の縦方向を、「中央合わせ」にします。
メモ帳
 <font size=5 color=#bb00ff>
  <img src="profile.gif" align="absmiddle"> ←左の画像(中央合わせ)
   <b>  自 己 紹 介  </b>
  <img src="watashi1.gif" align="absmiddle"> ←右の画像(中央合わせ)
 </font>
これを,htmlファイルにして表示すると,次のようになります。

  自 己 紹 介  
その他、細かく飾る
それから、「自己紹介」とメールの間を飾ります。
チューリップの花3つ tulip*.gif を横に並べ、その間を50ピクセル空けます。
メモ帳
 <img src="tulip1.gif">
 <img src="tulip3.gif">
 <img src="tulip4.gif">
   普通に3つのチューリップを並べました<br><br>
 <img src="tulip1.gif">
 <img src="tulip3.gif" hspace=50> ←中央画像の両横を50px空けた
 <img src="tulip4.gif">
   中央のチューリップに50ピクセルの空白を空けました
HTMLファイルにして表示すると,次のようになります。

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

中央のチューリップに50ピクセルの空白を空けました
その他、適宜花を貼り付けたり、ラインを入れたりします。
メールの画像も、くまさん入りのものに取り替えます。
ホームページ全体に応用
以上の飾り付けをしたホームページの、ソースファイルです。
もう慣れられた事でしょうから、全角の代用表示(□)は今後省略します。
メモ帳
<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> 30歳代</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">  ←3つのチューリップを付けました
 <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> 
右のスイッチをクリックして,表示した上で、ソースを参照してください。
如何でしょう? 少しはホームページらしくなったでしょうか?