作ってみよう

 Step.8  背景 色の指定・・・背景色を設定します。

 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
<html>
<head>
<title> My Web Sight </title>
</head>
ここから ↓
<body bgcolor="
aqua">
<p>
<font size="4">背景にアクア色を指定しています。</font>
</p>
</body>
ここまで ↑
</html>
 
 タグの説明

 <body bgcloor="○○"></body>
 <body>タグにbgcloor属性でページに背景色を指定
      できます。

 ○○には直接色名か「  」のあとにRGBの値を
    16進数で記入する方法があります。


 
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように出来ていると思います。

背景にアクア色を指定しています。






 
 背景に画像を指定・・・背景に画像を設定します。
 今回は背景用の画像として下の画像を用意しました。まずここで守らなければいけない事は、絶対に直接画像の
 アドレスを記入しない事です。これから様々な素材のHPを見ると思いますが、素材のHPの注意書きがにもあるように、
 直リンクするとサーバーに負担が架り最悪サーバーダウンなんて事があるかもしれませんので、直リンクは絶対に止
 めましょう。

 

 まず左の画像を右クリック名前を付けて画像を保存する。

 画像の名前は何でも良いです。

 保存先はStep.1で作ったhpフォルダ内のimgフォルダです。

 

 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
<html>
<head>
<title> My Web Sight </title>
</head>
ここから ↓
<body background="
check1.gif">
<p>
<font size="4">背景に画像を指定しています。</font>
</p>
</body>
ここまで ↑
</html>
 
 タグの説明

 <body background="○○"></body>
 <body>タグにbackground属性で使用する画像ファイル
      を指定出来ます。

 ○○には先程保存した画像のファイル名を記入します。

 背景に使う画像は出来るだけ軽い素材にしましょう。
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように出来ていると思います。
 

背景に画像を指定しています。

 

 

 

 


 

 背景画像の固定・・・背景画像を固定します。
 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
<html>
<head>
<title> My Web Sight </title>
</head>

ここから ↓
<body background="
check1.gif" bgproperties="fixed">
<p>
<font size="4">bgproperties="fixed"を指定すると、ブラウザの画面を上下左右のいずれかにスクロールしても背景画像は最初に表示された状態のまま動かなくなります。</font>
</p>
</body>
ここまで ↑

</html>
 タグの説明

 <body background="
check1.gif"
                bgproperties="fixed">

 通常、ブラウザ画面をスクロールすると背景画像も一緒に
 スクロールしますがbgproperties="fixed"を指定すると、背
 景画像が固定されてスクロールします。
 解り易く説明すると、この画面で上の背景画像はこの
 ページのスクロールバーを上下すると背景も一緒に
 スクロールし ますが下の『 ここ 』は背景がスクロール
 しません。
 入力出来たら保存してindex.htmlを開いてみましょう。 『 ここ 』のように出来ていると思います。

Home  Step.9