ホームページ 作り方
だれでもわかるホームページ講座
ホームページの作り方 教えます。
http://www.homepage-guide.com
　トップページ>>CSSの指定場所

CSSの指定場所
CSSは宣言できる場所が３種類あります。
一般的には外部ファイルを使って宣言を行います。
３種類の記述方法とは？

CSSを記述する場所には３種類あります。
　１つめの場所はHTMLタグのstyle属性に記述する方法です。この方法はそのタグで囲まれた要素のみにスタイルを適用したい場合に使います。style属性は汎用的な属性なので、ほぼすべてのHTMLタグに記述することが可能です。


２つめはHTML文書のヘッダー部( <head>〜</head> )にstyle要素を記述する方法です。
　この方法の場合そのHTML文書全体にスタイルを適用することができます。どの部分にスタイルを適用するかは後述するセレクタという指定方法を使います。


３つめは拡張子.cssの外部ファイルを使う方法です。
　テキストファイルにスタイルを指定する文※1を書いておき、拡張子を.CSSで保存します。HTML文書からはその外部ファイルにリンクさせる文を記述し参照することによって、スタイルを適用します。※

※１　HTML文書の<head>要素内に
<link rel="stylesheet" href="○○○.css" type="text/css">を追加する事で外部CSSファイルの参照が出来るようになります。


　この３つの指定方法の中で３番目の外部ファイルの方法は、HTML文書からデザインに関する部分を外部ファイルに分離することでソースコードの見通しがよくなる、複数のHTML文書から１つの同じCSSファイルを参照させることができ管理が容易になる、などのメリットがあり最もポピュラーな指定方法となっています。
　以上３種類の指定方法を併用してCSSによるWEBページのデザインを作り上げていくわけです。
スタイルの継承

　記述方法が複数あるため一つの要素に対して異なる場所でスタイルシートの宣言ができるということになります。
　この時指定したスタイル同士は加算されていきます。 例えば外部ファイルでH3タグに背景色"green" 、styleタグでH3タグに文字サイズ"太字　16px" 、h3タグのstyle属性で文字色"yellow"を指定したとしましょう。 この時表示はどうなると思いますか？ 出力結果は下のとおりです。

スタイルの継承

見ての通り設定したすべてのスタイルが積み重なって表示されてます。 このようにスタイルというのは設定したものが加算されていくという特徴を持っています。
スタイルの優先度

　では１つの要素に同じプロパティで異なる値のスタイルが設定されている場合、どのように表示されるでしょう。 例えばヘッダー部の<style>要素でh4タグの文字色を"green"と指定し、h4タグのstyle属性に文字色"red"と指定した場合文字色のスタイルが二重で設定されています。 このような場合スタイルの記述場所によって優先される設定が決定されます。

スタイルの優先度

　優先度は外部ファイル、<style>要素を使った記述、タグ内のstyle属性への記述、の順番で高くなります。 上記の場合<style>要素に設定した緑より、style属性に設定した赤のほうが優先度が高いため、文字色には赤が適用されています。
　※例外として宣言の後に!important句をつけると、そのスタイルの指定は優先度に関係なく最も優先される設定となります。

入門編

HTML編

CSS編
CopyRight(C) 2009- 「ホームページの作り方 教えます。」 All right reserved.