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

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

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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を読み込むときに使います。

 

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

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タグ覚えました!

 

scriptタグ

続いてscriptタグです。

Webページには2種類のページがあります。

1つ目は、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文を使ってループ処理する方法をご覧ください。

scripttag2

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

 

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

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

type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル(ここでは”javascript.js”)を読み込みます。

「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。

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

scripttag3

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デザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。