※本ページではアフィリエイトリンク(PR)が含まれています※

CSS入門

1章.CSSの反映方法

  /

この記事ではCSSの反映方法について説明します。

目次
  1. CSSをHTMLに反映するための方法
  2. CSSの書き方

CSSをHTMLに反映するための方法

CSSを反映する方法は複数存在します。

<head>タグ内でスタイルシートを読み込む

<head>タグ内で、「.css」で作成したスタイルシートを読み込むことによりCSSを利用することが可能です。

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

<head>タグ内でスタイルを定義する

<head>タグ内で、直接スタイルを定義して利用することもできます。

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

HTMLのstyle属性にスタイルを定義する

HTMLで使用するタグの属性にスタイルを設定することが可能です。

<h1 style="text-align: center;">見出し</h2>
 
<p style="color: red; font-size: 20px;">本文本文本文</p>

CSSの書き方

CSSの反映方法としてHTMLとCSSのスタイルシートは分けて作成し、一つのスタイルシートを複数のHTMLで利用できるようにしておくのが一般的です。

そのため、今回はスタイルシートに対しどのようにしてCSSを書いていくのか説明します。

HTMLのclass属性やid属性を指定して反映

HTMLのclass属性やid属性を指定してスタイルを反映させることが可能です。

以下のファイルを同一ディレクトリに作成して、htmlファイルをブラウザに表示してみましょう。

<!DOCTYPE html>
<html>
<head>
<title>test Page</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="testdlass">テストテストテストテストテスト</p>
    <p id="idtest">テストテストテストテストテスト</p>
</body>
</html>
/* HTMLで「class="testdlass"」と書いたものに反映されるスタイル */
.testdlass {
    color: red;
}
 
/* HTMLで「id="idtest"」と書いたものに反映されるスタイル */
#idtest {
    color:blue;
}
実行結果

複数のHTMLタグを一括でスタイル反映

複数のHTMLタグをまとめて指定し、スタイルを反映させることが可能です。

<!DOCTYPE html>
<html>
<head>
<title>test Page</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>見出し１</h1>
    <h2>見出し２</h2>
</body>
</html>
h1, h2 {
    color: blue;
  }
実行結果

CSSセレクターを利用してスタイルを反映する

HTMLのタグとそのタグで設定されている属性を連結させることで、適応するスタイルの範囲を狭くすることができます。

具体的には以下のように実装します。

<!DOCTYPE html>
<html>
<head>
<title>test Page</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1 class="test">見出し１</h1>
    <h2 class="test">見出し２</h2>
</body>
</html>
.test {
    color: red;
}

h1.test {
    color: blue;
}

上記の場合、class属性に”test”が設定されるタグには赤色が設定されますが、h1タグで書かれている「見出し１」には、「h1.test」という形より厳格なスタイルルールが適応されています。

これは、h1タグでかつclass属性に”test”と書かれたタグに対してスタイルが適応されることが示されています。

スタイルシートの中で記述されている「.test」と「h1.test」の指定方法の詳細についてもう少し詳細に説明します。

タグに対して共通のスタイルを反映したい場合

タグの要素名を単体で指定することで反映できます。

h1 {
    color: red;
}

指定した値を持つclass属性に対してスタイルを反映したい場合

class名の手前に「.」を付与することで反映できます。

.test {
    color: blue;
}

指定したタグにかつ、指定した値を持つclass属性に対してスタイルを反映したい場合

適応条件をより明確にして反映することができます。タグとスタイル名を組み合わせて設定します。

h1.test {
    color: blue;
}

指定した値を持つid属性に対してスタイルを反映したい場合


#test {
    color: blue;
}

指定したタグの中にあるタグに対してスタイルを反映したい場合

「あるタグの中にあるタグ」という形で反映条件を明確に設定することができます。

以下の例では、同じh1で設定された「見出し１」のみにスタイルが適応されます。

<!DOCTYPE html>
<html>
<head>
<title>test Page</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div>
        <h1>見出し１</h1>
    </div>
    <h1>見出し2</h1>
</body>
</html>
div h1 {
    color: red;
}

RELATED POST