スタイルシートとは・・・



Cascading Style Sheet、頭文字だけとってCSSは一般的にスタイルシートと呼ばれています。

『cascade』とは滝のことを意味する英語ですが、同じく滝を意味する『fall』とは異なり、一直線に落下する滝ではなく段階的に段々と落ちてくる滝のことをいいます。
従って、Cascading Style Sheetとは、段階的(連鎖的)に設定することができるスタイルシートという意味になります。


現在ではWebページを記述する時には、コンテンツ部分(論理構造を表現した内容部分)と、その見栄えの部分(いわゆるデザイン部分、スタイル部分)を分けて書くことになっいます。

スタイルシートとは、HTMLのデザイン部分を記述したファイルです。

スタイルシートの内容を変更するか、別のスタイルシート適用するだけで、Webページの見栄えをがらっと変更することができます。
見栄えの部分とコンテンツ(内容)部分を分けることにより、コンテンツの部分がシンプルになって、論理の流れなどがスッキリ表現できるようになるというメリットがあります。

スタイルシートの記述方法は3つあります(スタイルシートの適用順位は上から1.2.3.の順です。1が最も優先順位が高いです)。
1.個別のタグに直接記述する方法

2.<head>タグ内にスタイルシートを記述する方法

3.別ファイルとしてスタイルシートファイルを作成し、そこにスタイルシートを記述して、複数のHTMLファイルから共用する方法
見栄えを設定する<font>タグは現在使用を推奨されていないので、よい例ではありませんが、 ここでは<font>タグに赤色を設定することと、太字にして表示することをタグに直接スタイルシートを記述してみました。

エディタでHTMLファイルを開いて確認するか、Webページ作成ソフトのHTML表示編集機能で確認してみてください。

次のように記述しました。
<font style={color:#FF0000;font-weight:bold;}>Cascading Style Sheet</font>
・・・2011年度の授業までは利用可能でしたが、現在ではこの機能は使えなくなっています。最初の例に示したように<span style="color:#FF0000;font-weight:bold;">と記述してみて下さい(2015-01-08追記)。

1、2箇所使用しただけで、HTMLファイルの内容は随分雑然としています。
この方法は、あまり、よい方法ではありません(上述したように、現在このfontタグによるスタイル設定は使用不可になっています(fontタグそのものが非推奨))。
2015-01-08現在、古い記述方法である<strike></strike>で取消線(line-through)を引くことができましたが、これも非推奨で現在は<del style="text-decoration: line-through;"></del>と書くことが推奨されています。
ここでは個別のタグにスタイルシートを記述しましたが、スタイルシートファイルに書いた方がすっきりします(2015-01-08追記)。


また、<head>タグ内にスタイルシートを記述し、そのファイル内だけに適用される記述方法もあります。
例えば、次のように記述します。
<style type=text/css>
<!--
h1 {
    color:blue;
}
p {
    background-color:skyblue;
}
-->
</style>
3番目の『別ファイルとしてスタイルシートを記述する方法』が、汎用性が高いのでよく用いられています。
次のページで、その方法を説明します。

戻る