HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

初心者向けに、HTMLで「linkタグ」と「scriptタグ」を使ってファイルを読み込む方法を解説した記事です。html・css・JavaScriptは別ファイルに分けて作るのが一般的。そのファイルを読み込むために使用します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

linkタグとscriptタグ

Webサイトは、htmlとcssで書かれたたくさんのページによって構成されています。また、より動きのあるサイトをつくるにはそれに加えてJavaScriptというプログラミング言語を使ってページがつくられます。

一つのページにhtmlとcss、そしてJavaScriptを記述しようとすると、不可能ではないのですが、編集ページが非常に長く、またどこに何が書かれているかがわかりづらくなってしまいます。htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるというようにそれぞれ異なる役割をもちます。

たくさんのページでサイトが構成されている場合、例えばサイトのイメージカラーを変えたいといったときに、htmlとcssが分けられていればcssの特定の箇所を修正するだけでサイトの全ページのカラーを一括して変えるといったことが可能です。こうしてWeb製作の現場ではhtml・css・JavaScriptのファイルはそれぞれ別ファイルに分けてつくられることが一般的です。

その別々のファイルで編集したものを紐付けて一つのページとしてまとめるタグにlinkタグとscriptタグがあります。

 

・linkタグ

他のファイルをリンクしてhtmlファイルに読み込ませます。rel属性(relationの略)でそのファイルがどんな文書であるかを指定します。

(※スタイルシート(stylesheet)やファビコン(favicon)など)

・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ファイルで指定した部分は適用されません。

linktag3

 

そこでlinkタグを使ってcssで書いた内容をhtmlファイルにつなげましょう。

rel属性でリンクタイプを指定し、type属性によってなんのテキストであるか、またhref属性でリンク先のURLを指定します。linkタグは<head>タグ内に記述しましょう。

<link rel="stylesheet" type="text/css" href="style.css">

linkタグ

すると、<link>タグで指定したファイル(”style.css”)が読み込まれ、文字の大きさと色が変わりました!

 

続いて、ファビコンの例も見てみましょう。ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。

favicon

 

実際のWebサイトでは下のように設定されています。

favicon2

 

スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。

 

大石ゆかり

CSSは外部ファイルとして読み込んだほうがいいんですか?

田島悠介

たくさんのページで共通して使う場合はもちろん、HTMLと分けたほうがソースコードの見通しも良くなるね。

大石ゆかり

タグに直接CSSを適用したら、どちらが優先されるんでしたっけ?

田島悠介

タグに直接適用したCSSの方が優先されるよ。

大石ゆかり

OK!linkタグ覚えました!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

scriptタグ

続いてscriptタグです。

Webページにはhtml・cssだけで書かれた文書のようなページ(静的なページといいます)と、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすとそれに伴って何か変化が起こる動的なページとがあります。動的なページにはJavaScriptなどが使われており、演算機能ループ処理など様々な機能が利用できます。scriptタグはJavaScriptを記述する際に使われるタグです。

 

scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。

<script type="text/javascript">(JavaScriptの記述)</script>

ここでは「『JavaScriptでループ処理』という文を1から100までループさせる」という内容のJavaScriptを書いてみます。

<script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。

scripttag2

このhtmlファイルを読み込むとブラウザ上で<script>タグ内で書いた処理が実行されました。

 

今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせてhtmlファイルに読み込ませてみましょう。

htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptをjavascriptのファイルに記述します。(保存する際には「.js」という拡張子を使いましょう)

type属性によってどんな種類のテキストなのかを指定し、src属性によって外部ファイル(ここでは”javascript.js”)を読み込みます。実際のコードは”javascript.js”のファイルに書かれているので、開始タグと終了タグの間には何も記述しません。

<script type="text/javascript" src="javascript.js"></script>

scripttag3

htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。

 

このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。

<link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や出処はどこなのかといった情報を指定します。外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますのでぜひ覚えておきましょう。

 

今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。

HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。

 

大石ゆかり

HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ?

田島悠介

JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。

大石ゆかり

プログラミング言語って何だか難しそう。

田島悠介

コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。