ホームページ作成＆上位表示！

ホームページ作成に役立つ！スタイルシート！

●背景画像を設置！

今現のこのページの上部や、左側のメニュー部分等には、幾つかの画像を設定して表示してます。

上部のタイトル部分の様に１つの大きな画像を表示する方法から、小さな画像を繰返して表示したりと表示方法は色々ですが、これを覚える事で、デザイン力がＵＰしますので、是非覚えましょう！

下記の２つは、画像を表示してますが、１つ目は大きめな画像を表示し、２つ目は小さめな画像を繰返して表示させてます。

この大きめな画像は１枚の画像をそのまま表示してます。
今回の設定は、ブロック要素である　div　に対して設定してますが、リンクの　a　に設定しても良いです。
使用するのは、　background-image:url('ファイル名');　を使用します。
ファイル名には、表示させたい画像の場所とファイル名を設定します。
下記のwidth , height ,colorに関しては、それぞれ、div の幅,高さ,文字色　を設定してます。
また、background-repeat:no-repeat;　は画像を繰り返し表示しないで１回だけ表示する指定です。

div
	{
	width:400px;
	height:200px;
	color:#ffffff;	
	background-image:url('./img/imgtest1.jpg');
	background-repeat:no-repeat;
	}

見た目には１つの画像に見えますが１つの小さめな画像（幅288px、高5px）を上から下に向けて繰返して表示してます。
表示している画像は、↓

↑この画像です。ちょっと小さめなので分かりにくいので、拡大して表示すると↓

↑この様に下側に色の違った線がある画像です。
これを上から下に向けて繰返して表示してます。
背景画像表示方法は上記の方法と同じですが、繰り返りし方向をしてするbackground-repeat:repeat-y;を使用してＹ軸方向（上下方向）に設定してます。
横方向の場合には、background-repeat:repeat-x;を使用してＸ軸方向（左右方向）に指定する事が出来ます。

#basckimg2
	{
	width:285px;
	height:100px;
	color:#ffffff;	
	background-image:url('./img/listhbg.gif');
	background-repeat:repeat-y;
	}

この方法をＣＳＳ１にて説明したリンクに対して背景画像を違う画像に入れ替えたりする事も可能ですので、あなたのホームページ作成に役立てて下さい。

このスタイルシートを使用したホームページ作成方法に関しては、1upホームページ作成というサイトでブラウザの表示結果なども含めて説明してますので、ホームページ作成方法には1upホームページ作成サイトで確認してみて下さい。