スタイルシートのきまりごと

メモ：2005-10-24 17:33:40 +0900 JST Category：html

スタイルシートって

スタイルシートとは、見せ方を定義したものを指します。一般的にHTMLとの組み合わせとして使われるスタイルシートは、CSS(Cascading Style Sheet)と呼ばれるものです。ホームページの製作では、見せ方の統一や文書構造のみのメンテナンス等さまざまなメリットがあります。

CSSは、セレクタと宣言部で構成されます。例えば、要素pの見せ方を定義する場合、以下の形式で記述します。

p{color: blue}

pは、セレクタ、{}で囲まれた範囲を宣言と言います。宣言の中には、セレクタに対するプロパティと値を記述します。プロパティと値は、:で区切って記述します。複数のプロパティを定義する場合は、セミコロン;で区切って記述します。

p{
    color:blue;
    background-color: #E7EFF0
}

HTMLにスタイルを適用するには、3つの方法があります。

外部ファイルを関連付ける方法では、複数のページに共通のスタイルを定義し統一した見せ方が定義できます。また、見せ方を変更する場合、共通のスタイルを定義したファイルを修正するだけで全てのページに反映することができる等、非常に柔軟に対応できます。

この方法では、HTML文書とは別にスタイルを定義したファイルを作成します。通常【.css】という拡張子を付けます。

body{
    background-image: url(image/bg.png);
}

HTML文書は、ヘッダにlink要素を使って外部のCSSファイルを関連付けます。

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

HTMLのhead要素内にスタイルを記述する方法では、HTML文書全体に対して共通のスタイルを定義できます。

HTML文書は、head要素内にstyle要素を配置しスタイルを定義します。

<html>
<head>
<style type="text/css">
body{
    background-image: url(image/bg.png);
}
p{
    color:blue
}
</style>
</head>

HTML文書内の個々の要素にスタイルを定義します。要素のstyle属性にスタイルを定義することで、その要素の範囲だけにスタイルを適用することができます。

<body style="background-image: url(image/bg.png)">