スタイルシートについて <STYLE SHEET>

HOME > スタイルシート > スタイルシートについて

■ スタイルシートとは

スタイルシート（Cascading Style Sheet：CSS）
スタイルシートとは、WEBのレイアウト（見栄え）を定義するために使います。見栄えの情報（たとえば、文字のサイズ、色、位置など）をいくつも用意して、それをページ全体または個別に指定できるものです。この指定情報のことを「スタイルシート」と言います。一般的には、W3C（World Wide Web Consortium:）がHTMLの仕様書で取り上げているCSSをスタイルシートと言います。サポートはIE.3およびNN.4ですが、完全に両方に対応しているわけではありません。

サンプル
リンクをスタイルシートで指定してみました。下のそれぞれの文字にマウスを置いてみてください、それぞれマウスを置いた時の変化が違います。

<P><SPAN><H4>と分けてみました。

サンプル<P>の場合

サンプル<SPAN>の場合

サンプル<H4>の場合

■スタイルシートの基本

HTMLでも同じですが、「○○をどうする」（例：文字の色を赤にする）と言ったスタイルの基本記述があります。

「PROPERTY:VALUE」、これは「定義するもの:その値」と言う関係で、例えば色を赤にする→「color:redまたは(#ff0000)」と「何を:どうする」と書いていくことになります。定義とその値の間には「:」で区切ってください。

複数指定する場合は「定義するもの:その値;定義するもの:その値」と書き、それぞれを「;」で結びましょう。この場合「:」と「;」は違うので注意して下さい。

例）font-size:10px;color:red

■スタイルシートの定義方法
  1. HTMLのタグに対してSTYLEを使って個別に定義する方法。これはそのタグの範囲のみ有効になります。
  2. ヘッダー<HEAD>内に記述し、そのページに反映させる方法。
  3. スタイルシートをいくつか適用させたものを、一つのファイルにまとめ、このファイルのURLを指定することによって反映させる方法。
■ スタイルシートの長所と短所
長所
  • HTMLとは違いスタイルを一度に変更できる。
  • 外部ファイルを使えば、複数のページのスタイルをまとめて変更できる
  • グループ化やファイル形式にすることでWEBページのファイルサイズを小さくできる。
  • HTMLソースが綺麗になる（ソースがまとまる）

短所

  • スタイルシート未対応のブラウザがある。
  • ブラウザによって見栄えが違う。
■ 実際に書いてみよう

まずは簡単なスタイルシートを書いて見ましょう。下のソースは<P>と<DIV>ですが、これは<SPAN>や<H1>などでも指定できます。

<P STYLE="color:red">文字を赤色に変更</P>

文字を赤色に変更

■ 複数指定の場合

複数指定するのは上記で書いている。「定義するもの:その値;定義するもの:その値」です。

<DIV STYLE="font-size:22px;color:red">文字の大きさと色を同時変更</DIV>

文字の大きさと色を同時変更

うまくできましたか？これがスタイルシートです。しかし、これくらいのことならHTMLとあまりかわらないですね。次は少し変わったことをやってみましょう。

■ ヘッダーに記述してページ全体に適応させよう。

ページ内の<H1>タグを一づつ指定するのは面倒なので、ページ内にある<H1>タグを全て変化するように指定してみましょう。

この場合は「ページ情報」になるので、ヘッダーの中に記述しましょう。<HEAD>ここに記述</HEAD>

ソース（構文）はこのようになります。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
H1 { color:red; }
</STYLE>
</head>
<body>
<H1>赤になります</H1>
<H1>赤になります</H1>
<H2>変化しません</H2>
</body>
</html>

表示はこのようになります。<H1>タグ全てのみ、赤色に指定したので<H2>タグは変化しません。

<H1>赤になります</H1>

<H1>赤になります</H1>

<H2>変化しません</H2>

■ ヘッダーに記述してページ全体に適応させよう。（複数指定）

応用です。<H1>は赤色に、<H3>タグは青色にしてみましょう。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
H1 { color:red; }
H3 { color:blue; }
</STYLE>
</head>
<body>
<H1>赤になります</H1>
<H2>変化しません</H2>
<H3>青色になります</H3>
<H3>青色になります</H3>
</body>
</html>

<H1>赤になります</H1>

<H2>変化しません</H2>

<H3>青色になります</H3>

<H3>青色になります</H3>

■ スタイルシートに対応していないブラウザのために

ページを見る全ての人がスタイルシートに対応しているとは限りません。ページを開いたときにソースが丸見えにならないように、コメントは<!-- -->で隠してください。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
H1 { color:red; }
-->
</STYLE>
</head>
<body>
<H1>赤になります</H1>
<H1>赤になります</H1>
<H2>変化しません</H2>
</body>
</html>

これはヘッダー内に記述する場合のみです。<BODY>内で記述してしまうと本文が見えなくなります。

■ 定義を複数指定

定義を複数指定する場合は、「定義するもの:その値;定義するもの:その値」なので同じようにヘッダーに記述しましょう。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
H4 { font-styel:italic;color:green; }
-->
</STYLE>
</head>
<body>
<H2>変化しません</H2>
<H4>文字が斜体で緑色になる</H4>
<H4>文字が斜体で緑色になる</H4>
</body>
</html>

<H2>変化しません</H2>

<H4>文字が斜体で緑色になる</H4>

<H4>文字が斜体で緑色になる</H4>

■ グループで指定する

スタイルシートの定義方法のひとつで、同じスタイルを使用するタグをグループでまとめます。

定義方法はグループ化するタグを「,」（カンマ）で区切りながら続けて記入します。この場合「<」や「>」はいりません。

表記例

<STYLE TYPE="text/css">
<!--
H1,H2,H3 { color:red; }
-->
</STYLE>

<P>や<DIV>をグループ化するのも同じです。

<STYLE TYPE="text/css">
<!--
P,DIV { color:red; }
-->
</STYLE>

この方法を使うことによって、スタイルシート全体のサイズを縮小することになります。

■別のファイルを使って適用させる。

スタイルシートを別のファイル（外部ファイル）で作成し、各ページからそのファイルのスタイルシートをLINKで共有します。

拡張子.css ファイルの中身

例）H1タグは赤に、H2タグは青色に指定したファイルの場合です。

H1{ color:red }
H2{ color:blue }

各ページのヘッダーに記述するタグ

外部ファイル（例：AAA.css）を呼び出すリンクタグです。

<html>
<head>
<title>スタイルシート</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="AAA.css">
</head>
<body>
<H1>外部指定でH1は赤色になります。</H1>
<H2>外部指定でH2は青色になります。</H2>
</body>
</html>

このリンクタグを各ページで使用すると同じスタイルを共有することができます。

■ 同じ要素をキーワードで指定

上記で説明したスタイルシートは同じ要素（タグ）全てに適応されますが、キーワードを使うことによって同じ要素のタグを個別に指定できます。

記述方法

要素（PやH1など）.（ピリオド）任意のキーワード{ 定義するもの:その値 }

例）<P>タグを個別に指定しましょう。

<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
P.blue{ color:blue; }
P.green{ color:green; }
-->
</STYLE>
</head>

CLASS（クラス）を使いスタイルを適用させます。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
P.blue{ color:blue; }
P.green{ color:green; }
-->
</STYLE>
</head>
<body>
<P CLASS="blue">クラスblueは、青色で表示です。</P>
<P CLASS="green">クラスgreenは、緑色で表示です。</P>
</body>
</html>

このクラス指定は、P.blueだから青色ではなく、{ color:blue }で青色を指定しているからですよ。P.blueのblueはあくまでも「任意の名前」です。

■ 任意のキーワードで指定

定義方法の一つ。これは要素(H、P、DIVなど)で指定するのではなく任意のキーワードのみで指定します。

記述方法

.（ピリオド）任意のキーワード{ 定義するもの:その値 }

<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
.AAA{ color:red; }
.BBB{ color:blue; }
-->
</STYLE>
</head>

CLASS（クラス）を使いスタイルを適用させます。

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
.AAA{ color:red; }
.BBB{ color:blue; }
-->
</STYLE>
</head>
<body>
<P CLASS="AAA">クラスAAAは、赤色で表示です。</P>
<DIV CLASS="BBB">クラスBBBは、青色で表示です。</P>
</body>
</html>
■コメントを記入

コメントを記入して覚え書きなどに利用してみよう。

/* ここにコメント*/

<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
<!--
.AAA{ color:red; } /* AAAは赤に指定*/
.BBB{ color:blue; }/*BBBは青に指定 */
-->
</STYLE>
</head>
<body>
<P CLASS="AAA">クラスAAAは、赤色で表示です。</P>
<DIV CLASS="BBB">クラスBBBは、青色で表示です。</P>
</body>
</html>

[HOME]

Click Here!