![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
とある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ベストアンサー
- 回答日時:
> CSSからCSSを読みこんでいるのでしょうか?
その通りです。
> 何かメリットがあるのでしょうか?
@importを使うメリットとして
1.CSSファイルが別サーバにある場合に速度が速くなる…ことがあるらしい
(<link rel="stylesheet" href="http://image.hoge.net/css/import.css" type="text/css" media="all" />みたいな場合?)
2.importハックという技術が使える
(と言っても今時それに該当するブラウザ自体が少ないですが)
3.大量にCSSファイルがある場合、メンテナンスが少し楽。
(新しいhtmlファイルを作った際などに効果があると思われる)
4.「そう簡単にCSSファイル見せるかぃ!」と思って扱える
(ソースの表示から気持ち追いづらい)
などがあるのかな?と思います。
実際はCSSファイルから都度@importの分、通信が発生するため
普通は遅くなります。
当然、その分レンダリングは遅くなります。
明確な理由がない限り、デメリットの方が多いと思います。
> なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか?
一つずつ読みこませる方法でよいと思いますよ。
No.1
- 回答日時:
私は@importはあまり使用しませんが、@importの便利なのは、メンテナンスが容易と認知されているからでしょう。
@importを利用して外部CSSを効率良く管理する方法 | アフィリエイト日記 ( http://business-affiliate.net/webdesign-css/impo … )
に書かれています。
ですが、そもそもの原因は、スタイルシートを巨大にしてしまうことですからね。
私は
[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を効率良く管理する方法 | アフィリエイト日記」はとても、わかりやすい説明でした。
ありがとうございます!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- Ruby htmlの記述で link rel=stylesheet href=ress.cssの指定をする l 1 2023/04/02 21:15
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
外部CSSの記述方法
-
css の適用について
-
CSSでPC用、他のスマホ用、PC用...
-
PHPでHPを書く際のCSSが適応さ...
-
スタイルシート(CSSスタイル)...
-
styleswitcherについて(ページ...
-
PrettierのHTMLの記述変更 link...
-
HTML内の{}の意味
-
スタイルシートファイルのファ...
-
cssで、ボタンのテキスト部分を...
-
どうすればなるんですか?
-
外部ファイルでのスタイルシー...
-
CSSを勉強したいのですが…
-
CSSのことで教えてください
-
htmlについて
-
h1タグについて教えてください。
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
サイトを作る時のcssファイルは...
-
複数のhtmlで同じcssファイルを...
-
ディレクトリ構成【「common」...
-
範囲指定印刷での位置(css)
-
cssで、ボタンのテキスト部分を...
-
スタイルシート(CSSスタイル)...
-
定数の定義とかはできますか?
-
cssが反映されません
-
エクセルファイルにCSSを読み込...
-
Dreamweaver のテンプレートで...
-
cssファイルを階層の異なるHTML...
-
一部のページにデフォルトCSSを...
-
ブラウザでプレビューでCSSが反...
-
ドキュメントルートより上の階...
-
HTMLの CSSのファイルというの...
-
CSSファイルの分け方皆様はどの...
-
<LINK> の ID の属性値
-
[Dreamweaver8]テンプレートに...
おすすめ情報