カスケード スタイル シートの概要
カスケード スタイル シート (CSS) を使用すると、Web ページの表示を細かく設定できます。たとえば CSS では、Web ページ上の要素の配置や要素の外観を正確に設定することができます。
Web ページに CSS を適用する場合は、外部 CSS、内部 CSS、インライン CSS の 3 つの方法があります。Web ページでは、これらのうち 1 つまたは複数の CSS を同時に使用できます。一般に、インライン CSS で定義されたスタイルは内部 CSS または外部 CSS で定義されたスタイルに優先し、内部 CSS のスタイルは外部 CSS のスタイルに優先します。
外部 CSS
Web サイト内の一部またはすべての Web ページに対して常に同じスタイルを適用する場合は、外部スタイル シートを使用します。1 つ以上の外部スタイル シートにスタイルを定義して Web ページに適用すると、Web サイト全体で一貫性のある外観を設定できます。スタイルを変更する場合は、外部 CSS を変更するだけで、そのスタイルと CSS を参照するすべての Wew ページに変更内容が自動的に反映されます。
外部 CSS は、global.css などの .css ファイル内に格納されます。外部 CSS の構文は内部 CSS と同じです。ただし、外部 CSS で定義するスタイルは <style> タグで囲みません。内部 CSS のサンプルについては、このトピックの次のセクションを参照してください。
内部 CSS
現在の Web ページのみのスタイルを定義する場合や、現在の Web ページに適用されている外部 CSS のスタイルを上書きする場合は、内部 CSS を使用します。内部 CSS は埋め込み CSS と呼ばれることもあります。
内部 CSS は、Web ページの <head> タグ内に含まれます。
内部スタイル シートの例
<style type="text/css">
.alert {
font-weight: bold;
color: #FF0000;
}
h1 {
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
#headlines {
border-color: #000000;
border-width: thin;
border-style: solid;
}
</style>
インライン CSS
カスケード スタイル シートのプロパティをページ上の個別の要素に適用する場合や、そのスタイルを再利用する必要がない場合は、インライン スタイルを使用します。インライン スタイルは、Web ページ内にある HTML 要素の開始タグ内で定義します。
インライン スタイルの例
<p style="font-weight: bold; font-style: italic; color: #FF0000">