ここから本文です

@import(CSSファイルの取り込み)に関して

社長キングさん

2011/11/408:33:03

@import(CSSファイルの取り込み)に関して

<style type="text/css">
<!--
@import url(CSSファイルへのURL);
-->
</style>



上記、普通に取り込んだ場合と何が違うのでしょうか?

閲覧数:
612
回答数:
1

違反報告

ベストアンサーに選ばれた回答

pot********さん

2011/11/409:01:17

使う理由としては管理のしやすさがあります。
webページを作る際にphpなどでページの一部を部品化して、header、sidebarなどを読み込んで管理を楽にするのと同じように、CSSも共通で読み込むファイル(たとえばdefault.css)に@importで他のファイルを読み込んでおくと管理が楽になります。

例:1.html〜100.htmlに
<link rel="stylesheet" href="sample1.css" type="text/css">
<link rel="stylesheet" href="sample2.css" type="text/css">
<link rel="stylesheet" href="sample3.css" type="text/css">
<link rel="stylesheet" href="sample4.css" type="text/css">

と書いておいて、どれかを削除したり読み込ませたいものを変更したい場合、1.htmlから100.htmlのファイルすべてのheadを書き換えないといけませんが、

例:1.html〜100.htmlに
<link rel="stylesheet" href="sample1.css" type="text/css">

sample1.cssに
@import url(sample2.css);
@import url(sample3.css);
@import url(sample4.css);

と書いておけば、sample1.cssを書き換えるだけで1.html〜100.htmlで読み込むものを変更することが出来ます。



ただ、linkやstyleに比べて@importで読み込む方法はパフォーマンスが悪いようなので、できるだけlink要素やstyle要素を使った方がいいと思います。

参考:
[css] @importを使うべきでない理由
http://screw-axis.com/2009/06/07/css-importを使うべきでない理由/
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
http://coliss.com/articles/build-websites/operation/css/css-2-ways-...

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる