■スタイルシートをつかう
スタイルシートは Cascading Style Sheet (カスケーディング・スタイルシート)の略で
Cssと更に略して書かれます。Cssの役割はホームページのデザインを管理する事です。
(文字に色をつけたり、文字の大きさを変えたり、枠線をつけたり、背景の色を変えたりなど)
文字の装飾や背景色の変更などはHtmlタグでも出来ますが、
Css(スタイルシート) のほうが書き方が簡単なので楽だし、より細かなデザインをする事が出来ます。
スタイルシートの使う時のポイントは
「Cssはタグに囲まれた文字や空間に対して属性を適用する」
という事です。
要は「ここからここまで」の部分をどのようにしたいか?を後から考えるができます。
さらに外部Cssの場合、全Webページの全装飾を一括して変更する事が可能なので Webサイト全体のイメージを統一する為に利用されます。
Cssの書き方
例では、要素「p」の「文字の大きさ」を「15ポイント」に指定し、 「文字の色」を「#000099」と指定しています。
Webページの先頭でこのように指定していれば、一つ一つ指定しなくても、 要素「p」で囲まれたすべての文字の大きさが15ポイント、色が#000099(青)になります。 「p」を「セレクタ」、「font-size」を「属性(プロパティ)」、「15pt」を「値」と言います。 複数指定するときは;(セミコロン)で区切ります。
p {
font-size:15pt;
color:#000099;
}
(ケース)
<p>要素「p」で囲まれた部分は全てこのように表示されます。</p>
要素「p」で囲まれた部分は全てこのように表示されます。
スタイルシートはタグを一生懸命勉強した後に見ると、書き方の違いから 「まったく別の言葉」に見えるかもしれません。 しかし、その使い方は易しく書き方もタグに比べて繰り返し書く事が少なくなるので ここに書かれた「Css書き方の基本」はこれから始める人にも是非マスターして欲しいと思います。
スタイルシートについての詳細な解説は
「Sytle/Css辞典」
の方でもしていますので、是非ご参照下さい。