HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】
初心者向けに、HTMLで「linkタグ」と「scriptタグ」を使ってファイルを読み込む方法を解説した記事です。html・css・JavaScriptは別ファイルに分けて作るのが一般的。そのファイルを読み込むために使用します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。
linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。
目次
【動画での解説はこちら！】
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！
お願いします！
linkタグとscriptタグ
Webサイトは、htmlとcssで書かれた多くのページによって構成されています。
また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。
一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。
しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。
つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。
さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。
多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。
例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる
こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。
その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。
linkタグ
linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。
rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。
（※スタイルシート(stylesheet)やファビコン(favicon)など）
scriptタグ
scriptタグは、JavaScriptを読み込むときに使います。
linkタグの使い方
ここからは具体的な使い方について例をみていきます。
まず、htmlファイルとcssファイルの2種類を用意します。
htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。
cssのファイルには下記のように記述してみましょう。
※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。
h1 { font-size: 60px; color: red; }
htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。
htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。
そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。
rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。
linkタグは<head>タグ内に記述しましょう。
<link rel="stylesheet" type="text/css" href="style.css">
すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！
続いて、ファビコンの例も見てみましょう。
ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。
実際のWebサイトでは下のように設定されています。
スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。
CSSは外部ファイルとして読み込んだほうがいいんですか？
たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。
タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？
タグに直接適用したCSSの方が優先されるよ。
OK！linkタグ覚えました！
scriptタグ
続いてscriptタグです。
Webページには2種類のページがあります。
１つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。
2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。
動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。
このJavaScriptを記述する際に利用するタグが、scriptタグです。
scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。
<script type="text/javascript">（JavaScriptのコード）</script>
ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。
<script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。
JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。
このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。
今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。
htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう）
type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。
「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。
<script type="text/javascript" src="javascript.js"></script>
htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。
このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。
<link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。
外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。
今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。
HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。
執筆してくれたメンター
| メンターSSさん
文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。 |
HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？
JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。
プログラミング言語って何だか難しそう。
コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
