スタイルシートの基礎

マスターするとホームページづくりが２倍楽しくなります！

スタイルシートとは

トップ、サブタイトルの「マスターするとホームページづくりが２倍楽しくなります！」を見てください。
帯状に色付けした背景に色付き文字の見出し行。これがスタイルシートの代表的な使い方です。
スタイルシートで　「見出し行を背景が黄色で文字をグリーン色にする」　と指定しているんです。

「スタイルシートなんか使わなくたって、文字に色をつけたり、背景に色つけたり、タグの属性でできる」と思われましたか？
でも、スタイルシートを知らない人がHTML文を書いていくと、その場所にいきつく度に背景と文字の色を指定するはずです。何回も同じことするのは大変ですよね。スタイルシートならホームページを新しく作成するときも、模様替えで変更するときも一箇所だけの書き込みや修正ですむので、とっても簡単に楽に設定できるのです。

そんなこと言ったって良くわかんな～い。　　という方、スタイルシートの使用前と使用後を作ってみましたので、
変更後のスタイルの好き嫌いは別として、変化を比べて見てください。
どちらも同じHTMLです。使用後に対してスタイルを書いたシートをリンクさせただけです。

使用前

使用後

ここで説明するスタイルシートは、正式には「カスケーディングスタイルシート」(CSS)と呼ばれています。
これは、W3C (World Wide Web Consortium) という団体によって1996年に提唱されたホームページのスタイルを制御するための規格です。

スタイルシートには､スタイル(レイアウト､デザインなど見栄えに関連するもの)だけをまとめて記述します。
スタイルシートを利用すると、ホームページを雑誌のような凝ったデザインにすることもできるのです。しかも W3C は今後、スタイルの設定は HTML ファイルでは行わず、スタイルシートによってコントロールしていく方針ということです。未来を先取りしたホームページを作るためにも、ここはスタイルシートに慣れておきましょう。

スタイルを書き出す場所について

スタイルシートは通常HTMLの<HEAD>～</HEAD>の間に書きます

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

詳しくはあとで説明します

スタイルを設定してみよう

見出しの文字色を赤にする

スタイルシートを書くときの基本書式です　これを命令系統にしますと・・・

　見出し　{ 色 : 赤 }　　⇒　　セレクタ { 属性 :　値　}

　「セレクタの属性を値にする」

のように設定して組み込んであるのです
属性は何(セレクタ)に対して、スタイルを設定するかを決める部分で、
色だけでなく大きさやフィルターなどといったいろいろなスタイルが用意されています

テキスト文のなかに赤い文字色の見出しをつけるスタイルの宣言

<STYLE TYPE="text/css">

</STYLE>

見出し文の記述をつけると・・・

< STYLE TYPE="text/css">

</STYLE>
<BODY>
<H1>見出し行その１だよ</H1>
<H1>見出し行その２だよ</H1>　　　　サンプル

文字は赤のまま、斜体にしたい場合

< STYLE TYPE="text/css">

</STYLE>
<BODY>
<H1>見出し行その１だよ</H1>
<H1>見出し行その２だよ</H1>　　　　サンプル

このように同じセレクタ内でスタイル(属性と値)を複数指定する場合は
「　;　」セミコロンで仕切ります
　で囲むのはスタイルシート未対応のブラウザにソースがそのまま文字で表示されるを防ぐためです