033.1 レッスン 1

Certificate:

Web開発の要点

Version:

1.0

Topic:

033 CSSコンテンツスタイリング

Objective:

033.1 CSSの基本

Lesson:

1 of 1

はじめに

すべてのWebブラウザは、実用的でわかりやすいデフォルトの表示ルールを使ってHTMLページをレンダリングしますが、視覚的には魅力的ではありません。HTMLはそれ自体、最新のユーザー・エクスペリエンス・コンセプトに基づいて精巧なページを書くための機能をほとんど備えていません。簡単なHTMLページを書いた後で、インターネット上にあるデザイン性の高いページと比較して、見苦しいことに気付いたでしょう。これは、現代のHTMLでは、文書内の要素の構造や機能を表すマークアップコード（つまり、 セマンティックコンテンツ ）と、要素の見た目を定義するルール（ プレゼンテーション ）が別々になっているためです。プレゼンテーションのルールは、 Cascading Style Sheets （CSS）という別の言語で書かれています。CSSは、フォントや色、ページ内の要素の配置など、ドキュメントのほぼすべての視覚的側面を変更することができます。

HTML文書は、ほとんどの場合、PDFファイルのように固定されたレイアウトで表示されることを意図していません。むしろ、HTMLベースのWebページは、さまざまな画面サイズで表示されたり、印刷されたりすることもあるでしょう。CSSは、Webページを開くデバイスやアプリケーションに合わせて、意図した通りに表示されるように調整可能なオプションを提供します。

スタイルの適用

HTML文書にCSSを含めるには、要素のタグに直接記述する方法、ページのソースコードの別セクションに記述する方法、HTMLページから参照される外部ファイルに記述する方法などがあります。

`style` 属性

特定の要素のスタイルを変更する最も簡単な方法は、 style 属性を使って要素タグに直接記述することです。目に見えるすべてのHTML要素は、 style 属性を持つことができ、その値は1つまたは複数のCSSルール（ プロパティ としても知られています）となります。まず、簡単な例として、パラグラフ要素から始めましょう。

<p>My stylized paragraph</p>

カスタマイズされたCSSプロパティの基本的な構文は、 プロパティ: 値 で、 プロパティ は要素で変更したい特定の側面で、 値 はブラウザで作られたデフォルトのオプションの代替を定義します。プロパティには、すべての要素に適用されるものと、特定の要素にのみ適用されるものがあります。同様に、各プロパティで使用する適切な値があります。

例えば、無地の段落の色を変えるには、 color プロパティを使います。 color プロパティは、 前景色 、つまり、段落の文字の色を指します。色自体はルールの値の部分に入り、 red 、 green 、 blue 、 yellow などの単純な名前を含め、さまざまな形式で指定することができます。したがって、段落の文字を purple にするには、カスタマイズされたプロパティ color: purple を要素の style 属性に追加します。

<p style="color: purple">My first stylized paragraph</p>

他のカスタマイズされたプロパティは、同じ style プロパティに入れることができますが、セミコロン（;）で区切る必要があります。例えば、フォントサイズを大きくしたい場合には、 style プロパティに ; font-size: larger を追加します。

<p style="color: purple; font-size: larger">My first stylized paragraph</p>

Note	コロン（:）やセミコロン（;）の周りにスペース（␣）を入れる必要はありませんが、CSSコードを読みやすくすることができます。

これらの変更の結果を確認するために、以下のHTMLをファイルに保存し、Webブラウザで開いてみてください (結果は Figure 1 に表示されています)。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS Basics</title>
</head>
<body>

<p style="color: purple; font-size: larger">My first stylized paragraph</p>

<p style="color: green; font-size: larger">My second stylized paragraph</p>

</body>
</html>

Figure 1. CSSを使った非常にシンプルなビジュアル変更です。

ページ内のすべての要素は、CSSで操作可能な幾何学的特性や装飾を持つ長方形や箱と考えることができます。レンダリングの仕組みでは、要素の配置に2つの基本的な標準概念を用いています。それが ブロック 配置と インライン 配置です。ブロック要素は、親要素の水平方向のすべてのスペースを占め、上から下へと順に配置されます。ブロック要素の高さ（ 垂直方向の寸法 、ページ内の 最上位の 位置と混同しないように）は、一般的にコンテンツの量に依存します。インライン要素は、西洋の文字言語のような左から右への方法に従っています。要素は、左から右へと水平に配置され、右側のスペースがなくなると、現在の行のすぐ下にある新しい行に要素が続きます。デフォルトでは、 p 、 div 、 section などの要素はブロックとして配置され、 span 、 em 、 a 、一文字などの要素はインラインで配置されます。これらの基本的な配置方法は、CSSルールによって根本的に変更することができます。

サンプルHTMLドキュメントのボディにある p 要素に対応する矩形は、ルールに background-color プロパティを追加すると表示されます (Figure 2):

<p style="color: purple; font-size: larger; background-color: silver">My first stylized paragraph</p>

<p style="color: green; font-size: larger; background-color: silver">My second stylized paragraph</p>

Figure 2. 段落に対応する四角形。

style 属性に新しいCSSカスタマイズプロパティを追加していくと、コード全体が乱雑になっていくことに気づくでしょう。 style 属性にあまりにも多くのCSSルールを記述すると、構造（HTML）と表示（CSS）の分離が損なわれてしまいます。さらに、多くのスタイルは異なる要素間で共有されており、すべての要素で繰り返すのは賢明ではないことにすぐに気づくでしょう。

CSSルール

要素の style 属性で直接スタイルを指定するよりも、カスタムスタイルを適用する要素のコレクション全体をブラウザに伝える方がはるかに実用的です。そのためには、カスタマイズされたプロパティに セレクタ を追加して、タイプ、クラス、ユニークID、相対的な位置などで要素をマッチングさせます。 セレクタ と、それに対応するカスタマイズされたプロパティ（ declarations とも呼ばれます）の組み合わせを、 CSSルール と呼びます。CSSルールの基本的な構文は、 セレクタ { プロパティ: 値 } です。 style 属性と同様に、セミコロンで区切られたプロパティは、 p { color: purple; font-size: larger } のようにグループ化することができます。このルールは、ページ内のすべての p 要素にマッチして、カスタマイズされた color と font-size プロパティを適用します。親要素に対するCSSルールは、その子要素すべてに自動的にマッチします。つまり、 body セレクタを代わりに使えば、 <p> タグの中か外かに関わらず、ページ内のすべてのテキストにカスタマイズされたプロパティを適用することができるのです。 body { color: purple; font-size: larger } となります。この方法を使えば、すべての子要素に対して同じルールを書き直す必要はありませんが、 “undo” するために追加のルールを書いたり、継承したルールを修正したりする必要があるかもしれません。

`style` タグ

<style> タグは、スタイルを設定したいHTMLページの内部にCSSルールを記述することができます。これにより、ブラウザはCSSのコードをHTMLのコードと区別することができます。 <style> タグは、ドキュメントの head セクションに記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>CSS Basics</title>

  <style type="text/css">

  p { color: purple; font-size: larger }

  </style>

</head>
<body>

<p>My first stylized paragraph</p>

<p>My second stylized paragraph</p>

</body>
</html>

type 属性は、 <style> タグの中にあるコンテンツの種類、つまりその MIMEタイプ をブラウザに伝えます。CSSをサポートするすべてのブラウザは、 <style> タグのタイプがデフォルトで text/css であることを想定しているので、 type 属性を含めることはオプションです。また、 media 属性は、 <style> タグ内のCSSルールを適用するメディア（コンピュータの画面や印刷など）を示します。デフォルトでは、ドキュメントがレンダリングされるあらゆるメディアにCSSルールが適用されます。

HTMLコードと同様に、改行やコードのインデントを行っても、CSSのルールがブラウザでどのように解釈されるかは変わりません。

<style type="text/css">

p { color: purple; font-size: larger }

</style>

上記は下記と全く同じ結果になります。

<style type="text/css">

p {
  color: purple;
  font-size: larger;
}

</style>

スペースや改行によって使用される余分なバイトは、ドキュメントの最終的なサイズにほとんど影響を与えず、ページの読み込み時間にも大きな影響を与えないため、レイアウトの選択は好みの問題となります。

CSSルールの最後の宣言（ font-size: larger; ）の後にあるセミコロンに注目してください。このセミコロンは必須ではありませんが、セミコロンがあることで、次の行に別の宣言を追加する際に、セミコロンの欠落を心配することなく簡単に追加することができます。

宣言を別の行にすることで、宣言をコメントアウトする必要がある場合にも役立ちます。例えば、トラブルシューティングのために一時的に宣言を無効にしたい場合には、該当する行を /* や */ で囲むことができます。

p {
  color: purple;
  /*
  font-size: larger;
  */
}

または：

p {
  color: purple;
  /* font-size: larger; */
}

このように書くと、font-size: larger 宣言がブラウザに無視されてしまいます。コメントを適切に開閉しないと、ブラウザがルールを解釈できない可能性があるので注意してください。

コメントは、ルールに関する注意事項を書くのにも便利です。

/* Texts inside <p> are purple and larger */
p {
  color: purple;
  font-size: larger;
}

例のようなリマインダーは、少数のルールを含むスタイルシートでは消耗品ですが、数百（またはそれ以上）のルールを含むスタイルシートをナビゲートするためには不可欠です。

style 属性や <style> タグは、カスタムスタイルをテストするのに十分で、特定の状況では有用ですが、一般的には使用されません。その代わり、CSSのルールは通常、HTML文書から参照できる別のファイルに保存されます。

外部ファイルのCSS

CSSの定義をHTML文書に関連付けるための好ましい方法は、CSSを別のファイルに格納することです。この方法は、これまでの方法に比べて主に2つの利点があります。

同じスタイリングルールを異なるドキュメント間で共有することができます。
CSSファイルは、通常、ブラウザにキャッシュされ、将来の読み込み時間を改善します。

CSSファイルの拡張子は .css で、HTMLファイルと同様に、プレーンテキストエディタで編集することができます。HTMLファイルとは異なり、CSSファイルは、 <head> や <body> などの階層タグで構築されたトップレベルの構造を持ちません。むしろ、CSSファイルは、ブラウザによって順番に処理されるルールのリストに過ぎません。 <style> タグ内に書かれた同じルールは、代わりにCSSファイルに書くことができます。

HTML文書とファイルに格納されたCSSルールの関連付けは、HTML文書の中だけで定義されます。CSSファイルにとっては、そのルールに合致する要素が存在するかどうかは問題ではありませんので、リンク先のHTML文書をCSSファイルに列挙する必要はありません。HTML側では、リンクされたすべてのスタイルシートが、あたかも <style> タグにルールが書かれているかのように、ドキュメントに適用されます。

<link> HTMLタグは、現在のドキュメントで使用される外部スタイルシートを定義し、HTMLドキュメントの head セクションに記述します。

<head>
  <meta charset="utf-8" />
  <title>CSS Basics</title>

  <link href="style.css" rel="stylesheet">

</head>

これで、前に使った p 要素のルールを style.css ファイルに配置すれば、Webページを訪れた人が見る結果は同じになります。CSSファイルがHTML文書と同じディレクトリにない場合は、 href 属性でその相対パスまたはフルパスを指定します。 <link> タグは様々な種類の外部リソースを参照することができるので、外部リソースが現在のドキュメントとどのような関係にあるかを確立することが重要です。外部のCSSファイルの場合、その関係は rel="stylesheet" で定義されます。

media 属性は、 <style> タグと同じように使うことができます。コンピュータの画面や印刷など、外部ファイルのルールを適用すべきメディアを示します。

CSSは要素を完全に変更することができますが、それでもページの構成要素に適切な要素を使用することが重要です。そうしないと、スクリーンリーダーなどの支援技術が、ページの正しいセクションを識別できない可能性があります。

演習

CSSを使ってHTML要素の外観を変更するには、どのような方法がありますか。
同じ外観を持つ兄弟段落がある場合、 <p> タグの style 属性を使用することが推奨されないのはなぜですか？
div 要素を配置する際のデフォルトの配置ポリシーは何ですか？
<link> タグのどの属性が外部CSSファイルの位置を示しますか？
HTMLドキュメントの中で link 要素を挿入するのに適した箇所はどこですか？

発展演習

通常の文章中の単語を識別するために <div> タグを使用することが推奨されないのはなぜですか？
もし、CSSファイルの途中でコメントを /* で始めて、 */ で閉じるのを忘れたらどうなりますか？
ドキュメントのすべての em 要素にアンダーラインを引くCSSルールを作成してください。
<style> や <link> タグのスタイルシートが、音声合成装置でのみ使用されるべきであることを示すにはどうしたらよいでしょうか？

まとめ

このレッスンでは、CSSの基本的な概念と、HTMLとの統合方法について説明しました。CSSスタイルシートに書かれたルールは、HTML文書の外観を変更するための標準的な方法です。CSSを使うことで、セマンティックコンテンツをプレゼンテーションの方針から切り離すことができます。このレッスンでは、以下の概念と手順を説明しました。

style 属性を使ってCSSプロパティを変更する方法。
基本的なCSSルールの構文。
<style> タグを使ってドキュメントにCSSルールを埋め込む方法。
<link> タグを使って、外部のスタイルシートをドキュメントに組み込む方法。

演習の回答

CSSを使ってHTML要素の外観を変更するには、どのような方法がありますか。

基本的な方法は3つあります。要素のタグ内に直接記述する方法、ページのソースコード内の別セクションに記述する方法、HTMLページが参照する外部ファイルに記述する方法です。
同じ外観を持つ兄弟段落がある場合、 <p> タグの style 属性を使用することが推奨されないのはなぜですか？

CSS宣言は、他の <p> タグにも複製する必要があり、時間がかかり、ファイルサイズも大きくなり、エラーも発生しやすくなるためです。
div 要素を配置する際のデフォルトの配置ポリシーは何ですか？

div 要素は、デフォルトではブロック要素として扱われるため、親要素の水平方向のスペースをすべて占め、その高さはコンテンツに依存します。
<link> タグのどの属性が外部CSSファイルの位置を示しますか？

href 属性。
HTMLドキュメントの中で link 要素を挿入するのに適した箇所はどこですか？

link 要素は、HTMLドキュメントの head セクションになければなりません。

発展演習の回答

通常の文章中の単語を識別するために <div> タグを使用することが推奨されないのはなぜですか？

<div> タグは、ドキュメントの2つの異なるセクションを意味的に分離するものですが、インラインテキスト要素に使用されるとアクセシビリティツールの妨げになります。
もし、CSSファイルの途中でコメントを /* で始めて、 */ で閉じるのを忘れたらどうなりますか？

このコメント以降のルールはすべてブラウザで無視されます。
ドキュメントのすべての em 要素にアンダーラインを引くCSSルールを作成してください。

em { text-decoration: underline }

または

em { text-decoration-line: underline }
<style> や <link> タグのスタイルシートが、音声合成装置でのみ使用されるべきであることを示すにはどうしたらよいでしょうか？

その media 属性の値は speech でなければなりません。