CSSスタイルシート/HTML基礎講座

刻々と進化する World Wide Web の世界で、技術革新の中でも最大の革命となったと考えられているのがスタイルシートの導入でした。

スタイルシートを使うようになってから、Web制作にあたって、本格的なレイアウトの設計が可能になりました。フォント、色、枠線、コンテンツの余白や配置などを制御し、しかも HTMLソースが人間にとってもコンピューターにとっても分かりやすいものになっています。

HTMLで使用するスタイルシートは CSS (Cascading Style Sheet) という規格で、HTMLタグに対してどのように表示するかを指定します。

詳しくは当サイト内の CSSリファレンスをご覧ください。

■ CSSの構造

CSSは選択部（セレクタ）と宣言部で構成され、宣言部には属性（プロパティ）とそれに割り当てる値で構成されています。例えば、

 h1 { color: blue }

この設定の場合、h1 がセレクタとなり、{ } で囲まれた部分が宣言部になります。

さらに color が属性（プロパティ）で、blue という ColorName が値となります。blue の替わりに16進法の #0000ff、あるいは #00f でも構いません。プロパティと値はコロン "：" で区切ります。また、宣言部の中の属性と値は、続けて複数設定することもできます。

 body { background-color: #fff; color: #000 }

このように、セミコロン "；" で区切ることによって、複数のスタイルシーを設定することができます。

■ CSSの実装・貼り付け

Webページにスタイルシートを貼り付ける方法は３つあります。

インライン方式
エンベッド方式
外部リンク方式（リンキング方式）

◆ インライン方式

インライン方式は、実際の HTMLの要素に直接 style属性を使って設定します。

 <body style="background-image:url('images/kabe.gif')">

このスタイルシートの設定は、body要素に、 style属性を使って全体の背景に URI で指定した画像を張り込みます。直接 HTMLタグに書き込みます。テキストなどの修飾にめったに使わないときに使用します。

◆ エンベッド方式

エンベッド方式はそのWebページ全体を修飾するときに利用します。head要素の中に style要素を使って埋め込みます。このことからエンベッド (埋め込み) 方式といわれています。エンベッド方式では、ヘッダ部に記述します。

<html>
<head>
<style>
<！--
h1 {color: blue}
-->
</style>
</head>

<body>
<h1>Blue Header</h1>
</body>
</html>

このスタイルシートの設定は、h1要素をページ内で複数使うときに、すでに埋め込んであるためにインライン方式のようにいちいち設定する必要がありません。つまり、一度設定すると、そのページにおける h1要素すべてに適用するものです。

◆ リンキング方式 (外部リンク方式)

外部リンク方式は Webページすべてに統一したスタイルシートを利用するものです。どのページでも同様のレイアウト構成を維持でき、訪問者にサイトのアイデンティティを訴求できます。

body { background-image: url(images/kabe.gif); color: #000 }
.text { font-size: 1.2em; color: #006; font-weight: bold }

このように、別途スタイルシートだけを記述した文書を作成します。なお、スタイルシート文書の拡張子は、「.css」となります。

次に、このスタイルシートを読み込むのには、HTMLのヘッダに次のように埋め込みます。

<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

このように、link要素を使って、外部のスタイルシートを Webページに読み込ませます。これによって、読み込まれたスタイルシートが、その HTML文書に適用されます。

初版公開日 2002年5月1日最新更新日 2004年2月18日

■ カスケーディングスタイルシート（Cascading Style Sheet）