HTMLにCSSを記述する3つの方法：インライン、内部、外部
この文章では、HTML文書にCSSスタイルを追加する3つの方法、 **インライン、内部、外部** について解説します。 それぞれの方法のメリット・デメリットを理解し、 状況に応じて使い分けられるようにしましょう。
1. インラインスタイル：HTMLタグ内に直接スタイルを記述
インラインスタイルは、HTMLタグの`style`属性を使用して、 特定の要素のみに適用するスタイルを記述する方法です。 簡単なスタイル変更や、一時的なスタイル適用に便利です。
<p style="color: blue; font-size: 18px;">
このテキストは青色で、フォントサイズは18pxです。
</p>
メリット
* 特定の要素のみにスタイルを適用できるため、直感的でわかりやすい。 * 他の要素に影響を与えないため、部分的なスタイル変更に適している。
デメリット
* HTMLとCSSが混在するため、コードの見通しが悪くなる。 * 複数要素に同じスタイルを適用する場合、記述が冗長になる。 * 再利用性が低く、大規模なサイトでは管理が困難になる。
2. 内部スタイル：<style>タグを使ってページ全体にスタイルを適用
内部スタイルは、HTML文書の<head>タグ内に<style>タグを記述し、 ページ全体に適用するスタイルを定義する方法です。 特定のページのみに適用するスタイルを記述したい場合に便利です。
<head>
<style>
h2 {
color: red;
}
p {
font-size: 16px;
}
</style>
</head>
メリット
* HTML文書内にCSSを記述するため、外部ファイルの読み込みが不要。 * ページ全体に統一感を持たせるスタイルを定義しやすい。
デメリット
* 他のHTML文書とスタイルを共有できないため、再利用性が低い。 * 大規模なサイトでは、CSSの管理が煩雑になる可能性がある。
3. 外部スタイル：外部CSSファイルを読み込んでスタイルを適用
外部スタイルは、CSSを記述した外部ファイルを作成し、 HTML文書からそのファイルを読み込む方法です。 ウェブサイト全体のデザインを統一したり、 複数のページで同じスタイルを共有したい場合に最適です。
まず、"style.css"のような名前でCSSファイルを作成します。
h2 {
color: green;
}
次に、HTML文書の<head>タグ内に、 <link>タグを使用してCSSファイルを読み込みます。
<head>
<link rel="stylesheet" href="style.css">
</head>
メリット
* HTMLとCSSが完全に分離するため、コードの見通しが良く、管理しやすい。 * 複数のHTML文書で同じCSSファイルを共有できるため、再利用性が高い。 * ウェブサイト全体のデザインを統一しやすく、 変更があった場合もCSSファイルのみを修正すればよい。
デメリット
* 外部ファイルを読み込む必要があるため、 ページの読み込み速度が遅くなる可能性がある。 * 初期設定として、CSSファイルを作成する必要がある。
4. 3つのCSS記述方法の比較：最適な方法を選ぼう
それぞれの方法にはメリット・デメリットがあります。 状況に応じて最適な方法を選びましょう。
| 方法 | メリット | デメリット | 適したケース |
|---|---|---|---|
| インラインスタイル |
|
|
|
| 内部スタイル |
|
|
|
| 外部スタイル |
|
|
|
参考文献
よくある質問
Q1. インラインスタイル、内部スタイル、外部スタイルを同時に使うことはできますか？
はい、可能です。 優先順位は、インラインスタイル > 内部スタイル > 外部スタイル となります。 同じ要素に複数のスタイルが適用されている場合、 より優先順位の高いスタイルが適用されます。
Q2. 外部スタイルシートは、複数のHTMLファイルから読み込むことはできますか？
はい、可能です。 1つの外部スタイルシートを作成し、 複数のHTMLファイルの<head>タグ内で<link>タグを使って読み込むことで、 すべてのページに同じスタイルを適用できます。
Q3. CSSの記述方法に迷った場合は、どの方法を使えば良いですか？
特別な理由がない限り、外部スタイルシートを使用することをおすすめします。 コードの見通しや管理のしやすさ、再利用性の高さなど、 多くのメリットがあります。
その他の参考記事:(cascading style sheets)は、h1 { background: blue; } のように書くことで文章を装飾できる。