スタイルの作業
スタイルとは、カスケード スタイル シート (CSS) で定義されている書式設定のセットです。スタイルは、テキスト (個々の文字や段落全体)、レイヤー、テーブルなどの Web ページのコンテンツに適用できます。また Web ページ全体の本文にも適用できます。スタイルを利用すると、毎回プロパティを設定する必要がないので、プロパティや値のセットを効率よく再利用できます。
CSS カスケードのスタイルは、ローカル スタイル ルールが優先されない限り、グローバル スタイル ルールという意味で HTML 要素に適用されます。一般に、ローカル スタイル ルールの方が、一般的なスタイル ルールに優先します。たとえば、内部 CSS で定義されているスタイルは、外部 CSS で定義されているスタイルよりも優先されます。同様に、Web ページ上の 1 つの HTML 要素内部で定義されているインライン CSS は、Web ページの内部 CSS または外部 CSS 内でその同じ要素について定義されているスタイルよりも優先されます。ローカル CSS スタイル ルールで矛盾しないグローバル スタイル ルール部分は、ローカル スタイルが適用されている場合であっても HTML 要素に適用されます。
スタイルの種類
外部 CSS または内部 CSS に存在するスタイルは、クラス、要素、または ID セレクターを持つことができます。スタイルはルール セットによって定義されます。ルール セットの構成は、最初にセレクターがあり、その後に左中かっこ ({) と右中かっこ (}) で囲まれたプロパティ宣言のブロックが続きます。各スタイル タイプは、セレクターによって相互に区別されます。前にピリオド (.) の付いたセレクターはクラス ベースのスタイルを示し、前にシャープ記号 (#) の付いたセレクターは ID ベースのスタイルを示します。要素ベースのスタイルのセレクターは、HTML 要素 (H1 など) のみで構成されます。
要素セレクター
Web ページで使用する特定の HTML 要素のすべてのインスタンスのプロパティ セットを定義するには、要素セレクターを使用します。たとえば、Web ページのすべての段落 (<p> タグに囲まれたコンテンツ) の周囲に 25 ピクセルの余白を設ける場合は、p 要素をセレクターとして使用するスタイルを作成し、次のコードのように、margin プロパティの宣言を含めます。
次の例では、margin-left および margin-right プロパティをドキュメント内のすべての h2 HTML 要素に適用します。
h2 { margin-left: 25px; margin-right: 25px;}
クラス セレクター
Web ページで 1 つまたは複数のアイテムについて使用するプロパティのセットを定義するには、クラス セレクターを使用します。スタイルは、そのスタイルのルール セットを編集することによって変更できます。アイテムにスタイルを適用するたびにその変更内容が自動的にアイテムに反映されます。
次の例では、クラス introduction を宣言し、font-size および color プロパティを指定します。
.introduction {font-size: small; color: white;}
このクラスはどの HTML 要素にも割り当てることができます。
<h3 class="introduction">
特定の HTML 要素に対して CSS ルールを制限する場合は、次のとおり要素をセレクターに含めます。
p.subtext {font-style: italics; font-size: 0.8em;}
このスタイル ルールは、段落要素に対してのみ適用されます。
.gif "Note") メモ : |
|---|
1 つの HTML 要素に対して複数のクラスを割り当てることができます。 |
<p class="introduction subtext">
ID セレクター
1 つのアイテムまたは複数のアイテムのブロックについてプロパティのセットを定義し、これらのアイテムを Web ページ内の他のすべてのコンテンツと区別するには、ID セレクターを使用します。Web ページ内の 1 つの HTML 要素にスタイルを適用する場合は、ID セレクターを使用します。
#footer {background-color: #CCCCCC; margin: 15px;}
この CSS ルールは 1 つの HTML 要素に対して適用します。
<div id="footer">
インライン スタイル
Web ページ内の 1 つのアイテムまたは複数のアイテムのブロックについてプロパティ セットを定義し、そのスタイルを再利用しない場合は、インライン スタイルを使用します。Web ページの見出しセクション (内部 CSS) や外部 CSS ファイル内でプロパティが定義されている ID セレクター、要素セレクター、クラス セレクターとは異なり、インライン スタイル (またはインライン CSS) のプロパティは、スタイルを使用する HTML 要素で直接定義されます。
<p style="font-weight: bold; font-style: italic; color: #FF0000">