• ベストアンサー

cssを使ったときのhtmlのファイル置き場

素朴な疑問なんですが、スタイルシートでサイトを作った場合、htmlファイルはどこに配置していますか? フォルダの仕分けをしてファイル管理をするのが普通だと思うんですが、 「css」「ime」「flash」「html」がそれぞれあって、各フォルダに納めリンクを付けてアップしますよね。 で、「html」はフォルダに入れずに「css」フォルダの直下にファイルを置くのがベストなのか、 それとも「html」のフォルダを作って管理した方がベストなのか・・・、みなさんはどのようにされていますか? 「html」をフォルダに入れてcssのリンク先指定をすると、 <link rel="stylesheet" href="../css/****.css" type="text/css" />                  ↑↑              これを追加しないとくずれるのですが、 「html」をフォルダに入れず「css」フォルダの直下に置くと「../」を省いてもレイアウトくずれはありません。 「html」フォルダを作って管理した方が、ページが増えることを前提にするとベストとは思うのですが、皆さんのご意見、またやり方を教えていただけると幸いです。 もっとスマートなやり方があると思うのですが浮かばないので助けてください!よろしくお願いします。

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

  • ベストアンサー
  • Lazy_Dogg
  • ベストアンサー率64% (9/14)
回答No.2

共有するcssは絶対パスで指定した方が楽だと思います。 私の場合htmlをどこに配置するかというより、 htmlの内容によってルートから階層化して配置していますので、 相対パスだと他からコピーして新規htmlを作成する時に面倒ですし、 ../../../css/****.css なんて事になって、 「あれ、何階層目だったっけ?」となったりしますので、 絶対パスで指定しています。 cssの他に、Script関連とか、複数のhtmlで共通して 使用する画像ファイルは特定のフォルダに格納して絶対パスで指定しています。 html間のリンクは相対パスで指定しています。 確実に特定のhtmlにしか適用しないcssの場合は、 htmlとファイル名を同じ(aaa.htm, aaa.css)にして格納する事はあります。 他のhtmlに使う可能性があるなと思う場合はcssフォルダに格納、絶対パス指定です。

Kkanngo
質問者

お礼

ご回答ありがとうございます! やっぱり絶対パスの方が都合がよさそうですね。 一個試しに相対パスで作ってみたら、どうもしっくりこなくて「みんなどうしているんだろう」という素朴な疑問から質問させていただきました。 ファイルというか、サイトの構成をもう一度仕切りなおししてファイルの管理を見直します。 どうもありがとうございました!

その他の回答 (1)

noname#210211
noname#210211
回答No.1

>「css」「ime」「flash」「html」がそれぞれあって、各フォルダに納めリンクを付けてアップしますよね。 しません。 そんなの個人の自由ですよ。(imeはなんなのでしょう・・・)ファイルが多ければディレクトリで管理することもありますが大してファイルもないのにディレクトリを作るのは無駄です。ディレクトリだって容量食うんですから。 すべてのファイルにリンクさせたいファイルは基本的に一番上の階層におきます。(ウエブサイトのトップページがあるところ)そのうえリンクは絶対パスで表記する。私はめんどくさがりなので元あるファイルをコピーして使うためディレクトリが違うところに置くファイルの場合絶対パスじゃないと直さなきゃいけないので。

Kkanngo
質問者

お礼

早速のご回答ありがとうございます。 アップ時のファイル管理は確かに個人の自由ですよね。失礼しました。 ファイルによっては相対パスか絶対パスか使い分ける・・・、ってことですね。 ファイルの管理方法、ヒントをいただきました。参考にして調整します。ありがとうございました!

関連するQ&A

  • 外部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を外部ファイル

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

  • CSS のときのヘッダの記述

    <link rel="stylesheet" href="style.css" type="text/css" /> の link rel = の ●「 rel 」って何の省略なのでしょうか? また、 ●href は Hyper link REFerence の略でしょうか?

    • ベストアンサー
    • HTML
  • CSSの読み込み開始までラグがあります

    header.php、main.php、footer.phpの3ファイルを作成して、 index.phpに include './header.php'; include './main.php'; include './footer.php';などとして読み込ませました。 cssファイルは、header.phpの<head>に <link rel="stylesheet" type="text/css" href="header.css"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="footer.css"> の形で記述されています。 javascriptがあり、これも同様に<head>に記述されています。 以上のファイルはすべて同じフォルダ内にあり、これをlocalhostで表示させました。 これをchromeで要素を検証してみたところ、 cssの読み込み開始までに2秒近いラグがあります。 このラグの考えられる原因は何があるでしょうか。 どなたか心当たりのある方、教えてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • インラインフレーム内のcssを親フレームに適用する

    インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6~8と、Firefoxを想定しています。

  • CSSについて

    どうもこんばんわ 現在CSSについて勉強中です 色々なサイトへ行ってCSSを眺めてるんですが <link rel="stylesheet" type="text/css" href="sample.css" media="all" /> こうゆうHTMLファイルのヘッダーに記述されていないCSSは見れないんでしょうか? よろしくお願いします~^0^

    • ベストアンサー
    • CSS
  • プリント用CSSについて

    いつもお世話になります。 プリント用のCSSを作成しようと思うのですが、 複数記述してもエラーは出ないのでしょうか? 説明がうまくないので具体例を書かせていただきます。 “a.css”“b.css"の各々のプリント用cssを “aprint.css”と“bprint.css"とした場合に <link rel="stylesheet" href="css/a.css" type="text/css" media="all"> <link rel="stylesheet" href="css/b.css" type="text/css" media="all"> <link rel="stylesheet" href="css/aprint.css" type="text/css" media="print"> <link rel="stylesheet" href="css/bprint.css" type="text/css" media="print"> この記述で不具合はないものかと悩んでいます。 それともa,bを統合して“c.css”という新たなものを作り、 プリント用“cprint.css”を設けるべきでしょうか? できれば複数記述できると助かるのですが。 要領を得ない質問ですみませんが、ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。

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

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

    • ベストアンサー
    • HTML
  • type="text/css"

    <link rel="stylesheet" type="text/css" href="http://web.fc2.com/css/index.css"> と <link rel="stylesheet" href="http://web.fc2.com/css/index.css"> では意味同じですか? type="text/css"は省略したほうがいいのでしょうか? しない方が良いのでしょうか?

    • ベストアンサー
    • CSS
  • 一部のページにデフォルトCSSを読み込ませない方法

    一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。

    • 締切済み
    • CSS