2016/3/11更新

HTMLにCSSを読み込む方法

HTMLとCSSは別の言語です。なので二種類のファイルを記述しても自動的にスタイルが適用されるわけではありません。

今回はHTMLにスタイルを適用する方法を紹介します。

HTML内部に書く場合

HTML内部に書く場合はheadタグ内部で指定する方法と、各タグにstyle属性で記述する二種類の方法があります。

headタグ内部で指定する方法はheadタグ内にstyleタグを記述し、内部にCSSを記述していきます。

<head>
 <style type="text/css">
  p {
    color: red;
    font-size: 16px;
  }
 </style>
</head>

<head>

p {

color: red;

font-size: 16px;

}

</style>

</head>

headタグの中に書くことにより読み込み時にすぐ取り込まれ、読み込み速度をわずかに速くすることができます。

タグにスタイルを書くには以下のように記述します。

<div style=“color: red; text-align: left;”>hogehoge</div>

1	<div style=“color: red; text-align: left;”>hogehoge</div>

直接styleを書くことにより、他のスタイルよりも優先度が上がり確実にそのスタイルを当てることができます。ただ、タグの内部に書くという手法ではコードが書きづらくなるため、あまり多くのスタイルを適用するには適しません。

HTMLの外に書く場合はheadタグ内でCSSのファイルを読み込むlinkタグを書きます。

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

<head>

</head>

linkタグは複数書くこともできます。複数書いた場合はあとに読み込んだCSSから優先されます。

なので一番始めに読み込んだスタイルがあとで読み込んだCSSで上書きされることもあるので、複数書く場合は注意しましょう。

HTML内に書く場合と外に書く場合を紹介しました。それぞれ利点もあれば欠点もあるので、それぞれの特徴をよく考えた上でスタイルをどこに定義するか考えると良いでしょう。

CSS HTML