*スタイルシート*
HTMLの仲間で、
カスケーディングスタイルシート(CSS)という言語があります。
(略して「スタイルシート」とよく呼びます。)
色、サイズ、文字・画像の位置など
ホームページのデザインを設定するテクニックですが、
とても自由度が高いので、
HTMLだけではできない”おもしろいデザイン”を作ることができます。
たとえば「文字のサイズ」は、HTMLだと「1」~「7」から選んでいましたが、
<FONT size="6">サイズ6の文字です</FONT>
↓
サイズ6の文字です
スタイルシートを使えば、好きなだけ小さくも大きくもできます。
<FONT style="font-size:32pt;">サイズ32ptの文字です</FONT>
↓
サイズ32ptの文字です
また、これからは
デザインはすべてスタイルシートを使わなければならないと言われているので、
実はとても重要なものなのです。
今回はためしに、「
背景を動かさない」という技をスタイルシートを使ってやってみます。
●方法
- 「top.html」を開いて、<BODY background="haikei.jpg">(背景画像の名前はみなさんそれぞれです)を、
ただの<BODY>に戻します。
これでいったん背景はなくなりましたね。
- <HEAD>~</HEAD>間に、次のようにスタイルシートのためのタグを入れます。
これで、「スタイルシートを使いますよ」と宣言するのです。
(ときどき、<HEAD>~</HEAD>間じゃないところに書いている人を見かけます。かっこ悪いです(^-^;)
<HTML>
<HEAD>
<TITLE>ななたぐのへや</TITLE>
<STYLE type="text/css">
<!--
-->
</STYLE>
</HEAD>
<BODY>
(以下略)
|
- 続いてこの中にスタイルシートを書き入れていきます。
今回は背景画像を指定しますので、次のように書いてください。
<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'); }
これでブラウザで見ると、今までと変わらず表示されることがわかると思います。
- 続いて、「背景画像を動かさない」というスタイルシートを書き入れます。
<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