STEP5 : 背景の設定をする 

 第4回までで文章はだいぶ書けるようになりましたね^^
今回はページの背景をいろいろ変えてみましょう。
真っ白もいいですが他の色にしたり好きな柄の壁紙を貼り付けることができます。

 背景の設定は、bodyタグの中で行います。
まず、背景色を変えたい場合はbgcolor="色"でbgcolor属性を指定します。
 この時、色の指定は文字色の時と同じで、
blueのようにカラーネームでも、#ff0000というコードでもどちらでもOKです。
 カラーコード一覧は→こちら←

 左下のように設定すれば、ページ全体が右下のように表示されます。

bodyタグの書き方 ページ背景の見え方
<body bgcolor="blue">




 壁紙を張る場合はまず壁紙にしたいファイルを用意しましょう。
いろいろなサイトさんでオリジナルの壁紙を作成されているので
気に入ったものをダウンロードさせていただきましょう^^
このサイトでもオリジナルのフリー素材を配布しております^^


 ファイルが用意できたらこれをサーバーへアップロードします。アップロードの方法はSTEP3でやりましたね、htmlファイルと全く同じ方法でできます。
 第1回で書いたように、画像ファイルは専用のディレクトリ(フォルダ)を作成するなど、
自分が管理しやすいように整理しておきましょう。

 さて、壁紙を設定するには、bodyタグ内で次のように指定します。

<background="壁紙にしたい画像ファイルのアドレス">

 例えば私の場合、「image」というフォルダの中にある「tex1_bl.gif」というこのファイルを壁紙に設定するのは次のようなります。

bodyタグの書き方 ページ背景の見え方
<body background="http://skyline.skr.jp/image/tex2_bl.gif">




 ここで注意していただきたいのですが、皆さんがページを作る時にこのハートの画像を使いたい場合、上のアドレスを使ってはいけないということです。
 「http://skyline.skr.jp/」は私のサイトのアドレスなので、上のアドレスをそのまま使うと、皆さんのページから私のサイト上の画像に「直接リンク(または直リンク)」をすることになってしまいます。直接リンクは一般に禁止されている行為ですが、初心者の方は知らずにやってしまうことが多いですので注意が必要です。 しっかりと皆さんご自身のアドレスを使って画像を表示するようにしましょう。

 さて、壁紙の設定ができましたが、この時ページをスクロールすると壁紙も一緒に動いてしまうため、同じ模様の繰り返しではなく1枚の大きな絵を壁紙にした場合に不自然なつなぎ目が現れてしまいます。  →こんな感じ

 そこで、bodyタグに次のような記述を加えて壁紙を固定することができます。

bodyタグの書き方 ページ背景の見え方
<body background="ファイルのアドレス" bgproperties="fixed" >

→こんな感じに


 だいぶページが華やか(?)になってきましたね♪
背景を自分の好きな色や壁紙にして楽しみましょう^^
 ただし、背景色や壁紙の柄によっては本文が見づらくなってしまうことがあるので注意しましょう。
文字色を変えることで見やすくするなどの工夫もいろいろしてみましょう。

 次回はいろいろな画像ファイルを扱ってみましょう^^


←前のSTEPへ  △メニューへ△  次のSTEPへ→

▲サイトTopへ