3．スタイルシートを設定する

３．スタイルシートを設定する

HTML文書に対してスタイルシートを設定する方法には、3通りの方法があります。状況に応じて設定方法を使い分けるようにしましょう｡

【CSSの記述場所】
１、HTMLファイル内のタグに直接記述する方法
２、HTMLファイル内のヘッダーに記述する方法
３、HTMLとは別にCSSファイルを適用する方法

が、あります。

一般的には、上記３の「HTMLとは別にCSSファイルを適用する方法」がよく使われておりますので、
ここでは、外部からスタイルシートを読む込む方法 について説明致します。

外部スタイルシートを読み込む

スタイルシートをHTML文書とは別に用意して、これを外部ファイルとして読み込みます。同じスタイルシートを複数のページ|こ適用したい場合に使利な万法です。

まず、スタイルのみを記述したテキストファイルを用意して「CSS」という拡張子をつけて保存します。このファイルを、HTML文書の<head>～</head>の間でlink要素を用いて指定します。

ヘッダー内にこのように記述した場合、HTML文書と同じフォルダ内にある「style.css」という外部スタイルシートが読み込まれることになります。

link要素を複数指定して、複数の外部スタイルシートを読み込むこともできます。

cssの指定の振り分け

このようにひとつの外部スタイルシートを、複数のHTML文書に適用できます。
また、ひとつのHTML文書に複数の外部スタイルシートを適用できます。

@import
CSSでは「@import」を使って、スタイルシート内に外部ファイルとして用意したスタイルシートを読み込むことができます。
@import文は、そのスタイルシートの先頭に記述します。

記述の仕方の図解

XHTMLへの対応

HTMLの後継規格とされるXHTMLにおいても、CSSを用いてスタイルの指定を行います。

HTMLで適用する場合との違いは、セレクタの要素名や属性名が小文字で統一される点です。

また、HTMLでは終了タグを持たない<br>などのタグについて、<br/><br />というように記述します。
このため、文書に外部スタイルシートを読み込む場合は、以下のようになるのです

CSSの文字コードの指定

スタイルシートを別ファイルに分けて記述する場合､そのファイルの先頭で｢@charset "shift_jis";」のように文字コードを明示しておいたほうがよいです。
ソース内に日本語を一切含んでいない場合でも、あとから日本語のコメントを入れるかもしれないし、将来的に日本語のフォント指定を追加する可能性もあるからです。

CSSでの文字コードの指定例
実際の文字コードに合わせて、「shift_jis」の部分を「euc-jp」や「utf-8」に変更して使用します。

必ず先頭部分で指定する必要がありますので、注意しましょう。

@charset "shift_jis";

<< PAGE TOP >>

CSSの基本