このシリーズでは、すでに複数回にわたってスタイルシートについて言及されてきました。これらのスタイルシートにより、レイアウトとデザインが厳密に分離されます。HTML要素は、CSSによりWeb文書の論理的または意味論的な記述のためだけに使用されます。
最初は、スタイルシートが実際にどのように見えるかを知っていると役立つことが経験的に分かります。最初の例を見てみましょう。
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>ブラウザでの表示例:
HTMLファイルの body 部分には、次の2つの要素が定義されています。
• 見出し
• テキスト段落
これら2つの要素はCSSによってフォーマットされます。この目的のために、head 部分で style を使用してスタイルシートの領域を定義します。この領域内で要素のフォーマットが行われます。
以下は、見出し h1 の定義です:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
表示された構文では、次の2つのことが決定されます:
• フォントファミリーが指定されます。
• フォントサイズが定義されます。
ここで最初に注意するべきことは、使用される構文に一般的に焦点を当てることです。基本的に、すべてのCSSステートメントは2つの部分、セレクターとCSS宣言、で構成されます。セレクターには、フォーマットする要素が指定されます。フォーマットの詳細はCSS宣言で決定されます。セレクターは常に左に配置され、CSS宣言は右に{}括弧で括られます。
CSS宣言自体は、プロパティと値で構成され、コロンで区切られ、値の後にセミコロンが続きます。
Selektor {
Eigenschaft: Wert;
}スタイルシートの組み込み
Webページにスタイルシートを組み込むためにはさまざまな方法があります。まず、スタイル指示をHTMLタグに直接割り当てることができます。例:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
この例では、見出しは青色で表示されます。
HTMLタグには複数のスタイル指示を追加することもできます。
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
これらをシンプルに記述するには、セミコロンで区切り、連続して記述してください。
通常、これらのインラインスタイルは、ページ内の個々の区域を個別にフォーマットする必要がある場合にのみ有用です。一般的には、HTMLコードが見づらくなるため、この種の直接的なフォーマット方法を避けるべきです。
head部での中心的定義
HTMLファイルのヘッダ部内に中央のスタイルシートを定義することができます。この中で、ファイル全体に適用されるすべてのスタイルが定義されます。
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
この方法の利点は、インラインバリアントとは異なり、定義されたフォーマットを文書内で複数回使用できることです。前述の例では、CSSクラス text が定義されていました（ここで使用しているクラスなどのセレクターに関する詳しい情報は、次のチュートリアルで説明します）。このクラスは、文書内で必要に応じて何度でも使用できます。
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
この定義方法は、インラインバリアントとは異なり、変更を素早く行うことができるという利点があります。
CSSステートメントの外部化
CSS定義の最も実用的な方法は、スタイルを外部ファイルに外部化することです。これにより、任意の数のHTMLファイルが同じCSSファイルにアクセスできます。ウェブプロジェクトに属するすべてのファイルが一貫したフォーマットを持つようになり、すべてのページに影響する変更を簡単に行うことができます。
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTMLファイルのヘッダには、link 要素が定義されます。 link 内部では、最初に rel="stylesheet" 属性値組み合わせを指定します。その後、 type="text/css" を続けます。 href 属性には、該当するCSSファイルが割り当てられます。ここで注意することは、画像を組み込む場合と同様に、正しいパスが指定されていることです。この例では、CSSファイル styles.css が css ディレクトリに置かれており、そのディレクトリが実際のHTMLファイルと同じ階層にあると仮定しています。
参照されるCSSファイルは、拡張子がcssの通常のテキストファイルです。外部CSSファイルでは、該当するCSSステートメントが定義されます。
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
gezeigten link-Varianteとしての代替方法として、スタイルシートをインポートする方法もあります。こちらもCSS命令は外部ファイルにあるため、次の構文を使用します：
<style type="text/css">
@import url("css/styles.css");
</style>
括弧内にはインポートするCSSファイルへのパスを指定します。なお、@importはCSSの構文です。そのため、@import命令はCSSファイル内でも使用できます。これにより、スタイルシートから他のスタイルシートを呼び出すことが可能になり、スタイルシートの整理が容易になります。
いま問題となるのは、linkと@importのどちらを使用すべきかです。基本的に、私はlinkを好んでいます。なぜなら、この方法の方がシンプルで、ページのパフォーマンスが向上するからです。
メディア固有のスタイルシート
印刷機や画面など、さまざまなメディア用にスタイルシートを定義することができます。そのためにmedia属性が使用されます。また、1つのスタイルシートを複数のメディアに割り当てることもできます。
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
ここでは、画面用と印刷用の2つのスタイルシートが呼び出され、druck.cssはブラウザの印刷機能が呼び出された場合に読み込まれます。以下のmedia値が利用可能です：
• all – すべての出力メディアに適用されます。
• aural – スピーチ出力システムで使用されるCSSファイルです。
• braille – 触感フィードバック付き点字プリンター向けのCSSファイルで、視覚障害者用文字盤を生成できます。
• embossed – 点字プリンターを対象とします。
• handheld – ハンドヘルドデバイス向けです。
• print – 紙に出力するためのCSSファイルで、ブラウザは印刷機能が呼び出された時に自動的にこのファイルを参照すべきです。
• projection – プロジェクション用に設定されています。
• screen – 画面表示用です。
• tty – 固定されたグリッドを使用するメディアに適用されるCSSファイルで、テレタイプライターや端末などに該当します。
• tv – テレビのようなデバイスを対象とします。デバイスは低解像度で、スクロールが制限されていると想定されます。
link要素を介したHTML構文に加えて、特定のCSSバリエーションもあります。@importまたは@mediaが使用されます。
<style type="text/css">
@media screen, projection {
/* Formate für Bildschirm */
}
@media print {
/* Formate für den Druck */
}
</style>
style要素内で、@mediaを使用して特定の出力メディア向けの書式定義領域を定義します。ここで、@mediaの後に、スペースで区切られた形で、前述のメディアタイプの1つを指定する必要があります。複数のメディアタイプは、コンマで区切って記述する必要があります。
