忘れがちな外部CSS・JSファイルの読み込み方まとめ

外部CSS・JSファイルの読み込みは

  • 全ページ共通の同じCSS・JSを使う
  • jQueryなどのライブラリを利用する

みたいな場合に必要になりますが、意外とこの方法は忘れがちです。

特にWordPress等を使うと自分で書く機会がなくなるので忘れがちになります（僕も含め）

そこで外部CSS・JSファイルを読み込みする方法をまとめました。

またjQueryなどのスクリプトを使って動的に読み込みさせる方法についても最後に紹介します。

外部CSSを読み込みさせるには

まず初めは外部CSSを読み込みさせる方法

こちらの場合はlinkタグを使うのが基本です。

 

例えば outer.css  という名前の外部CSSファイルを読み込みしたいとしましょう。

その場合のlinkタグの書き方は次の通り

ただhref属性を指定するだけでなく、 rel="stylesheet"  も必要なことに注意

linkタグはhead内に書くことが多いですがbodyタグ内に書いて後読みしてもOKです。

 

特に次のようなCSSファイルは後読みでも問題ありません。

  • ファーストビューに影響を与えないCSS
  • jQeuryなどで動的に追加する要素に適用するCSS
  • 文字の装飾など重要度の低いCSS

基本的にファーストビュー（ページを開いてスクロールせずに見える部分）に影響を与えないならbodyタグで後読みした方がパフォーマンス的にいいと思います。

外部JSファイルを読み込ませるには

お次は外部JavaScriptファイルを読み込ませる方法

こちらの場合はlinkタグではなくscriptタグを使う点に注意です。

 

例えば outer.js  という外部JSファイルを読み込みたいとしましょう。

その場合のscriptタグの書き方は次の通り

src属性に外部JSファイルのパス名を書くだけです。

ただしscriptタグの場合は閉じタグまで必要なのでそれも忘れずに

 

外部JSの場合は基本的にhead内よりbodyタグ内で後読みすることが多いです。

ただし次のような場合はhead内で先読みした方がいいかも

  • jQueryなどのJSライブラリ
  • ファーストビューに影響を与えるJS

私的な経験からいうと基本的なライブラリ（特にjQuery）は先読みした方がいいです。

あとCSS同様ファーストビューに影響を与えるJSファイルも先読みがベストかもしれません。

補足 : jQuery内で外部CSS・JSを読み込むには

以上が外部CSS・JSファイルを読み込みさせる方法

基本的にはこの方法を使いますが、スクリプト内で同じことをしたい場合もあります。

そこでここからは外部CSS・JSをjQueryなどから読み込ませるテクニックを紹介します。

1. 外部CSSファイルをjQueryから読み込みさせる方法

まず初めは外部CSSをスクリプトから読み込ませたい場合

そのやり方を簡単にまとめると

  1. link要素を新しく作成
  2. rel属性やhref属性などを設定
  3. body要素にその要素を追加

という手順で簡単にできます。

詳しいやり方やらコード例なんかは次記事で紹介した通り

PisukeCode - Web開発まとめ
 
jQueryから外部CSSを読み込むには？そのテクニックを紹介
https://pisuke-code.com/jquery-load-outer-css-dynamically
外部CSSというとヘッダー内でlinkタグを使って読み込むのが一般的しかしjQuery（または純粋なJavaScript）を使うと動的に読み込みすることも可能です。ここでは外部CSSをjQueryから読み込ませるテクニックについてまとめました。外部CSSを読み込みさせる（jQueryの場合）まず初めはjQueryを使って読み込ませる方法やり方はlinkタグを直接作り、body要素内に追加するだけです。その具体的なコード例は次の通り まず外部CSSとして次のような outer.css というファイルを作ったとしましょう。.bold_italic{ font-weight: bold; fon...

ちなみにjQueryを使わず純粋なJavaScriptのみで行うことも可能です。

2. 外部JSファイルをjQueryから読み込み

お次は外部JSファイルをスクリプトから読み込みしたい場合

こちらの方法も外部CSSの場合と同じく

  • 空のscriptタグを新しく作成
  • src属性の値を設定
  • body要素にその要素を追加

というような手順で簡単に実行させることが可能です。

この詳しいやり方やコード例は次記事で解説した通り

PisukeCode - Web開発まとめ
 
jQueryで外部JSファイルを動的に読み込む方法とコード例
https://pisuke-code.com/jquery-load-outer-js-dynamically
外部JSファイルを読み込む場合、head内などで読み込むのが普通だと思います。しかし場合によってはJSコード内で動的に読み込みしたい場合もあるはずそこでjQuery（またはJavaScript）で外部JSを動的に読み込む方法についてまとめました。外部JSを読み込みさせる（jQueryの場合）jQueryで外部JSを読み込みさせる方法はそれほど難しくありません。外部JSファイルを読み込みするscriptタグを作り、bodyタグに追加するだけです。その具体的なコード例は次の通り まず次のような内容の outer.js  というファイルがあるとしましょう。$(...

ボタンクリック時などイベントと組み合わせると面白いことができます。

 

以上がスクリプト側で外部CSS・JSファイルを読み込ませるテクニックです。

空のlink要素やscript要素を作り、属性を設定してbody要素にねじこむだけでできます。

ここまでのまとめ

ということで外部ファイルを読み込みさせる方法まとめ

  • 外部CSSファイルの場合

    linkタグを使う。例えば outer.css  を読み込みさせるなら

    のようにhref属性にCSSファイルへのパスを書けばOK

  • 外部JSファイルの場合

    scriptタグを使う。例えば outer.js  を読み込みさせるなら

    のようにsrc属性にJSファイルへのパスを書けばOK

意外と忘れがちだったので自分用の意味も込めてまとめてみました。

ではでは($・・)/~~~

関連記事