カスケード・スタイルシート（CSS）をHTMLに組み込む
- HTMLファイルの書式設定を一箇所でまとめて定義する
- 別個のスタイルシート（CSS）・ファイルを作り、HTMLファイルの書式設定を1箇所でまとめて行う
- HTMLの要素の中で書式設定を定義する
- さまざまなアウトプット・メディアのための別途のスタイルシート
- さまざまなアウトプット・メディアのために書式設定を定義する
- スタイルシート領域の中のコメント
- どのスタイル言語を使うかはっきり指定する
HTMLファイルの書式設定を一箇所でまとめて定義する
HTMLファイルの中にスタイルシート（CSS）のための領域を作り、そこで書式を定義することができます。
例:
<head>
<title>HTMLファイルの書式設定を一箇所でまとめて定義する</title>
<style type="text/css">
<!--
/* ... ここで書式を定義する... */
-->
</style> </head>
<body>
</body>
</html>
説明:
<style...> ... </style> でスタイルシートを使った書式設定のための領域を記述します(styleスタイル、書式設定)。
開始タグ <style> の中にスタイルシート言語のMime タイプを入力します。
カスケード・スタイルシート（ＣＳＳ）の場合はtype="text/css"とします。
開始タグと閉じタグ</style>の間にスタイルシート（CSS）の書式を定義しますが、これはこの領域でまとめて行います。
この点に関してはスタイルシート（CSS）の書式設定を一箇所でまとめて行うという章を読んでください。
注意:
スタイルシートを理解しない古いWebブラウザーが、書かれたstyle要素の内容を間違ってモニターに表示するテキストだと解釈するのを防ぐために、上の例のように内容をHTMLのコメント (<!-- .. -->) の中に入れることができます。
このような方法で定義された書式はHTMLファイルに有効です。
HTMLファイルの中にいくつもstyle領域を作ることも可能です。
例えば1つのHTMLファイルの中に、たまには種類の違うスタイル言語を使って定義をし、それに適した種類の違うMimeタイプを記述するような場合です。
別個のスタイルシート（CSS）・ファイルを作り、HTMLファイルの書式設定を1箇所でまとめて行う
プロジェクトの全てのHTMLファイルのために書式を統一したいというケースが多いです。
このような場合1つ1つのファイルに毎回スタイルシートの入力を繰り返す必要はありません。
その代わりにこの書式を別個にテキストファイルを定義し、そのファイルを好きなHTMLファイルと結びつければいいのです。
この別個のファイルの入力を変更すると、このスタイルシートを指定した全てのファイルが一斉に変更されます。
例:
<head>
<title>別別個のスタイルシート（CSS）・ファイルを作り、 HTMLファイルの書式設定を1箇所でまとめて行う </title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
... ここにはこのファイル特有の書式設定を書きます ...
-->
</style>
</head>
</body>
</html>
説明:
HTMLファイルのヘッドに <link...> を使ってスタイルシート（CSS）・ファイルを指定することができます。
<link>タグの中にはrel="stylesheet" type="text/css"と書きます(rel = relation
= 関係、関連、 type = Mime-タイプ)。
属性 href= には希望のファイルを入力します(href = hyper referencハイパーテキストの指定)。
スタイルシート（CSS）・ファイルが他のディレクトリーやサーバーにおいてある場合は、その場所をパスかURI のアドレスで指定します。
画像を組み込む時などと同じ方法で行います。
指定を受けたファイルはテキスト・ファイルでなければいけません。
名前の最後は.css とします。
ファイルにはスタイルシート（CSS）の書式設定を一箇所でまとめて行うためのと
コメント以外は何も書きません。
そのようなスタイルシート（CSS）・ファイルは簡単なテキスト・エディター（メモ帳）で作ることができます。
例えばSELFHTMLで全てのファイルに別個に作られたスタイルシート（CSS）・ファイルが使われています。
スタイルシート（CSS）・ファイルはテキストとみなすことができます(このリンクは selfhtmlcss.txt という名前のファイルにジャンプします。
ブラウザーが必ず表示するようにするためには、本当はファイルの名前は selfhtml.cssになります)。
注意:
<link...>でスタイルシート（CSS）・ファイルを指定する場合は <style...> ... </style> という領域は必要ありません。
上の例ではそれでも領域が定義されています。
書式設定の定義では両方の方法を組み合わせることができるのです。
両方の方法を使用している場合で、 <style...> ... </style> の中に直接定義されている内容と別個のファイルで定義した内容が衝突することがあります。
その場合、 <style...> ... </style> で定義されている内容の方が優先されます。
例えば複数のファイルに別個のスタイルシート（CSS）から統一された内容を指定しておいて、その上でさらに個々のファイルにそのファイル特有の書式を補足したり、別個のファイルの内容を一部無効にしてその部分だけファイル特有の書式に変更するということもできます。
HTMLの要素の中で書式設定を定義する
書式設定を1箇所でまとめて行うか別個のスタイルシート（CSS）・ファイルを作ってそれを指定するかに関係なく、HTMLの要素を個別に書式設定することができます。
例:
<head>
<title>HTMLの要素の中で書式設定を定義する</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--... ここにはこのファイル特有の書式設定を書きます ... -->
</style>
</head>
<body>
<h1style="[要素特有の書式設定]">...</h1>
</body>
</html>
説明:
要素の開始タグの中で共通属性 style= を使ってスタイルシート（CSS）の書式設定を行うことができます。
その指示はこの特定の要素に有効になります。
これについての個々の説明はHTML要素を直接書式設定するという章に書かれています。
注意:
HTML要素はHTML-4.0に規定されているもので、スタイルシート（CSS）の書式設定がかけるような開始タグと閉じタグのあるものでなければなりません。
以前は開始タグだけでよかったような要素、例えば p 、 li 、 option 、 td 、 th などがこのケースにあたります。
上に挙げた例は、HTML要素の中の書式の定義と平行して1箇所にまとめた書式設定の方法も使えることを示しています。
両方の書式が対立した場合は内部の書式設定が外で行う書式設定より優先されます。
<h1> の開始タグの中に1箇所の style 領域にまとめて書いた h1 要素の書式設定とは違うフォントの種類を指定すると、 <h1> の開始タグの中の定義の方が優先されます。
同じく、この開始タグの中の定義は外部に作られて組み込まれるCSSファイルより優先されます。
さまざまなアウトプット・メディアのための別途のスタイルシート
モニターとプリンターは例えば素敵なデザインのファイルにとって、まったく違うタイプのアウトプット・メディアです。
両方のアウトプット・メディアにはそれぞれ自分のルールというものがあります。
モニターでは明るい文字を暗い背景に使うと魅力的に映ります。
しかしこれを印刷しようとすると、あまり良い組み合わせとは言えません。
印刷する場合は段落の頭を少なくとも2センチ右へずらすと見栄がいいです。
しかし同じ事をモニターで行うと、貴重なモニターの面積が無駄に使われることになってしまいます。
というわけで異なるアウトプット・メディアのために種類の違うスタイルシート（CSS）・ファイルを組み込むことができます。
そこではそれぞれ異なる書式設定が行われています。
ソフトウエアはページを表示する時に組み込まれたどのスタイルシート（CSS）・ファイルが適しているか決めなければなりません。
例えばWebブラウザーがモニターにページを表示する時はっきり「モニター」というメディアのために作られたスタイルシート（CSS）・ファイルを使います。
ユーザーがページを印刷する時にはブラウザーはその代わりに「プリンター」というメディア用だと指示してあるスタイルシート（CSS）・ファイルを使うようにします。
例:
<head>
<title>さまざまなアウトプット・メディアのための別途のスタイルシート</title><link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed" href="print.css">
<link rel="stylesheet" media="aural" href="speaker.css"> </head>
<body>
</body>
</html>
説明:
まずそれぞれのアウトプット・メディアにつき .css という拡張子のついたテキスト・ファイルが1つ必要です。
ここには希望のアウトプット・メディアのためのスタイルシート（CSS）の書式の定義だけを書きます。
HTMLファイルの中には上の例にあるようにすべてのスタイルシート（CSS）・ファイルを組み込みます。
この組み込みの方法は、別個のスタイルシート（CSS）・ファイルを作り、HTMLファイルの書式設定を1箇所でまとめて行う時と同じように機能します。
組み込むためのいくつもの <link> タグが記述されていて、ここに追加の属性 media= がついているという点だけが違います。
この属性でどのアウトプット・メディアのためにファイルが使われるかを決め、 href= という入力で組み込みます。
media= で1つ、あるいはいくつものメディアのタイプを入力することができます。
いくつも入力する時は、カンマで区切ります。
メディアのタイプ：
スタイルシート（CSS）2.0には以下の入力があります。
| 入力 | 意味 |
|---|---|
media="all" |
すべてのメディアのタイプに有効なスタイルシート（CSS）・ファイル。 |
media="aural" |
コンピューターで制御された人工的な言語の読み上げアウトプット （音声出力）に有効なスタイルシート（CSS）・ファイル。 |
media="braille" |
点字出力のできる装置に有効なスタイルシート（CSS）・ファイル。 テキストは点字を出力できるような素材で作られた、表面が変化する構造に変換されます。 指でそこをなぞるとテキストが点字として読めます。 こういう出力メディアの形式は目の不自由な人のために作られています。 |
media="embossed" |
点字をプリントするために有効なスタイルシート（CSS）・ファイル。 テキストは紙やそれに似た作りの物質の表面に打ち出され、指で触れると読めるようになっています。 braille と同じく embossed も目の不自由な人のために作られています。 |
media="handheld" |
ディスプレイの小さい携帯端末の表示に有効なスタイルシート（CSS）・ファイル。 WebにアクセスできるPDA が典型的な例です。 |
media="print" |
紙面印刷に有効なスタイルシート（CSS）・ファイル。 ユーザーがWebページを印刷したい場合Webブラウザーはこの書式設定を用います。 印刷メディアのためのスタイルシートの属性を説明した章も参照してください。 |
media="projection" |
ファイルを映写するプロジェクターや類似の装置に有効なスタイルシート（CSS）・ファイル。 |
media="screen" |
モニターの表示に有効なスタイルシート（CSS）・ファイル |
media="tty" |
テレタイプのようにフォントのピッチが固定巾で出力される、画像以外のアウトプット・メディアに有効なスタイルシート（CSS）・ファイル。 このメディ・タイプはLynxのようなテキスト系のブラウザーにも関連して来ます。 |
media="tv" |
解像度が低く、テキストのスクロールがサポートされていない、しかしサウンドがサポートされている、テレビに似た出力をする装置に有効なスタイルシート（CSS）・ファイル。 |
注意:
MSインターネット・エクスプローラはバージョン4.0以降ある程度この入力を理解します。
ネットスケープはバージョン6.0でもモニター関係の書式設定ではスタイルシートのファイルを認識します。
しかし例えばプリンターのための書式設定のスタイルシート・ファイルは無視します。
さまざまなアウトプット・メディアに関する指示を書いた別途のスタイルシート・ファイルを組み込むために
<link...> というシンタックス（書き方の規則）がありますが、これはHTMLのシンタックスです。
同じ目的のためにスタイルシート（CSS）のシンタックスもあります。
例:
<html>
<head>
<title>さまざまなアウトプット・メディアのための別途のスタイルシート</title>
<style type="text/css">
<!--
@import url(print.css) print, embossed;
@import url(pocketcomputer.css) handheld;
@import url(normal.css) screen;
-->
</style>
</head>
<body>
</body>
</html>説明:
CSS特有の組み込みはヘッドの中の style 領域に記述します。
記述は @import url でで始めます。
括弧の中にファイルの名前、あるいは別途のCSSファイルのアドレスを書きます。
ファイル名の後にスペースを1つ空け、その後に希望のアウトプット・メディアを書きます。
1つでもいいですが、複数挙げてもかまいません。
その場合はカンマで区切ります。
HTMLの属性の media= と同じメディアタイプが入力できます。
@import の入力の最後にはセミコロンをつけます。
さまざまなアウトプット・メディアのために書式設定を定義する
さまざまなアウトプット・メディアのための別途のスタイルシートをHTMLに組み込むという方法のほかに
style 領域の中でさまざまなアウトプット・メディアを区別するという方法もあります。
例:
<html>
<head>
<title>さまざまなアウトプット・メディアのために書式設定を定義する</title>
<style type="text/css">
<!--
@media print { /* ... 印刷出力用の書式の定義 ... */ }
@media screen, handheld { /* ... モニター出力用の書式の定義 ... */ }
-->
</style>
</head>
<body>
</body>
</html>説明:
@media で style 領域の中に特定のアウトプット・メディア用の書式を定義するために領域を作ります。
区別をしたいそれぞれのメディアの種類のためにそういう指示をそれぞれ記述します。
@media という指示の後にスペースを1つ置き、希望のアウトプット・メディアを書きます。
いくつものアウトプット・メディアを挙げても構いません。
その場合はカンマで区切ります。
ここで使えるアウトプット・メディアはHTMLの属性 media= と同じものです(メディアのタイプ参照)。
@media の入力が終わったらすぐ波括弧、 { と } を書きます。
この波括弧の間に書かれるすべての書式設定はすべてそのメディアに有効になります。
スタイルシート領域の中のコメント
書式の定義に自分用にコメントをつけるためにCというプログラム言語から借用した特別なシンタックス（書き方の規則）があります。
例:
p { color:blue; } /* 2001年7月9日に考え付いた青いテキストのための書式 */
-->
<style...> ...</style> の中に /* のようにスラッシュとアスタリスクを順番に書き、コメントを開始します。
コメントの最後に */
のように反対の順番で書き、コメントを終了します。
コメントは始めから終わりまで同じ行でなければいけないという規則はありません。
しかしコメントを入れ子式にすることはできません。
どのスタイル言語を使うかはっきり指定する
メタ要素を使ってHTMLの中でブラウザーにはっきりとこのファイルは特定の定義用の言語を使ったスタイルシートの定義が含まれているのだと知らせることができます。
現在の時点ではカスケード・スタイルシート（ＣＳＳ）にはこの入力は特に必要ではありません。
この入力はクライエント（例えばWebブラウザー）やWebサーバーが共通のコマンドが使えるようにし、両方のサイドが同じスタイルシートのシンタックス（書き方の規則）でファイルを解釈することができるようにするためにあります。
例:
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
HTMLファイルのヘッドの中の<meta http-equiv="Content-Style-Type" content="text/css">
このファイルの中の書式の定義にカスケード・スタイルシート（ＣＳＳ）を必ず使うと指定します。
もしカスケード・スタイルシート（ＣＳＳ）以外のスタイルシート言語を使いたい場合は、"text/css"という個所に代わりに相当する書式定義用言語のMime タイプを入力します。
CSS入門
広告