TOPページ > カテゴリ別表示 : css スタイルシート講座

本文開始▼

css スタイルシート講座 アーカイブ

2006年11月05日

CSS講座 step:002 読み込み方と記述方法

CSSを使うにはいくつか方法があるのですが、外部ファイルとして扱う方法が一番です。

なぜ外部ファイルとして扱うのが一番かというと、複数のHTMLファイルで一つのスタイルシートを共有できるからです。

スタイルシートを共有すると、一つのスタイルシートを変更するだけで、読み込み元のHTMLファイル全てのデザインの変更できるので、数十、数百ページある大規模なサイトなどでは、その効果が実感できるかと思います。また、CSSファイルがキャッシュに残るので同じスタイルを何度も読み込む手間が省けます。

外部スタイルシートを読み込むにはHTMLの<head></head>内に以下のタグを埋め込むだけです。

<link rel="stylesheet" type="text/css" href="css/sample.css" />


この一行だけで完了です。
ちなみにこれは「css」フォルダ内の[sample.css]ファイルを読み込む場合です。

これだけでは読み込めたか分からないので、実際にスタイルを指定してみます。CSSファイルに下記のコードを書き込んでみてください。


@charset "shift_jis";

body{
     background-color:#0000FF;
}

背景が青くなっていれば読み込み成功です。

@charset "shift_jis";」は必ず1行目に書きます。これは使用する文字コードを宣言するもので、これを指定せずに日本語を使用すると、文字化けが起こるので注意!!
ちなみに「body{background-color:#0000FF;}」はbody要素に背景色を指定しています。

次回は、スタイルシート構文についてです。(おそらく。

CSS講座 step:001 CSSとは?

CSSはカスケーディングスタイルシートの略で、(X)HTML文書の見栄えを指定する技術のことです。(CSSは(X)HTMLをある程度知らないと理解できないと思うので、まずは(X)HTML講座を読んでみてください。)

CSSは便利ですが使用するブラウザによって、対応状況が異なるので、様々なブラウザに対する知識が必要になります。
表示の安定性を重視する場合、ハイブリッドレイアウト(大まかなレイアウトのみ、HTMLのテーブルを利用するテクニック)にすることもありますが、基本的にデザインは全てCSSで行う必要があります(デザインと文書の分離)。

CSSを効率よく使用するには、構造化されたHTML文書が必要不可欠です。

次回は、CSSファイルの読み込み方と記述方法です。(予定。

本文終了▲