「Webページを作っている3つの仕組み ― HTML・CSS・JavaScript」で、Webページは3つの役割を持ったファイルでできていると書きました。HTMLが文章の構造、CSSが見た目、JavaScriptが操作への反応を担当している。そして、ファイルを分けておくと片方だけ修正すればよい場面が増える、という話でした。
今回はその続きです。3つのファイルはバラバラに存在しているのに、ブラウザはそれをひとつのページとして表示しています。どこで繋がっているのか。答えは、HTMLの中に「このファイルを読み込んでくれ」と書いてあることです。
起点はHTMLファイル
ブラウザでWebページを開くとき、最初に読み込まれるのはHTMLファイルです。CSSファイルやJavaScriptファイルを直接開くわけではありません。
HTMLファイルの中に、「このCSSファイルを使ってくれ」「このJavaScriptファイルを実行してくれ」という指示が書かれています。ブラウザはHTMLを上から順に読んでいき、その指示を見つけたらCSSやJavaScriptを取りに行きます。
つまり、HTMLが起点です。CSSもJavaScriptも、HTMLから呼ばれて初めて働きます。
CSSを読み込む ― linkタグ
HTMLからCSSファイルを読み込むには、<link>タグを使います。実際のコードはこうです。
<link rel="stylesheet" href="style.css">rel="stylesheet"は「スタイルシート（見た目の指定）として使ってくれ」という意味です。href="style.css"は「style.cssというファイルを読み込んでくれ」という意味です。
この1行がHTMLの中にあるだけで、ブラウザはCSSファイルを取得し、その中に書かれた見た目の指定をページに適用します。
もしこの行を消すと、CSSファイルがフォルダに存在していてもブラウザは読みに行きません。HTMLに書かれていない限り、CSSは適用されないということです。
書く場所
<link>タグはHTMLの<head>の中に書きます。<head>はページのタイトルや設定情報を置く場所で、画面には表示されません。ブラウザが本文を表示する前にCSSを読み込めるよう、<head>に置くのが基本です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>ここが本文</p>
</body>
</html>CSSが本文より先に読み込まれるので、ページが表示されたときには既に見た目が整っている状態になります。
JavaScriptを読み込む ― scriptタグ
JavaScriptファイルを読み込むには、<script>タグを使います。
<script src="main.js"></script>src="main.js"は「main.jsというファイルを読み込んで実行してくれ」という意味です。linkタグと同じように、ファイルの場所を指定しています。
CSSのlinkタグとの違いは書く場所です。<script>タグは<body>の一番下、閉じタグ（</body>）の直前に置くのが一般的です。
<body>
<h1>見出し</h1>
<p>本文</p>
<script src="main.js"></script>
</body>なぜ下に置くのか
JavaScriptはページの一部を書き換えたり、ボタンに反応を持たせたりします。書き換える対象の本文がまだ読み込まれていない段階で実行すると、「対象が見つからない」という状態になります。本文が全部読み込まれた後に実行したいから、一番下に置いています。
全体の構造を見てみる
CSSとJavaScriptの両方を読み込んだHTMLファイルの全体像です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>今日の天気</h1>
<p>今日は晴れです。</p>
<button>詳しく見る</button>
<script src="main.js"></script>
</body>
</html>この1つのHTMLファイルが起点になって、ブラウザは3つの仕事を組み合わせます。
<head>の中でCSSファイルを見つけ、見た目の指定を読み込む<body>の中身（本文）を表示する<body>の末尾でJavaScriptファイルを見つけ、実行する
上から順番に処理が進んでいきます。
ファイルの場所を指定する方法
href="style.css"やsrc="main.js"に書いているのは、ファイルの場所（パス）です。ここに正しい場所を書かないと、ブラウザはファイルを見つけられません。
たとえば、CSSファイルがcssというフォルダの中にある場合はこう書きます。
<link rel="stylesheet" href="css/style.css">「cssフォルダの中のstyle.css」という意味です。フォルダの区切りには/（スラッシュ）を使います。
このブログの場合は、先頭に/をつけて/css/style.cssと書いています。先頭の/は「サイトの一番上の階層から」という意味で、HTMLファイルがどのフォルダにあっても同じ場所を指し示します。ファイルが増えてきたときに迷わなくて済む書き方です。
まとめ
- ブラウザが最初に読むのはHTMLファイルで、HTMLが起点になっている
- CSSは
<link>タグで読み込み、<head>の中に書く - JavaScriptは
<script>タグで読み込み、<body>の末尾に書く - どちらもファイルの場所（パス）を指定することで、ブラウザが取りに行く
- HTMLに読み込みの指示がなければ、ファイルが存在していても適用されない