CSS-----Cascading Style Sheet-----解説
＜背景に一枚だけ画像を貼り付けたい時に＞
　 普通、背景に画像を入れると全面にタイリングされてしまいますが
cssを使うとこれを一枚だけ表示させる事が出来ます。
また、左側面に一列だけ、上部に一列だけ、なんて事も出来ます。		 　
◆少しならソースを弄ってみてもいいわ、とおっしゃる方向け◆
----- NO1.　一枚表示 -----
　

<お約束>　このCSS記述法はHTMLファイルと
画像ファイルが同一のディレクトリ（フォルダー）上に
あるものとして記述します。
つまり、同じフォルダーに保存するということです。
◎以下は何も表示されていないマッサラなページのソースです。
　 <html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>
　 ◎上の <head> </head>の間に下記コードを書き込んで下さい、場所は <head> </head>の間であれば何処でも良いのですがここでは順番にmetaの下に書きます。
<style type="text/css">
body {background-color: #FFFFFF; background-image: url(xxxx.gif); background-repeat: no-repeat}
</style>
◎入れてみます。
　 <html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
body {background-color: #FFFFFF; background-image: url(xxxx.gif); background-repeat: no-repeat}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
　

◎次に url(xxxx.gif)の部分ですが、これは使用したい画像の位置と名称です。
ここに表示したい画像のファイル名を入れて下さい。勿論 .jpeg .png でもOKです。
始めの<お約束>で同一フォルダーにファイルを入れたのはこのためです、
別フォルダーにしますとこの（）内の記述が変わります。

これで終わりです、出来ましたらブラウザで試しに表示させてみて下さい。
　　　　　　　　　　　　
　----- NO2.　<上部一列表示><左側一列表示>-----
　

NO1.のソースをほんの少し替えるだけで上部横、左側縦一列表示にすることが出来ます。

<style type="text/css">
body {background-color: #FFFFFF; background-image: url(xxxx.gif); background-repeat: no-repeat}
上記ソースの赤い文字部分を替えます。

◎上部横一列表示
<style type="text/css">
body {background-color: #FFFFFF; background-image: url(xxxx.gif); background-repeat: repeat-x}
◎左側縦一列表示
<style type="text/css">
body {background-color: #FFFFFF; background-image: url(xxxx.gif); background-repeat: repeat-y}
　　　　　以上ですが、今回取り上げたCSSコードは一番簡単、単純なヘッダーでの記述法です。
　　　　　また一般的なブラウザー（IE4.0　NN4.0 以上）であれば表示にも問題の無いものだけを
　　　　　掲載しました。

　　　　　尚、疑問点、ご質問がお有りでしたらお気軽にメールをどうぞ。

　　　　　-------------------------　参考文献　------------------------------
　　　　　　　　　　　HTMLテクニック辞典（ナツメ社）、
　　　　　　Webデザイン・テクニック（毎日コミュニケーションズ）

物置表紙へ戻る