@sa_meichanposted at 2023-03-02

linkタグで読み込む順番について

Q&A

解決したいこと

linkタグの記述する順番について
Googleフォントや、CDNのCSSを読み込むlinkタグは
reset.css前に書いてもいいのか
reset.cssの後に書くべきものなのか伺いたいです。
表示はどちらも問題なくできるのですが
出来ればこの順番のほうが望ましい、
この順番が基本などの決まりがあれば教えていただきたいです。

例）

発生している問題・エラー

エラーは出ていません

該当するソースコード

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <title></title>

　<link rel="icon" href="/icon/favicon.ico">
  <!--Googleフォント-->
  <link href="https://fonts.googleapis.com/css?family=Alex+Brush%7CNoto+Serif+JP&display=swap" rel="stylesheet">
  <!--スライドショーCSS-->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">

  <!--CSSファイル-->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

</head>

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
linkタグ　順番　などで検索しましたが、headタグ内に入れるべきタグの順番のみで
Googleフォントなどをどこに書くのかがわかりませんでした。
基本的なところだと思いますが、ご享受いただければ幸いです。

2Answer

@atsutama posted at 2023-03-02

一般的には、外部リソースを読み込むlinkタグの順番は、以下のようなルールに従うことが望ましいです。

Reset CSSを読み込む前には何も読み込まない。
Reset CSSを読み込んだ後に、ベースCSS（基本的なスタイルを定義するCSS）を読み込む。
ベースCSSの後に、外部リソースのCSSを読み込む。
JavaScriptを読み込む場合は、CSSよりも後に読み込む。

これらのルールは、CSSファイルの読み込み順序がスタイルの適用順序に影響を与えるため、スタイルの適用に一貫性を持たせるために重要です。

ただし、GoogleフォントやCDNのCSSのような外部リソースは、通常、ブラウザのキャッシュによって高速化されるため、読み込み順序が変更されても大きな影響はない場合があります。
しかし、できるだけルールに従うことが望ましいとされています。

したがって、GoogleフォントやCDNのCSSを読み込むlinkタグは、reset.cssの後に書くことが一般的に推奨されます。ただし、実際の表示に影響がない場合は、順序を変更しても問題ありません。

0Like

Comments

@sa_meichan
Questioner
回答ありがとうございます！とても分かりやすいです。

This answer has been deleted for violation of our Terms of Service.

Are you sure you want to delete the question?