超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 背景をつけよー

今、背景は真っ白ですね。
ちょっと色を加えるとホームページっぽくなって、やる気が出てくるかも・・・

背景に色をつけるには、前に出てきた
<body bgcolor="カラーネーム">
でもできるけど、せっかくだからかわいい(あるいはクール系)壁紙をつかいましょう。
そんな壁紙もってないよーって方へ
インターネットは宝の山
ホームページを飾る素材を作ってくれる素敵なホームページがたくさんあります。
しかも無料で提供していただけるんです。
このサイトのリンク集に素材屋さんがいくつかあるんで、行ってみてね。

素材屋さんを集めたサイトもたくさんあります。
こちらも探してみましょう。

■ sozai-R
■ 素材の森

気に入った壁紙が見つかったら、自分のパソコンにダウンロードしましょう。
決して「直接リンク」はしないように!!!
素材屋さんホームページ上の気に入った壁紙にマウスポインタを当てて、右クリックすると「名前を付けて画像を保存」というのがあるから、これを選択します。
保存する場所は、今作ってるホームページと同じフォルダを指定します。名前は適当に。
そうそう、大事なことを忘れてた。素材をいただくときは管理人さんの説明をよく読んでからです。
無料かどうか、著作権はどうなるのか、連絡の有無などなど・・・

壁紙のダウンロードができたら、背景に挿入します。

ここでも <body> タグを使います
<body background="ファイル名"> です。
この "ファイル名" のところに、素材屋さんの"URL/ファイル名"を入れちゃうのが「直接リンク」(または直リンク)と言われるもので、一番やってはいけないことです。
素材屋さんのお世話になりながら、素材屋さんのホームページが置いてあるサーバーに負担をかけてしまうことになります。
恩を仇で返すっちゅうか、他人のふんどしで相撲を取るって感じですね。


話を戻します。<body background="ファイル名"> を使うんでしたね。
"ファイル名" はもちろんさっきダウンロードしたものです。
私はこれを使ってみます。ファイル名="koza_kabe1.gif" です。

とゆうことは、タグは <body background="koza_kabe1.gif"> になりますよね。
ついでに背景に合わせて、文字色も変えちゃいましょうか。

1.<body text="brown">・・・テキスト色(青は合わないから変えちゃった)
2.<body bgcolor="orange">・・・背景色
3.<body link="tomato">・・・リンク色
4.<body vlink="red">・・・既読リンク色
5.<body alink="hotpink">・・・アクティブ色

こんな感じにしてみました^^
背景色<body bgcolor>は、背景画像<body background>を指定した場合は画面に表示されないので指定する必要はないのですが、画像はブラウザに読み込まれるのが一瞬遅いため、背景画像が表示される前に背景色が表示されます。したがって、背景画像に似た色を指定しておけば、違和感がなくなります。

<body> タグは長くなっちゃうけど、こうなります。

<body background="gazo_kabe1.gif" text="brown"
bgcolor="orange" link="tomato" vlink="red" alink="hotpink">