Ks-Product.com

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要素に背景色を指定しています。

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

コメント(0)

コメントが存在しません。

コメントを投稿する

※投稿されたコメントは管理人が承認するまで反映されません。
またHTMLタグはご利用できません。コメント上にHTMLタグを表示させたい場合は全角でご入力ください。

お名前
サイトURL
コメント
  • Home
  • > CSS講座 step:002 読み込み方と記述方法
名前:
kakeruニコ動twitter
職業:
neet(転職活動中)
生年月日:
1983年4月19日

Flash(ActionScript)で食っていけたらなと思う今日この頃…とりあえず、年末年始にかけて転職活動できるようにごにょごにょ…

Powered by Movable Type.

ご覧の環境ではこのコンテンツはご利用できません。
最新のFlashPlayerをダウンロードしてからご利用ください。
Get Adobe Flash player