どうすれば読み込む？CSSの読み込み方法 #02
前回は、「2W1H」で理解するCSSという事で、おまじないのように書けるプログラミングがCSSだよ！という内容でした。
第3回目は、実際にHTMLに対して CSSを読み込む為の方法をご紹介します。
主にCSSの読み込み方法は、3つあります！
1. 外部ファイルとして読み込む （外部参照）
2. HTMLファイルのhead内に書く（内部参照）
3. HTMLタグ内に書く （インライン）
3つの方法の違い
ざっくりイメージはこうです。
その1：社内に演出家がいない為、外部の演出家（CSS）に頼もう！
その2：演出家を採用して演出は内製化してしまおう！
その3：もうそれぞれで演出やってくれ！
小さな劇団を運営している会社という例えで表現しましたが、何となくイメージしてもらえたら幸いです。次に、具体的な書き方を説明していきます。
1. 外部ファイルとして読み込む
HTMLのhead内に外部のCSSファイルにリンクさせます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>外部ファイルとして読み込む</title>
<!-- ↓↓↓↓↓ これが外部参照 ↓↓↓↓↓ -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>外部ファイルとして読み込む</h1>
</body>
</html>2. HTMLファイルのhead内に書く
HTMLのhead内に<style>タグを用いてCSSを記述します。※head内でじはなくbodyタグの中でも構いません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>head内にCSSを書く</title>
<!-- ↓↓↓↓↓ これが内部参照 ↓↓↓↓↓ -->
<style>
h1 {
font-size: 3.6em;
}
</style>
</head>
<body>
<h1>外部ファイルとして読み込む</h1>
</body>
</html>3. HTMLタグ内に書く （インライン）
htmlの要素に対してstyle属性として記述していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLタグ内に書く（インライン）</title>
</head>
<body>
<h1 style="font-size: 3.6em;">HTMLタグ内に書く（インライン）</h1>
</body>
</html>今回は、CSSの読み込み方法が大きく3つあるよ！という事が何となく理解してもらえたらOKです。次回は、ひとつのスタイルを例に実際にCSSを書くという事をやってみようと思います。
最後までお読みいただきありがとうございました！
よろしければサポートお願いします。励みになります！