CSSを適用する方法

CSSをHTMLに適用させる方法は主に以下の三つがあります。

• タグに直接記入する


• <style>タグの利用


• 外部からのCSSファイルの適用

具体的にそれぞれ用いてCSSをHTMLに適用させてみます。

タグに直接記入する

CSSを適用させたい部分のHTMLのタグにstyle属性を追加する方法です。
ただしこの方法ではタグが見づらくなりメンテナンスがやりにくくなったりします。
また他のCSSと競合する可能性があり思うように上書きが難しくなります。

<style>タグの利用

HTMLの内に<style>タグを書き込みその中でCSSを追加する方法です。
複数のHTMLではなくそのHTMLにのみ適用されます。
限定的にCSSを追加したい時などに用います。

外部からのCSSファイルの適用

HTMLファイルとは別にCSSファイルを作成してそれを適用させる方法です。
方法でCSSを適用させるのが一般的です。
この方法では一つのCSSファイルで複数のHTMLのスタイルを適用できる利点があります。



HTMLの内に適用するCSSの<link>タグを記入してCSSを読み込みます。
書式は次のようになります

<link rel="stylesheet" href="適用するCSSファイルのパス">

今回のサンプルでは疑似的に形だけ外部からのCSSファイルを適用している体を取っています。（<link>タグがなくてもCSSが適用されます）
実際に試すにはサンプルをコピペしてHTMLファイルとCSSファイルを同じフォルダで作成すれば正式なサンプルになります。

CSSファイルにも文字コードを指定する必要があります。
1行目に指定する文字コードを書き込みます。
書式は次のようになります。

@charset "文字コード";