WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス

@import「外部CSSの読み込み」

外部CSSの読み込みは通常<link>で指定しますが、HTML内部の<style>や外部CSS内で「@import」として指定することもできます。

ただし、<link>の方が並行して読込みが行われるため、ページの表示速度(UI)が速く、特別な理由が無い限り<link>で外部CSSを指定することをお勧めします。

CSS Ver.適用要素継承
2.1外部CSS
広告

@importの構文

charset説明
@import "sample.css";
@import url("sample.css");
@import "sample.cssP" print;
@import url("sample.css") print;
@import "外部CSS" メディア;
@import url("外部CSS") メディア;
CSSファイルに相対パスを指定する場合は「@import」を
定義したCSSファイルからの位置となります。
「../sample.css」は1つ上のパス

パスの指定

@import のサンプル


---- 【HTML】 -----------------------------------
<link href="sample1.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import "choku2.css";   /* HTMLからimportで外部CSSを指定 */
  .c1 { color : blue ; }
</style>
~
<p class="c1">【html定義】あいうえお</p>
<p class="c1-c2">【html内の@import】あいうえお</p>
<p class="s1">【Sample1定義】あいうえお</p>
<p class="s1-s2">【Sample2定義】あいうえお</p>
<p class="s1-s2-s3">【Sample3定義】あいうえお</p>

--- 【外部CSS:choku2.css】 --------------------
.c1-c2 { color : yellow; }

--- 【外部CSS:sample1.css】 --------------------
@import "sample2.css";   /* さらに外部CSSを指定 */
.s1 { color : red; }

--- 【外部CSS:sample2.css】 --------------------
@import url(sample3.css);   /* さらに外部CSSを指定 */
.s1-s2 { color : green; }

--- 【外部CSS:sample3.css】 --------------------
.s1-s2-s3 { color : purple; }

【html定義】あいうえお

【html内の@import】あいうえお

【Sample1定義】あいうえお

【Sample2定義】あいうえお

【Sample3定義】あいうえお

上記サンプルをChromeのデバッグ画面で確認すると、以下のように認識されています。

charset

「sample1」は「ゴシック」、「sample2」は「明朝」として認識されていますが、「sample3」はcharset(文字コード)が合っていないため文字化けして正常に認識していません。

ページTOP

留意事項

<link>タグと「@import」ではCSSの読み込み方法が異なるため、ページの表示速度に影響が発生する可能性があります。


■■■■■ 例1)すべて<link>で定義する場合 ■■■■■
<link href="choku2.css" rel="stylesheet" type="text/css">
<link href="sample1.css" rel="stylesheet" type="text/css">
<link href="sample2.css" rel="stylesheet" type="text/css">
<link href="sample3.css" rel="stylesheet" type="text/css">

■■■■■ 例2)@importで定義する場合 ■■■■■
<link href="sample1.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import "choku2.css";   /* HTMLからimportで外部CSSを指定 */
</style>
--- 【外部CSS:choku2.css】 --------------------
.c1-c2 { color : yellow; }
--- 【外部CSS:sample1.css】 --------------------
@import "sample2.css";   /* さらに外部CSSを指定 */
.s1 { color : red; }
--- 【外部CSS:sample2.css】 --------------------
@import url(sample3.css);   /* さらに外部CSSを指定 */
.s1-s2 { color : green; }
--- 【外部CSS:sample3.css】 --------------------
.s1-s2-s3 { color : purple; }
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン