2006年11月04日

CSSの記述方法1

CSSをHTMLファイルに反映させるには3種類の方法があります。

1.HTMLファイルに直接CSSを書き込む方法→2種類
2.CSSを外部ファイルとしてHTMLファイルにリンクさせる方法

まずCSSをHTMLファイルの「head」の部分に、書き込む方法です。

<!--この間に記述する--> ←これを「コメントアウト」と言います。

このコメントアウトしたCSSをHTMLファイルの<head>の中に記述します。

例えば

<style type='text/css'>
<!--
p{
padding-left:20px;
}
-->
</style>

これで<body>の中の<p>タグに対して、padding(余白)を20px取ることになります。
この方法で記述した場合、<body>の中の<p>タグすべてに有効になります。
しかし<p>タグに個別に違う設定をしたくても出来ません。

もう一つの内部の書き方は、<body>タグの<p>タグ内に直接記述する方法です。

<p class="padding-left:20px;">と記述します。
この方法で記述する場合は、<p>タグごとにすべて記述しなければいけません。
しかし<p>タグに個別に違う設定をしたい場合はこの方法を使います。

どちらの方法もHTMLファイルに直接書き込むわけですから、ページ内容が多くなれば当然HTMLファイルの内容が長くなる……と言うのは想像できますね。
そうすると、あとでデザインを変えたくなった時ソースを探すのに大変苦労します。

そういう訳で、「CSSファイルを外部ファイルとして独立させ、HTMLファイルの<head>部分にリンクする」と言う方法を使って、この講座を進めていきたいと思います。



posted by ひろりん at 20:24 | Comment(0) | CSSの基礎

2006年11月05日

CSSの記述方法2

このブログでは、後々のレイアウト変更などを考えると、CSSは「外部スタイルシート」にまとめて記述した方が楽なのでこの方法を使用して説明していきます。

METAタグでスタイルシート使用の宣言をHTMLファイルのHEADタグ内に記述します。

スタイルシート使用の宣言
<head>
<meta http-equiv='Content-Style-Type' content='text/css'>
</head>

次に、RELタグHREF属性に、外部スタイルシートへのパス(絶対or相対パス)を指定します。

外部スタイルシートの読み込み
<ink rel='stylesheet' href='./path/スタイルシート名.css'>

以下が完成です。

<head>
<meta http-equiv='Content-Style-Type' content='text/css'>
<link rel='stylesheet' href='./path/スタイルシート名.css'>
</head>

これで、HTMLファイルの準備ができました。



posted by ひろりん at 16:37 | Comment(1) | TrackBack(0) | CSSの基礎

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。