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

メモ:

スタイルシートって

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

CSSの構造

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

p{color: blue}

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

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

HTMLにCSSを適用するには?

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

  • 外部ファイルで定義されたCSSとHTMLファイルを関連付けます。
  • HTMLのhead要素内に記述します。
  • 要素のstyle属性に記述します。

外部ファイルで定義されたCSSとHTMLファイルを関連付け

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

この方法では、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のhead要素内にスタイルを記述する方法では、HTML文書全体に対して共通のスタイルを定義できます。

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

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

要素のstyle属性に記述

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

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