忘れがちな外部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要素にその要素を追加

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

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

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

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

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

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

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

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

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

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

 

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

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

ここまでのまとめ

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

  • 外部CSSファイルの場合

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

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

  • 外部JSファイルの場合

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

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

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

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

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください