ＣＳＳを使って、ＨＴＭＬ文書にスタイルシートを適用する方法には、大きく分けて３つの方法があります。

  • ピンポイントで適用する（要素にstyle属性を追加）
  • ＨＴＭＬ単位で適用する（<style>要素）
  • 外部CSSファイルを呼び出して適用する（<link>要素）

ピンポイントで適用する（要素にstyle属性を追加）

ＨＴＭＬ本文中に直接スタイルを記述します。

部分的にスタイルを設定したい場合に便利です。

※<meta>要素内の記述は、誤動作防止のため。

HTMLの記述方法

<html>
  <head>
    <meta name="Content-Style-Type" content="text/css">
  </head>
  <body>
    <p style="color: #F00;">本文</p>
  </body>
</html>

ＨＴＭＬ単位で適用する（<style>要素）

文書単位でスタイルシートを設定する方法です。

ＨＴＭＬ文書の<head>要素内に<style>要素を記述します。

HTMLの記述方法

<html>
  <head>
    <style type="text/css">
      .color {
          color: #F00;
      }
    </style>
  </head>
  <body>
    <p class="color">本文</p>
  </body>
</html>

外部CSSファイルを呼び出して適用する（<link>要素）

ＨＴＭＬとは別に、スタイルシートを記述した専用のCSSファイルをHTMLファイルを作成する方法です。

ＨＴＭＬのファイルから呼び出して利用します。

外部ＣＳＳファイルの呼び出し方法は、ＨＴＭＬ文書の<head>要素内に<link>要素を記述。

HTMLの記述方法

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="xxx.css">
  </head>
  <body>
    <p class="color2">本文</p>
  </body>
</html>

外部ＣＳＳファイル(xxx.css)の記述方法

@charset "utf-8";
.color2 {
	color: #00F;
}