１０-２

　スタイルシートでデザインアップ-2
　　　スタイルシートで背景画像の変化を。

『答え』　スタイルシートなら背景画像のテクニックも簡単です。

スタイルシートというのは、HTMLの進化した（しようとする）姿だと考えましょう。
これまで勉強してきたHTMLも2.0とか3.2とか進化しているんですよ。その中でデザイン面の設定をCSS（Cascading Style Sheets）と言います。それが独立してCSS Level1とかLevel2と拡張されてきてるということなんです。
（ぐああああ、退屈だなあ説明ばっかしは）
説明は置いといて、サンプルを見ましょうか。


<style type="text/css">
BODY { background-image:url("renga01.gif");
           background-repeat:repeat-y;}
</style>
<body bgcolor=800000 text=white>
<br>
<h1>　スタイルシートで<br>
　　背景画像も部分出しだぞ〜</h1><br>
</body>


さてさて、これってどうなるんでしょうか。●ココをクリックしてね●
どうです、背景画像って壁紙という通りべた〜〜っと張り付けちゃうもんですが、サンプルは縦１列にだけ背景出ししてるでしょ。
こういうのがスタイルシートの得意技ですね。
賢明な生徒は気付いておられることでしょうねえ。background-repeat:repeat-yの最後のy（ワイ）をx（エックス）に変えるとどうなるか。
そうです、背景画像が横に１列並びます。なんか応用していろいろ出来そうですね。（＾＾）

背景画像の固定技というリクエストもありましたのでタグをご紹介致しますです。

<style type="text/css">
BODY  { background-image      : url(renga01.gif);
        background-attachment : fixed; }  
</style>

新しい世界が見えた気になりましたか。その気になったら、この項は修了でーす。
質問メール　 ＯＺ道場メニュー