目次
あらすじ
Webサイトを作成する際、HTMLだけでは色のない単調なサイトが出来上がってしまいます。
そこでCascade Style Sheet (カスケイド・スタイル・シート)、通称CSS、を一緒に使ってあげるだけで華やかなサイトに仕上げることができます。
ではこのCSSをどのようにしてHTMLのファイルに取り込むのでしょうか。
その方法は3つあります。
- CSSを外部ファイルとして読み込む方法
- インファイルに記載する方法
- インラインで記載する方法
の3通りです。
それぞれを詳しく見ていきましょう。
CSSを外部ファイルとして読み込む方法
概要
他の2つの方法とは大きく異なる要素として、HTMLを記載したファイルとはまた別のファイルを作成しなければいけないところです。
どういうことかというと、
- HTMLが書いてあるファイル
- CSSが書いてあるファイル
の2つ別々に用意するということです。
方法
2つのファイルを作成し、それぞれHTMLとCSSを記載し保存しておきます。
そして、HTMLのファイル内に別ファイルのCSSを指定してあげるだけでHTMLにCSSが反映されるようになります。
コード
具体的に 外部のCSSファイルを指定してあげるコードは下記になります。
<!DOCTYPE HTML>
<head>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
と<head>タグ内に<link>タグでCSSの詳細を記載します。
rel属性でリンク先との関係性を記載し、type属性でファイルの種類を記載します。
そして、href属性で具体的なファイルの場所を指定してあげます。
メリット
- 複数のHTMLファイルに反映することができる
- 見栄えがよく、見やすい
デメリット
- ファイル管理が増える
- パスを間違えると反映されない
インファイルとして記載する方法
概要
インファイルとは外部ファイルの逆で、in(イン)+file(ファイル)で直訳すると「ファイルを中に入れる」となります。
まさにその通りで、外部ファイルとは逆のことをすればいいだけです、
方法
具体的には、CSSで記載したいことを<head>タグ内にすべて記載するだけです。
コード
文字だけではわからない方もいると思うので実際にコードで見ると下記のようになります。
<!DOCTYPE HTML>
<html>
<head>
<style>
P {
color:red;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
といった具合に、<p>タグ内の要素を指定し、色を赤に変更するコードを<head>タグ内に記載することでCSSを反映する方法がインファイルでの指定方法です。
メリット
- 一つのファイルで済むのでファイルが多くならない
- CSSを記載するためにいちいちファイルを移動しなくてすむ
デメリット
- HTMLファイル内の量が多くなる
- 見栄えが悪くなる
インラインに記載する方法
概要
インラインとは外部ファイルやインファイルとは違い直接タグに記載する方法です。
In(イン)line(ライン)で「ラインに入れる」という訳にできることから、行に直接記載するという意味を持ちます。
方法
外部ファイルやインファイルではclass(クラス)やid(アイ・ディー)といった属性を使って変更したい要素を指定していましたが、インラインでは直で変更したいタグにstyle属性を記載します。
コード
実際に記載する方法は下記のようになります。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style=”color:red;”>Hello World</p>
</body>
</html>
<head>タグ内には何も記載せず、<p>タグの中に直接style属性を書いています。
これによって<p>タグ内の「Hello World」は赤色の文字になります。
メリット
- それぞれの要素に細かくCSSを記載できる
- 一つのファイルで済むのでファイルが多くならない
デメリット
- HTMLファイル内の量が多くなる
- インラインは記載したタグにしか反映されないため、他のタグでも反映したい場合はいちいち記載する必要がある
3つの方法を比較してみて
優先度
この3つの方法を同時に使うことはできますが、その際、どの方法が一番優先度が高いのでしょうか。
それは、タグに直接書き込むインラインでの記載方法が一番優先されます。
その次にインファイル、そして、外部ファイルと続きます。
わかりやすく書くと
インライン
fa-arrow-circle-down
インファイル
fa-arrow-circle-down
外部ファイル
となります。
推奨されている方法
一番推奨されている方法は外部ファイルでCSSを反映する方法です。
その理由として、複数のHTMLにCSSファイルを反映することができるということと、後で変更がききやすいということが挙げられます。
まとめ
いかがだったでしょうか。
正直インファイルに関してはあまり見る機会はないですが、方法は覚えておくことをおすすめします。
覚えておくことで、万が一外部ファイルがリンクできなかったり、ファイル自体が消えてしまった時にはこのインファイルでの記載方法を使うことができます。
以上ファイルの反映方法でした。
