スタイルを適用させるにはどうするべき?

スタイルの適用方法

HTML文章にスタイルを適用させるには、次の方法があります。

  • 1. link要素で外部スタイルシートを利用する
  • 2. HTML文章内 style要素の内容として記述する
  • 3. HTML文章内 style要素で外部スタイルシートを利用する
  • 4. HTML要素のsytle属性で記述する

HTMLは構造を記述する言語であるため、視覚的表現と切り離すことが望ましいとされています。保守性なども考慮すると、1.または2.の方法で外部スタイルシートを利用するようにしましょう。

1. link要素で外部スタイルシートを利用する

href属性に外部cssのURIを指定します。

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

2. HTML文章内 style要素で外部スタイルシートを読み込む

href属性に外部cssのURIを指定します。

HTML
<style type="text/css">
@import "css/style.css";
</style>

3. HTML文章内 style要素の内容として記述する

HTML
<style type="text/css">
p.desc { font-size: 1.2em; }
</style>

4. HTML要素のsytle属性で記述する

HTML
<p style="font-size:1.2em;">