← カテゴリ一覧に戻る

CSS・JSファイルの読み込み

link, script

外部CSSは <link rel="stylesheet"> で、 外部JavaScriptは <script src> で読み込む。 配置場所や属性によってページの読み込み速度・レンダリングに影響する。

CSSの読み込み

CSSは <head> 内に記述する。 ブラウザはCSSをすべて読み込んでからレンダリングを開始するため、早い段階で宣言することが重要。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <!-- 外部CSSファイルの読み込み -->
  <link rel="stylesheet" href="/styles/main.css">

  <!-- CDNからの読み込み -->
  <link rel="stylesheet" href="https://cdn.example.com/reset.css">

  <!-- メディアクエリ付き（印刷用スタイル） -->
  <link rel="stylesheet" href="/styles/print.css" media="print">
</head>
<body>
  ...
</body>
</html>

JavaScriptの読み込み

通常の <script> はHTMLのパースをブロックする。defer または async 属性を使って非同期読み込みにするのが推奨。

<!-- 通常（HTMLパースをブロック） -->
<script src="/js/app.js"></script>

<!-- defer: HTMLパース完了後、順番通りに実行 -->
<script defer src="/js/app.js"></script>

<!-- async: 読み込み完了次第すぐ実行（順番不定） -->
<script async src="/js/analytics.js"></script>

<!-- インラインスクリプト -->
<script>
  console.log('ページが読み込まれました');
</script>

比較defer と async の違い

属性ダウンロード実行タイミング実行順用途
なしブロッキング即時記述順ポリフィルなど最初に必要なもの
defer並列DOMContentLoaded前記述順アプリのメインJS（推奨）
async並列読み込み完了次第不定アナリティクスなど独立したスクリプト

ES Modulestype="module"

type="module" を指定すると ES Modules として読み込まれる。 デフォルトで defer 相当の動作をする。

<!-- ES Moduleとして読み込む（defer相当） -->
<script type="module" src="/js/main.mjs"></script>

<!-- インラインモジュール -->
<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

<!-- モジュール非対応ブラウザ向けフォールバック -->
<script nomodule src="/js/legacy.js"></script>

Tipspreload / prefetch でリソースを先読み

rel="preload" は現在のページで確実に必要なリソースを優先的に取得する。rel="prefetch" は次のページで使うリソースをアイドル時に取得する。

<!-- 重要なCSSを先読み（描画ブロック回避） -->
<link rel="preload" href="/styles/critical.css" as="style">

<!-- フォントを先読み（FOUT回避） -->
<link rel="preload" href="/fonts/NotoSansJP.woff2" as="font" type="font/woff2" crossorigin>

<!-- 次のページのJSを事前取得 -->
<link rel="prefetch" href="/js/checkout.js" as="script">

Tipsベストプラクティス

  • CSSは <head> 内の上部に配置してレンダリングブロックを最小化
  • JavaScriptは defer 属性を付けて読み込むのが基本
  • 独立したサードパーティスクリプト（アナリティクス等）は async を使用
  • 重要なリソースは preload で優先取得
  • 現代のビルドツール（Vite, webpack等）はこれらを自動で最適化してくれる

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<link rel="stylesheet">` と `<script>` の読み込みのHTMLサンプルを作成してください。

- CSSは `<head>` 内で読み込み、レンダリングブロックを最小化する構成を示すこと
- `<script defer>` と `<script async>` の違いと使い分けを説明・実例で示すこと
- `<script>` は `</body>` 直前に置く旧来の方法との比較も含めること
- `preload` / `prefetch` を使ったリソースヒントの使い方を示すこと
- クリティカルCSSのインライン化のメリットと実装方法にも触れること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo