• ベストアンサー

CSSの2種類の外部ファイル化の仕方について

現在CSSを外部ファイル化しようとしているのですが @import url を使ったやり方と <link rel="stylesheet" type="text/css" href="~.css"> を使ったやり方、どちらを使用してCSSを外部ファイル化しようか迷っています。それぞれの方法には、メリットやデメリットが存在しているのでしょうか?できればそれらの違いを知った上でどちらの方法そ使用するか決めたいのです。ご存知の方、解答よろしくおねがいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • zoo213
  • ベストアンサー率100% (3/3)
回答No.2

@import は、ネスケ4はサポートしていない、比較的新しいコマンドです。どちらを利用してもネスケ4(もしかしたらこの他にもあるかも)を考慮にいれない場合は同じです。通常はlink rel= がスタンダードとしてよく使われています。

samenokoe
質問者

お礼

そうなんですか、link rel の方が一般的なのですね参考になります。なら私もlink要素の方法でCSSを外部ファイル化しようと思います(^^) 解答ありがとうございました。

その他の回答 (1)

noname#12055
noname#12055
回答No.1

ご参考にどうぞ。 http://www.zspc.com/documents/css2/associate/link.html http://www.zspc.com/documents/css2/associate/atimport.html 私はこれしか気にしない。 というか、これがいちばん重要な違いでは?

参考URL:
http://www.zspc.com/documents/css2/associate/link.html,http://www.zspc.com/documents/css2/associate/atimport.html
samenokoe
質問者

お礼

なるほどブラウザの対応状況にちがいがあったのですね、参考URL大変勉強になりました。これでまた少し賢くなった気がします(笑) 解答ありがとうございます(^^)

関連するQ&A

  • CSSを外部ファイル

    CSSを外部ファイルで作成して <link rel="stylesheet" href="○○○.css" type="text/css">で参照したいのですが外部ファイルは H1{color : #000000;} を反映させたいときこれだけ書けばいいのでしょうか。サイトの説明を読んでもよくわかりません。

  • 外部ファイルを読み込んだhtmlをinclude

    外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : (画像などが他にもいっぱい) となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。

    • ベストアンサー
    • PHP
  • 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ファイルを一つずつ読みこませないのでしょうか? 何かメリットがあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSの指定方法

    CSSの指定についてですが、 CSSを指定する方法に@importで指定する方法がありますが、 <link rel="stylesheet" href="style.css" type="text/css"> と指定する方法と比較してどのようなメリットとデメリットがありますか? 記入方法の違いで古いブラウザに適応させないようにできることは知っているのですが、 この他にどのようなことがありますか?

    • ベストアンサー
    • HTML
  • 外部CSSを適用させるための正しいソースコードの書き方

    dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート(test.css)を作成し、それをHTMLファイル(test.html)へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、 <link href="test.css" rel="stylesheet" type="text/css"> 以下のように、「../test.css」と「..」が付いても適用される場合があります。 <link href="../test.css" rel="stylesheet" type="text/css"> 逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか? どっちが正しいのでしょうか? そもそも「..」とは何でしょうか? すみません、根本的なところからわかっていません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部ファイルによるCSSにおいて

    参照側の <link rel="stylesheet" type="text/css" href="x.css" title="xxxx"/> においてtitleをつける意味と使い道を教えてください

    • ベストアンサー
    • HTML
  • 外部cssの記述方法について

    よろしくお願いします。 cssを外部リンクにしたくご質問をさせて頂きました。 まず、始めにフォルダの構成ですがWフォルダというのがあります。 その中に、1というフォルダがあります。 その1フォルダの中にトップページが入っています (直下に置きたくないため) そのトップページのcssを外部リンクにするために以下の記述を<head>~</head>内にしました。 <link href="1.css" rel="stylesheet" type="text/css" media="all" />  ←inde.htmlにのみ適用したいcss <link href="commonness.css" rel="stylesheet" type="text/css" media="all" /> ←全てのページに共通に適用したいcss 上記の記述で、cssファイルは1フォルダの中に保存しました。これですとcssは適用されるのですが これを1フォルダの中にcssフォルダを作成して、cssファイルを cssフォルダに保存して以下のように記述すると cssが適用されなくなってしまいます。 <link href="css/1.css" rel="stylesheet" type="text/css" media="all" /> ←inde.htmlにのみ適用したいcss <link href="css/commonness.css" rel="stylesheet" type="text/css" media="all" /> ←全てのページに共通に適用したいcss また、別のページですが、1フォルダの中にaというフォルダを作成してtest1.htmとtest2.htmlが入っております。 その際ですが、commonness.cssは共通で適用させたく、更にはtest1.htmとtest2.htmlにのみ適用させたいcssもあるのですが htmlへの記述方法がいまいち理解出来ずご質問をさせていただきました。 私は、Wというフォルダにcssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか? 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、 いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが やはり、そうでしょうか? うまく、説明が出来ないのですが、どなた様かご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでの外部ファイル

    こんばんは、いつもお世話になってます HPでの画像の無断転載対策として、CSSで外部ファイルを作り、 そこから呼び出すようにするという方法があることを知りました。 その場合のタグは<link rel="stylesheet" type="text/css" href="./●●.css"> でいいんですよね? そこで質問なのですがCSSファイルを作るのはメモ帳などでと聞きましたが、その時のタグが↓だとすると table.gazou{ background-image:url("●●.jpg"); background-repeat: no-repeat;} これだけ記述すればいいのでしょうか? そしてファイル名.CSSの名前で保存するのでしょうか? そして最後にこのCSSファイルのソースを見られないようにするには、.htaccessなどを使えば大丈夫でしょうか? すごくまとまってない質問でわかりにくいかもしれませんが回答お願いします;

  • 外部ファイルへのリンクについて

    外部ファイルへのリンクについて質問させて下さい。 ソースを見てると時々、 <link rel="stylesheet" href="/style.css?120829" /> というのを時々見かけるのですが、「?120829」は何でしょうか? 只単にCMSで動的に作られたものでしょうか。 管理がしやすいのかな?っと思いまして、 静的サイトでも利用できるのであれば 利用してみたいなと思っております。 何かメリットがあるのでしょうか?

    • ベストアンサー
    • HTML
  • 外部スタイルシートは分ける?

    外部スタイルシートを分けるのかそれともまとめるのか? もしくは分けるべきなのかまとめるべきなのかがわかりません。 index を含む全ページに共通の class 指定があれば、1つの外部でいいですが、 各ページ固有の class 指定があった場合これは分けたほうがいいでしょうか? つまり、 <link href="main.css" rel="stylesheet" type="text/css"> と全ページに置き、全ての指定をここに入れるのか、それとも <link href="main.css" rel="stylesheet" type="text/css"> <link href="a.css" rel="stylesheet" type="text/css"> として共通の指定と、各ページ固有の指定は分けたほうがいいのか、 そのあたりがわからなくて困ってます。 前者だと1つファイルでいいとは思いますが、長くなってしまいますし、 ページによっては必要ない部分まで読み込むことになります。 多分一長一短で好み次第ということにはなるかと思いますが、 実際にどちらの方法でやっていて便利だという経験をお聞かせいただければ、 大変ありがたく思います。よろしくお願いします。

専門家に質問してみよう