【外部CSS】CSSのlinkと@importの違い【現役エンジニアが解説】

PROGRAM

今回は、CSSのlinkと@importの違いについて、それぞれに分け、簡単に解説していきます。

linkでの読込

CSSファイルはHTMLのlinkタグで読み込めます。

linkタグは、href属性にCSSファイルのパスを指定し、headタグ内に書きます。

<link rel="stylesheet" href="hoge.css">

上記のコードでは、hoge.cssのCSSファイルをlinkタグを使って、読み込んでいます。

@importでの読込

CSSファイルは、@importを使うことで、CSSの中から読み込み可能です。

“@import url(CSSファイルのパス)”の形式で指定してCSSファイルを読み込みます。

@import url("hoge.css");

上記のコードでは、hoge.cssというCSSファイルを@importを使い、CSS内で読み込んでいます。

CSSファイルの書き方

CSSファイルを作る際には、HTML上とは異なり、styleタグは不要になります。

また、’@charset “エンコーディング名”‘で使用するエンコーディングも指定しておきます。

@charset "utf-8";

.hoge{
    color:red;
}

上記のコードでは、CSSファイルで、UTF-8のエンコーディングで、hogeというクラスを持つ要素用のスタイルを指定しています。