後からCSSを読み込む5つの方法と応用例

はじめに
●CSSを後から読み込む5つの方法
●応用例とサンプルコード
まとめ

はじめに

Webページのパフォーマンスは、ユーザー体験に直接影響する重要な要素です。

特に、ページの読み込み速度は、訪問者がサイトに滞在する時間や、コンバージョン率にも影響を及ぼす可能性があります。

この記事では、CSSを後から読み込むことで、Webページの読み込み速度を向上させる5つの効果的な方法を紹介します。

これらの方法を利用することで、サイトのパフォーマンスを向上させ、より快適なユーザー体験を提供できるようになります。

●CSSを後から読み込む5つの方法

Webページのパフォーマンスを最大限に引き出すためには、CSSの読み込み方法を最適化することが重要です。

ここでは、CSSを後から読み込むための5つの効果的な方法を詳しく解説していきます。

○方法1：linkタグの属性を変更する

まず最初に、linkタグの属性を変更する方法を紹介します。

次のように、linkタグにrel=”preload”を追加し、as=”style”を指定して、CSSファイルを後から読み込むようにします。

<head>
  <link rel="preload" href="style.css" as="style">
</head>

また、onloadイベントを使用して、CSSファイルが読み込まれた後に実行される関数を指定できます。

<head>
  <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
</head>

○方法2：JavaScriptを使ってCSSファイルを動的に読み込む

次に、JavaScriptを使ってCSSファイルを動的に読み込む方法を見ていきましょう。

次のようなコードを<body>タグ内の最後に追加して、ページの読み込みが完了した後にCSSファイルを読み込むようにします。

<script>
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'style.css';
  document.head.appendChild(link);
</script>

○方法3：jQueryを使ってCSSファイルを読み込む

jQueryを使ってCSSファイルを読み込む方法もあります。

jQueryを使用する場合は、まずjQueryライブラリを読み込む必要があります。

次のように、<body>タグ内の最後に追加してください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

その後、次のようなコードを追加して、ページの読み込みが完了した後にCSSファイルを読み込むようにします。

<script>
  $(document).ready(function() {
    $('<link rel="stylesheet" href="style.css">').appendTo('head');
  });
</script>

○方法4：@importルールを使ってCSSファイルを読み込む

CSSファイル内で別のCSSファイルを読み込む方法として、@importルールがあります。

次のように、style.cssファイル内に@importルールを追加し、他のCSSファイルを読み込むようにします。

/* style.css */
@import url("additional-styles.css");

ただし、この方法ではブラウザのパフォーマンスが低下する場合があるため、他の方法を検討することをおすすめします。

○方法5：メディアクエリを使って読み込みを制御する

CSSファイルの読み込みを、特定の条件下でのみ行う方法として、メディアクエリがあります。

例えば、次のように、画面幅が768px以上のデバイスのみでCSSファイルを読み込むように指定できます。

<head>
  <link rel="stylesheet" href="desktop-style.css" media="screen and (min-width: 768px)">
</head>

この方法は、レスポンシブデザインの実装にも役立ちます。

●応用例とサンプルコード

CSSを後から読み込む方法を応用することで、さまざまな効果が得られます。

下記に、応用例とそれぞれのサンプルコードを紹介します。

○ページの読み込み速度を向上させる

ページの読み込み速度を向上させるために、重要なスタイルシートを最初に読み込み、それ以外のスタイルシートを後から読み込むように指定できます。

<head>
  <link rel="stylesheet" href="critical-styles.css">
  <link rel="preload" href="non-critical-styles.css" as="style" onload="this.rel='stylesheet'">
</head>

○スムーズなページ遷移を実現する

Ajaxを利用してページ遷移をスムーズにする際に、CSSを後から読み込むことで、ページ遷移時に適切なスタイルを適用できます。

まず、次のようにAjaxを使ってページ遷移を行う基本的なHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Ajax Page Transition</title>
  <link rel="stylesheet" href="common-styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <nav>
    <a href="page1.html">Page 1</a>
    <a href="page2.html">Page 2</a>
  </nav>
  <div id="content"></div>

  <script>
    $(document).ready(function() {
      $('nav a').click(function(e) {
        e.preventDefault();
        const url = $(this).attr('href');
        
        $('#content').load(url + ' #content > *', function() {
          // CSSを後から読み込む処理
        });
      });
    });
  </script>
</body>
</html>

次に、各ページで必要なCSSファイルを後から読み込む処理を追加します。

$('#content').load(url + ' #content > *', function() {
  const pageCss = url.replace('.html', '.css');
  $('<link rel="stylesheet" href="' + pageCss + '">').appendTo('head');
});

これで、ページ遷移時に適切なCSSが読み込まれ、スムーズなページ遷移が実現できます。

○ユーザーの設定に基づいてテーマを変更する

ユーザーが設定できるテーマ機能を実装する際に、選択されたテーマに応じてCSSを後から読み込むことができます。

<select id="theme-selector">
  <option value="default">デフォルト</option>
  <option value="dark">ダーク</option>
</select>

<script>
  $('#theme-selector').change(function() {
    const selectedTheme = $(this).val();
    const themeCss = 'theme-' + selectedTheme + '.css';
    $('<link rel="stylesheet" href="' + themeCss + '">').appendTo('head');
  });
</script>

上記のコードでは、テーマが選択された際に対応するCSSファイルが読み込まれ、ページのスタイルが変更されます。