[HTML]linkタグとscriptタグを使ってファイルを読み込む方法

Tweet

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

レイアウトを設定するにはスタイルシートで設定するのですが、
このファイルを読み込むときに使うのが link タグになります。

link タグの構文は

となります。

次に script タグの解説です。
html ファイルは画面の構造を作成し、
css ファイルでレイアウトを設定します。
そして javascript で様々な動作を設定することができるのですが、
この javascript ファイルを読み込むときに使うのが script タグです。

script タグの構文は

となります。

最近では、オンラインからのファイル読み込みが多いため
href=”” の css ファイルや、
src=”” の script ファイルには、URLを指定することも多くなりました。

ファイルの指定には、絶対パスと相対パスがありますが、
この解説には
[HTML]簡単！絶対パスと相対パスの違いについて
を参考にしていただければと思います。

使い分けとしては、
相対パスで指定するときには、
自作のスクリプトやスタイルシート、HTMLファイルなどを読み込むときに使います

絶対パスで指定するときには、
bootstrap や FontAwesome など、公開されているライブラリなどを読み込むときに使います。

それでは実際に、ファイルの読み込みをしてみましょう。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

まずは、この状態で
ctrl + shift + j でプレビューをみてみましょう。

すると真っ白な画面になっています。

次に、body の中にh1 でタイトルを作成し、それにcssファイルを読み込んで適用してみます。

まず、

として展開します。

Emmet 記法では {} の中にタグの中身を書くようになります。

これを展開すると

となります。

これを ctrl + shit + h でプレビューをみると、
大きくタイトルと書かれているのがわかります。

これに css ファイルを読み込むことで文字色を変えてみます。

今回は練習ということで、まずは同じフォルダに style.css を作成します。

コードは

とします。

そして、この style.css を読み込むためのコードは
Emmet 記法で簡単に作成できますので

として展開します。

すると

となり、これにより style.css が読み込まれ色が変わるのが確認できます。

次に javascript ファイルの読み込みを行ってみましょう。

今回は、アラートをだすという簡単なスクリプトを読み込みます。
alert.js というファイルを作成します

中身は

として保存します。

次に、この alert.js を読み込みます。

を展開すると

となり、アラートで javascript を読み込みました と表示されます。

このように、ファイルを読み込むことでさまざまな動作を追加することが可能になります。

長文となりましたが、今回の要点をまとめてみましょう。

・レイアウトの設定は css ファイルで行う・
・css ファイルは link タグで読み込む。
・サイトで動作をつけるには javascript ファイルで行う。
・javascript ファイルは script タグで読みこむ。

サイトをつくるときに、だんだんと大きなプログラムになっていくため、
ファイルをそれぞれの用途にわけて分割し、それを読み込むようにすることで
ソースコードのメンテナンスがしやすくなります。

また、サイト作成においては、オンラインからのライブラリ読み込みをすることで、
効率的な開発が可能となりますので、ファイルの読み込みについては覚えておくようにしましょう。