スタイルシートの基礎知識

スタイルシートとは
スタイルシートの基本
クラスの利用
IDの利用
HTMLの相関関係を利用した設定方法
外部ファイルの利用

スタイルシートとは

スタイルシートとは、HTML文章のレイアウトやデザインを行うための技術です。正式名称は Cascading Style Sheets なので、頭文字をとって CSS と呼ばれることもあります。

WebページはHTML(Hyper Text Markup Language)で記述されていますが、見栄えまですべてHTMLで記述せず、HTMLで論理構造を記述しスタイルシートにデザインを担当させるのが本来の使い方です。

『HTML→文章構造』『スタイルシート→レイアウト・デザイン』に分離すると、HTMLファイルのメンテナンス性が向上したり、環境によって表示が大きく異なることを防いだり…。というメリットがあります。

デザインを担当するために作られただけあって、フォームやスクロールバーの装飾など、HTMLでは不可能なことも多く実現することが可能です。

Web Liberty では、CGIのデザイン設定にこのスタイルシートを使用しています。

スタイルシートの基本

スタイルシートの書式は、属性に対応する値を :（半角コロン）で区切って指定します。値の後には ;（半角セミコロン）を付けますが、これは省略することができます。

セレクタ { 属性: 値; }

スタイルシートでは『セレクタの属性を値にする』という形で設定を行います。具体的には以下のようになります。

<html>
<head>
<title>スタイルシートサンプル</title>
<style>
<!--
    span { color: #FF0000; }
-->
</style>
</head>
<body>
<p>スタイルシートは<span>デザイン</span>を担当します。</p>
</body>
</html>

表示結果は以下のようになります。

スクリーンショット

上の例では、span { color: #FF0000; } がスタイルシートの設定部分で、<style> と </style> の間に記述します。

さらにスタイルシートに未対応のブラウザの事を考慮し、スタイルシートの定義内容を  でコメントにしておきます。これにより、スタイルシートが解釈できないブラウザで、スタイルシートの定義部分がそのまま表示されるのを防ぐことができます。

上記のサンプルでは span がセレクタ、color が属性、#FF0000 が値となっています。つまり、span タグの範囲の文字色を赤にするという指定を行っています。

span とは、HTMLタグの一種なのですが、b や s のような外観の変化はありません。（b は対象文字列を太字にするHTML。s は対象文字列に取り消し線を表示するHTML。）つまり、使用してもページの表示には一切影響を与えません。では何のためのHTMLなのかというと、スタイルシートのために用意されたHTMLです。

b や s に対し、以下のようにスタイルシートを設定することは可能です。

b { color: #FF0000; }

しかし、b には『文字列を太字にする』という効果があるため、単に文字列の色を変化させる場合など、純粋にスタイルシートの効果を反映させたい場合は使いづらいです。ですからスタイルシートを多用したページを作成する際は、span が非常に役に立ちます。（ただしHTMLとCSSに慣れてきたら、きちんと文章構造を考えましょう。）

今回は span に対する効果を HEADタグ内の <style> と </style> の範囲内で指定しましたが、特定のHTMLに直接スタイルを指定することもできます。例えば

スタイルシートは<b>デザイン</b>を担当します。

という文章の <b> に直接設定する場合は

スタイルシートは<b style="color:#FF0000;">デザイン</b>を担当します。

と記述します。style="～" の中でスタイルシートを設定します。

また、スタイルシートの定義を専用のファイルで行い、HTMLファイルから参照する方法もあります。

クラスの利用

セレクタには、任意に設定できるCLASSというものがあります。特定の識別子を指定しておき、必要に応じて識別子から呼び出すものです。具体的には以下のようになります。

<html>
<head>
<title>クラス利用サンプル</title>
<style>
<!--
    .kyoutyou {
        color: #FF0000;
        font-weight: bold;
    }
-->
</style>
</head>
<body>
<u class="kyoutyou">クラス</u>を利用すれば<span class="kyoutyou">必要に応じて</span>スタイルを<u>呼び出す</u>ことができます。
</body>
</html>

表示結果は以下のようになります。

スクリーンショット

<style> 内で、先頭に . をつけて定義すると class を用いて呼び出すことができるようになります。具体的には上記のサンプルのように、呼び出したいHTMLタグに class="クラス名" を追加します。

この定義内容はどのHTMLタグからでも呼び出すことができるため、使い勝手がよくなります。また、効果を変化させたい場合、通常のHTMLのようにすべてのタグを修正する必要がなく、<style> 内の定義のみを変更すればすべてに反映されるため、メンテナンス性が飛躍的に向上します。

IDの利用

セレクタには、任意に設定できるIDというものがあります。CLASS同様、特定の識別子を指定しておき、必要に応じて識別子から呼び出すものです。具体的には以下のようになります。

<html>
<head>
<title>ID利用サンプル</title>
<style>
<!--
    span#kyoutyou {
        color: #FF0000;
        font-weight: bold;
    }
-->
</style>
</head>
<body>
<u id="kyoutyou">ID</u>を利用すれば<span id="kyoutyou">必要に応じて</span>スタイルを<u>呼び出す</u>ことができます。クラスとは異なり、１つのHTML文章内で一度しか呼び出せません。
</body>
</html>

表示結果は以下のようになります。

スクリーンショット

<style> 内で、先頭に対象にしたいHTMLタグと # をつけて定義すると id を用いて呼び出すことができるようになります。具体的には上記のサンプルのように、呼び出したいHTMLタグに id="ID名" を追加します。

この定義内容はクラスと異なり、一つのHTML文章内から一度しか呼び出せません。（現状のブラウザでは複数回呼び出すことができますが、仕様上は正しくありません。）また、IDは # の前に指定したHTML（上の場合は span）にのみ、その効果が反映されます。クラスと異なり、<u id="kyoutyou"> にはスタイルが反映されていないのに注意してください。

HTMLの相関関係を利用した設定方法

HTMLの文章構造を利用して、特定のHTMLに対してのみスタイルを指定することができます。具体的には以下のようになります。

<html>
<head>
<title>相関関係サンプル</title>
<style>
<!--
    p .kyoutyou {
        color: #FF0000;
        font-weight: bold;
    }
-->
</style>
</head>
<body>
<u class="kyoutyou">相関関係</u>を利用すれば<span class="kyoutyou">必要に応じて</span>スタイルを<u>呼び出す</u>ことができます。
<p>特定の<u class="kyoutyou">HTML</u>内のみに<span class="kyoutyou">スタイルを反映</span>されることができます。</p>
</body>
</html>

表示結果は以下のようになります。

スクリーンショット

<style> 内で、先頭に反映させたいHTMLタグを書き、スペースをあけてさらに 反映させたいHTMLタグ や クラス・ID を指定します。上の場合、<p> タグに囲まれた部分でのみ、.kyoutyou の指定が反映されます。

また、p .kyoutyou { の部分を p strong { とすることにより、<p> タグに囲まれた <strong> タグにのみ、スタイルを反映させることができます。

外部ファイルの利用

スタイルシートの定義を専用のファイルで行い、HTML文章から参照することができます。Web Liberty のCGIではこの方法を利用してデザインの設定を行っています。

一例として style.css というファイルを作成し、以下の内容を記述します。

span { color: #FF0000; }

次に以下のようなHTMLファイルを作成します。

<html>
<head>
<title>外部ファイル利用サンプル</title>
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
スタイルシートは<span>デザイン</span>を担当します。
</body>
</html>

<link rel="stylesheet" href="./style.css" type="text/css"> は外部のスタイルシート定義ファイルを参照するための記述です。./style.css の部分には、HTMLファイルからの style.css へのパスを設定します。

これでHTMLファイルにスタイルシートの定義を取り込むことができるため、表示すると以下のようになります。

スクリーンショット

初めに示したサンプルと同じ表示になります。

Webサイトのデザインをすべて style.css で行い、HTMLファイルからこのスタイルシート定義ファイルを参考するようにすれば、このファイルを変更するだけですべてのHTMLファイルのデザインを変更することができます。これにより、メンテナンス性に優れたWebサイトを構築することができます。Web Liberty でもこの方法を利用してサイトのデザインを行っています。

Web Liberty

サイト内検索

目次