オンラインテキスト目次
Webページの作成目次

目次
スタイルシートの書式
スタイルシートの設定方式
スタイルシートの例

スタイルシート CSS

HTMLは文章の論理構造を示すだけの記述方法であり、画面上の見栄え・レイアウトとは本来無関係である。 文字を大きくするためだけに<h1>タグを使ったりしてHTMLタグを見栄えのために利用したWebページはHTMLとして誤った記述であるといえる。

スタイルシートとは、文、見出し<hn>、段落<p>、引用ブロック<blockquote>、文章グループ<div>などのHTML文書の論理的構成要素を、画面や印刷出力時にどのように表示・レイアウトするかを指定する機能である。 スタイルシート記述言語としてW3CがとりまとめているCSS(Cascading Style Sheet)が広く用いられている。

スタイルシートは論理構造と表現指定を分離することで、次のような利点をもたらす:

目次

スタイルシートの書式

CSS スタイルシートでは、

  1. スタイルを指定する論理構成要素を選びだし(セレクタ
  2. それに対するスタイル属性とその属性値を設定する
というように、次の書式に従う:

セレクタ {属性1: 値1; 属性2: 値2; ....}

セレクタは、下のスタイルシートの例にあるように、

のどれかである。 HTMLのDTDで定義されていなないタグをスタイルシートとして新たに定義できるかはWebブラウザに依存するので非推奨である。

目次

スタイルシートの設定方式

あるHTMLファイルに次のようなスタイルシートによるスタイルを適用したい:

セレクタa {属性a1: 値a1; 属性a2: 値a2; ....}
セレクタb {属性b1: 値b1; 属性b2: 値b2; ....}
....
このためのスタイルシートの設定には次の3つの方式がある。

外部スタイルファイルを読み込む方式
スタイルシートの設定を行ったスタイルファイルを別途用意しておいて、HTMLファイルのヘッダ<head>と</head>内でこれを読み込む方式である。 1つのスタイルファイルで、HTML全体のスタイルを制御して統一的な効果を出す場合に適した方式である。

<head>
<link rel="stylesheet" href="スタイルファイルのURL">
</head>

別に用意したスタイルファイル(拡張子は.css)には次のようにスタイルを記述しておく。

セレクタa {属性a1: 値a1; 属性a2: 値a2; ....}
セレクタb {属性b1: 値b1; 属性b2: 値b2; ....}
....

HTMLファイル内でまとめて設定する方式
HTMLファイルのヘッダ<head>と</head>内で適用したいスタイルシートを次のように記述する。 ページごとのスタイル設定を行うには都合がよい。

<head>
<style type="text/css">
セレクタa {属性a1: 値a1; 属性a2: 値a2; ....}
セレクタb {属性b1: 値b1; 属性b2: 値b2; ....}
....
</style>
</head>

インラインで設定する方式
スタイルを指定したい論理要素タグに直接スタイルを記述する方式で、本文<body>...</body>内で次のように書く。 優先度が最も高いので、特定の個所についてのスタイルを変更する場合に便利である。

<body>
....
<セレクタa style="属性a1: 値a1; 属性a2: 値a2; ....">
..
<セレクタb style="属性b1: 値b1; 属性b2: 値b2; ....">
....
</body>

目次

スタイルシートの例

スタイルシートをHTMLファイル内でまとめて設定する方式のHTML例を次に示す。

stringのようにHTMLのDTDで定義されていないような要素タグをスタイルシートで新たにタグとして宣言して利用することができるかどうかはWebブラウザに依存するので非推奨
Netscape 6.0ではこうしてタグ名を新たに定義できるが、Netscape4.7xやIE5.xでは無効である。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head> 
<title>情報太郎のページ</title>
<meta http-equiv="Content-Type" content="text/html">
<meta name="author" content="Joho Taro">
<style type="text/css">
h1 {font-size: 14pt; background-color: aqua}
h2 {font-size: 12pt; background-color: green}
h1.blue {font-size: 14pt; color: blue}
span.red {color: red}
</style>
</head> 
<body>
....
<h1>サイズ14ptでaqua色の背景</h1>
....
<h2>サイズ12ptでgreen色の背景</h2>
....
<h1 class="blue">サイズ14ptのblue色の文字</h1>
......
<span class="red">赤い文字列</span>
.......
</body>
</html>

この例では、<h1>が使われる見出しでは14ポイントの文字サイズで背景色がAqua色で表示され、 <h2>が使われる見出しでは12ポイントの文字サイズで背景色がgreen色で表示されるスタイルを指定している。 ただし、<h1>の見出しタグでも、<h1 class="blue">クラス属性を指定している場合には、14ポイントでblue色のフォントが使われるようにスタイルを指定している。


Webページの作成目次
オンラインテキスト目次

mizutani@rsch.tuis.ac.jp