JavaScript プログラミング

HTMLでの外部ファイル読み込みのやり方

スポンサーリンク




htmlでの外部ファイル(JavaScriptとCSS)のやり方についてです

linkタグとscriptタグを使ってファイルを読み込みます

 

linkタグはCSSファイルややファビコンなどを読み込むときに使用します、例えばtest.cssというCSSファイルを読み込むときはHTMLファイルのheadタグ内に

<link rel="stylesheet" href="test.css">のように記述します

rel属性でリンクタイプを指定し、href属性でファイルを指定します

 

scriptタグはJavaScriptを読み込むときに使用します、例えばtest.jsというJavaScriptファイルを読み込むときはHTMLファイルのheadタグ内に

<script src="test.js"></script>のように記述します

src属性でファイルを指定しています

 

プログラムの例を載せておきます

 

htmlファイルを実行すると、このようにJavaScriptとCSSのファイルがちゃんと読み込まれていることがわかると思います

 

 

注意点

外部ファイルの読み込みはCSS→JavaScriptの順番で行いましょう

JavaScriptファイルを読み込んでいる間はページの読み込みが停止するため、ページの読み込み速度が遅くなってしまいます

CSSファイルはページの読み込みと並行して行えるため、ページの読み込みが止まってしまうことはありません

ユーザーのためにもGoogleのSEO的にもページの読み込みの速度は重要です

順番を入れ替えるだけなので、これくらいは気を付けておきましょう

 

最後までお読みいただきありがとうございました

 

スポンサーリンク




-JavaScript, プログラミング

Copyright© 物を作る者 , 2020 All Rights Reserved.