中級編2

 背景をお洒落に
   背景にデザインを使えるか。


『答え』 勿論、使えます。画像でお洒落に仕上げましょう。

では、背景に使う画像を用意します。フリーで配布されているものを利用するのが早道ですね。 『お菊巧芸』さんのところからお借りしてきましょう。
bg01.gif ←右クリックで自分のパソコンに取り込んで下さい。
(画像の上で右クリックして「名前をつけて画像を保存」を選択。もうすっかり得意技ですよね。)
背景画像の保存先は、当然ですが貴方のホームページ作成用フォルダ myHP です。

さて、背景画像のセットは、色指定で使ったタグ<BODY>で設定します。

<BODY background="bg01.gif">

今までは<BODY BGCOLOR=〇〇〇>で背景色指定してきた代わりに、<BODY BACKGROUND=〇〇〇>で画像指定するって訳です。
では、作成中のHTML文を書き直しましょう。

<HTML>
<BODY background="bg01.gif">
<center>
<FONT SIZE=5>
<FONT COLOR="BLUE">
私は YourNAME。これは私のホームページです。
<BR><BR>
<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="MSM.jpg"><br>
</td></TABLE>
</TD></TABLE>
</td></table>
</FONT>
</font>
</center>
<BR>
<DIV align="right">
<font color="green" size=4>
コンテンツを増やして行くのでご期待ください。
</font>
</DIV>
<table border=1>
<TR><TD> 名 前 </TD><TD>YourNAME</TD></TR>
<TR><TD> 住 所 </TD><TD>東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD>03-1234-5678</TD></TR>
<TR><TD> メール </TD>
<TD><A HREF="mailto:info@misteroz.net">YourADDRESS</A>
</TD></TR>
<TR><TD>お気に入り</TD>
<TD><A HREF="https://misteroz.net/ozland/">遊園地</A>
</TD></TR>
</table>
</BODY>
</HTML>

変わったのは2行目の<BODY background="bg01.gif">だけなんですけどね。(^^)
出来上がりを先に見たい人は ●ココをクリック● して確認下さいませ。
良い感じになりましたねぇ。これで貴方は、背景を自由に使いこなせるようになった背景達人なのです。
ってコトでこの項は修了です。

☆彡main point
・<BODY background="○〇○">で背景画像指定。
・この書式で1つの画像を背景一杯に繰り返してくれます。
・だから、小さい画像で十分に機能します。小さいことは良いことだ(古っ)。
・いろんな背景でデザインしてやって下さい。全体が引き立つよ。
・背景画像の色と文字の色を同系統にすると読み難くなるので注意。


質問メール  SCHOOL TOP