CSSファイルは、どこから読み込んでいるのか？

質問

とあるWebサイトのソースを見たら、headの部分が次のようになっておりました。
<link rel="stylesheet" href="css/import.css" type="text/css" media="all" />

これは、普通に記述されていると思いますが、href="css/import.css"を開いてみたら、次の記述しかありませんでした。

@charset "utf-8";
/* CSS Document */

@import "common.css";
@import "top.css";
@import "text.css";
@import "faq.css";
@import "form.css";

これは、どういうことでしょうか？
CSSからCSSを読みこんでいるのでしょうか？

なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか？
何かメリットがあるのでしょうか？

回答No.2

bvltiggeari · ベストアンサー

> CSSからCSSを読みこんでいるのでしょうか？
その通りです。

> 何かメリットがあるのでしょうか？
@importを使うメリットとして
１．CSSファイルが別サーバにある場合に速度が速くなる…ことがあるらしい
　　（<link rel="stylesheet" href="http://image.hoge.net/css/import.css" type="text/css" media="all" />みたいな場合？）
２．importハックという技術が使える
　　（と言っても今時それに該当するブラウザ自体が少ないですが）
３．大量にCSSファイルがある場合、メンテナンスが少し楽。
　　（新しいhtmlファイルを作った際などに効果があると思われる）
４．「そう簡単にCSSファイル見せるかぃ！」と思って扱える
　　（ソースの表示から気持ち追いづらい）

などがあるのかな？と思います。

実際はCSSファイルから都度@importの分、通信が発生するため
普通は遅くなります。
当然、その分レンダリングは遅くなります。
明確な理由がない限り、デメリットの方が多いと思います。

> なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか？
一つずつ読みこませる方法でよいと思いますよ。

お礼

ありがとうございます！！

一つずつ読みこませていきます！！

回答No.1

ORUKA1951

私は@importはあまり使用しませんが、@importの便利なのは、メンテナンスが容易と認知されているからでしょう。
@importを利用して外部CSSを効率良く管理する方法 | アフィリエイト日記 ( http://business-affiliate.net/webdesign-css/importcss.html )
　に書かれています。
　ですが、そもそもの原因は、スタイルシートを巨大にしてしまうことですからね。

　私は
[HTML1]
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/default.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/dstanderd.css" title="標準">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/topPage.css" title="標準">

[HTML2}
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/default.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/dstanderd.css" title="標準">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/form.css" title="標準">
のようにしています。

お礼

なるほどですね。
「@importを利用して外部CSSを効率良く管理する方法 | アフィリエイト日記」はとても、わかりやすい説明でした。

ありがとうございます！！