CSSを学習する際に、どうやってCSSを記載するんだろうと悩まれている方もいらっしゃるかと思います。そんな方に向けて、作成したHTMLファイルに対して、どのようにCSSを適用するのか、適用方法について解説いたします。
CSSの適用方法について
CSSの適用方法には3つの方法があります。
- CSSファイルを作成し、HTMLファイルに読み込ませる方法
- HTMLファイルに<style>タグを作成し、CSSを記載する方法
- HTMLのタグの中に、style属性を追加し、CSSを記載する方法
順を追って解説いたします。
CSSファイルを作成し、HTMLファイルに読み込ませる方法
通常はこちらの方法が用いられ、最も一般的な適用方法となります。
まずは作成しているHTMLファイル（index.html）などと同じ階層にCSSファイル（style.css）を作成します。
次にHTMLファイルの<head>タグ内に下記の記述を追加します。
<link rel="stylesheet" href="style.css"><link>タグの「rel」属性に「stylesheet」、「href」属性の値に作成したcssファイルまでのパスを記載します。
この場合、ファイル名のみ記載をしておりますが、相対パスで記載しており、HTMLファイルと同じ階層（フォルダ）に存在する場合は、ファイル名だけで認識されます。
HTMLファイルに<style>タグを作成し、CSSを記載する方法
<p>よく使うHTMLタグ<span>15</span>選</p>
<style>
span {
font-size: 32px;
color: red;
font-weight: bold;
}
</style>
HTMLファイルに<style>タグを記載し、その中にCSSを記載します。
私の場合になりますが、実際の案件ではこの記載は行っておりません。
CSSファイルで管理したほうが、設定が1元化できますし、何よりHTMLファイルがものすごく縦長になってしまい、視認性が大きく低下してしまいます。
ちょっとした説明用のコーディングであったり、一時的に動作を確認する際に使用するケースはあります。
HTMLのタグの中に、style属性を追加し、CSSを記載する方法
<h1>赤色のH1タグ</h1>
<!-- ----- これに直接styleを適用 ----- -->
<h1 style="color: red;">赤色のH1タグ</h1>
この方法も実際の案件では使用しません。
JavaScriptで特定の動作を行った際に、CSSを付与するケースがありますが、そのような特殊な場合にのみ使用します。
まとめ
CSSの適用方法について解説させていただきました。
Webサイト制作では、１つのHTMLファイルだけではなく、複数のページで構成されることがほとんどです。
そういった場合に、HTMLファイルに直接記載する方法だと、管理がものすごく大変になります。CSSファイルから読み込んだ場合は、それぞれのHTMLファイルで１つのCSSファイルを読み込めばよいので、管理がしやすくなります。
JavaScriptで直接タグにstyleを追加するなど、特別なパターンもありますが、基本的にCSSファイルを作成し管理するようにしましょう！
