*スタイルシート*

HTMLの仲間で、カスケーディングスタイルシート(CSS)という言語があります。
(略して「スタイルシート」とよく呼びます。)
色、サイズ、文字・画像の位置などホームページのデザインを設定するテクニックですが、
とても自由度が高いので、
HTMLだけではできない”おもしろいデザイン”を作ることができます。

たとえば「文字のサイズ」は、HTMLだと「1」〜「7」から選んでいましたが、

<FONT size="6">サイズ6の文字です</FONT>

サイズ6の文字です

スタイルシートを使えば、好きなだけ小さくも大きくもできます。

<FONT style="font-size:32pt;">サイズ32ptの文字です</FONT>

サイズ32ptの文字です

また、これからはデザインはすべてスタイルシートを使わなければならないと言われているので、
実はとても重要なものなのです。

今回はためしに、「背景を動かさない」という技をスタイルシートを使ってやってみます。

→→→


●方法
  1. 「top.html」を開いて、<BODY background="haikei.jpg">(背景画像の名前はみなさんそれぞれです)を、
    ただの<BODY>に戻します。
    これでいったん背景はなくなりましたね。

  2. <HEAD>〜</HEAD>間に、次のようにスタイルシートのためのタグを入れます。
    これで、「スタイルシートを使いますよ」と宣言するのです。
    (ときどき、<HEAD>〜</HEAD>間じゃないところに書いている人を見かけます。かっこ悪いです(^-^;)
    <HTML>
      <HEAD>
        <TITLE>ななたぐのへや</TITLE>
        <STYLE type="text/css">
        <!--
    
    
        -->
        </STYLE>
      </HEAD>
      <BODY>
      (以下略)

  3. 続いてこの中にスタイルシートを書き入れていきます。
    今回は背景画像を指定しますので、次のように書いてください。
    <HTML>
      <HEAD>
        <TITLE>ななたぐのへや</TITLE>
        <STYLE type="text/css">
        <!--
        BODY{background-image:url('haikei.jpg');}
    
        -->
        </STYLE>
      </HEAD>
      <BODY>
      (以下略)

    ちょっと解説しますと、
    BODY { background-image: url('haikei.jpg'); }
    セレクタ
    「BODYタグの」
      属性(プロパティ)
    「背景イメージを」

    「heikei.jpgにします」
     

    という意味になっています。

    このようにスタイルシートでは、どのタグにどういう属性をつけるかを指定していきます。
    ただしHTMLと書き方が違いますので、注意してください。
    HTML → <BODY background="haikei.jpg">
    スタイルシート → BODY { background-image : url('haikei.jpg'); }

    これでブラウザで見ると、今までと変わらず表示されることがわかると思います。

  4. 続いて、「背景画像を動かさない」というスタイルシートを書き入れます。
    <HTML>
      <HEAD>
        <TITLE>ななたぐのへや</TITLE>
        <STYLE type="text/css">
        <!--
        BODY{background-image:url('haikei.jpg'); background-attachment:fixed;}
    
        -->
        </STYLE>
      </HEAD>
      <BODY>
      (以下略)

属性「background-attachment」は「背景を動かしますか?固定しますか?」
それに対し、scroll(動かす)、fixed(固定する)の値を選べます。
(通常はscrollに設定されています。)

このように、ひとつのタグにいくつかのスタイルシートを設定する場合は、そのセレクタ内にまとめて書きます。
<FONT color="blue">
<FONT size="5">
ではなく、
<FONT color="blue" size="5">
と書いたように、
スタイルシートも、
BODY{background-image:url('haikei.jpg');}
BODY{background-attachment:fixed;}
ではなく
BODY{background-image:url('haikei.jpg'); background-attachment:fixed;}
と書けるのです。
(これもたまに間違っている人を見かけます(^-^;)

これで以上です。ブラウザで確認しましょう!

スタイルシートを使えば、ほかにもこんな技が出来ます!

例1)表<TABLE>の枠を点線にする
    <STYLE type="text/css">
    <!--
    BODY{background-image:url('haikei.jpg'); background-attachment:fixed;}
    TABLE{border-style:dotted;}

    -->
    </STYLE>

例2)リンク文字<A HREF=〜>の下線を消す
    <STYLE type="text/css">
    <!--
    BODY{background-image:url('haikei.jpg'); background-attachment:fixed;}
    TABLE{border-style:dotted;}
    A{text-decoration:none;}

    -->
    </STYLE>

例3)ページ全体は青色(blue)にして、表<TABLE>の中だけ背景「haikei.jpg」にする
    <STYLE type="text/css">
    <!--
    BODY{background-color:blue;}
    TABLE{background-image:url('haikei.jpg');}
    A{text-decoration:none;}

    -->
    </STYLE>

ほかにもたくさんの属性・値がありますし、 さらに勉強すると、
例1)を「ひとつの表だけ点線にして他は普通の線にする」とか
例2)を「マウスを乗せたときだけ線を表示する」とかのように
パワーアップさせることもできます。
詳しいことは、あとで「7タグ スタイルシート講座」でお教えします。(トップページに戻ったら、右側真ん中らへんにあります)
とりあえず次行きましょう!



Copyright (C) 7tag project dv