スタイルシートは、外部ファイル(拡張子.css)から呼び出すことができます。

各ページ内に外部ファイルを呼び出す記述を書き、そのスタイルを適用します。
外部ファイルのスタイルを変更するだけで、サイト内のスタイルを全て変更することができ、大規模サイトの制作には欠かせないものになります。

外部ファイルの書き方は、「ページ全体に適用」の場合と全く同じです。

外部ファイルの読み込みは、HEADタグ内に必ず配置し、複数の外部ファイルを読み込むことも可能です。

このサイトも、この方法でスタイルシートを適用しています。

スタイルシート・サンプル

緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

→ サンプル

→ 外部スタイルシート・ファイル(sample_style.css)

BODY { background-color: #ffff99 }  /* 全体の背景色 */
TABLE { background-color: #0000aa } /* 表の背景色 */
TD { background-color: #ff0000 }    /* セルの背景色 */
H1 { background-color: #00ff00 }    /* 見出し(レベル１)の背景色 */

注意点など

複数の外部ファイルを読み込むことも可能ですが、その中で指定されているスタイルが競合する場合があります。
その場合は、後に読み込んだスタイルが有効になります。

← スタイルシートに戻る

eWeb