質問: 外部cssの記述方法について よろしくお願いします。 cssを外部リンクにしたくご質問をさせて頂きました。 まず、始めにフォルダの構成ですがwフォルダというのがあります。 その中に、1というフォルダがあります。 その1フォルダの中にトップページが入っています (直下に置きたくないため) そのトップページのcssを外部リンクにするために以下の記述を~内にしました。 ←inde.htmlにのみ適用したいcss ←全てのページに共通に適用したいcss 上記の記述で、cssファイルは1フォルダの中に保存しました。これですとcssは適用されるのですが これを1フォルダの中にcssフォルダを作成して、cssファイルを cssフォルダに保存して以下のように記述すると cssが適用されなくなってしまいます。 ←inde.htmlにのみ適用したいcss ←全てのページに共通に適用したいcss また、別のページですが、1フォルダの中にaというフォルダを作成してtest1.htmとtest2.htmlが入っております。 その際ですが、commonness.cssは共通で適用させたく、更にはtest1.htmとtest2.htmlにのみ適用させたいcssもあるのですが htmlへの記述方法がいまいち理解出来ずご質問をさせていただきました。 私は、wというフォルダにcssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか? 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、 いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが やはり、そうでしょうか? うまく、説明が出来ないのですが、どなた様かご指導の程よろしくお願いします。
回答: 【質問番号:5165536】の方でcssの外部ファイル化について回答させて頂いたものです。 その後の補足で「うまく行ってない」事は承知しておりましたので週明けにでも追加回答を、と思っていたのですが...どうも質問者様はちょっとせっかちな様ですね。 で、何でうまく行ってないかというと、単純にcssファイルを参照する際のパスが間違っているからです。 サイトを有る程度作り込んでらっしゃるのですから「相対パス」という概念はご存じですよね?他のhtmlファイルへのリンクや画像の参照の仕方で必ず使用されてらっしゃると思いますが。htmlファイル内から外部cssファイルを参照する際も、それと全く同じで、「現在のhtmlファイルからみてそのcssファイルが相対的にどの位置にあるか」という事を正確に把握して記述しなければならない、というだけの事です。 先の質問の方でも各ファイルのツリー構造を示しましたが、現在は、以下の様になっている、という事ですよね? w ├ 1 │ └ index.html │ ├ a │ │ ├ test1.html │ │ └ test2.html │ ├ css │ ├ commonness.css...全てのページに共通に適用したいcss │ ├ 1.css...1内のhtmlファイルにのみ出てくるスタイル部分をまとめる │ └ a.css...a内のhtmlファイルにのみ出てくるスタイル部分をまとめる であれば、 index.htmlから見たcssフォルダは、自身と同階層にあり、そのcssフォルダの直下のcssファイルを参照するのですから、index.htmlファイル内からの記述は: となります。 ちなみに、外部cssファイルをhtmlファイル内から複数参照する場合、「複数のcssファイルに同一のセレクタのスタイル(例えばどちらのファイルにも同じclass名の記述があるなど)があった場合は、より後に参照された(記述の順番が後)ファイル内での指定の方が有効になる(プロパティの指定がぶつかっている場合、後者の値で上書きされる)」為、普通は共通のスタイルのcssファイルが先、個別のスタイルのcssファイルが後、の順番で記述します。なので上記サンプルの順番の方が妥当です。 一方、 test1.htmlやtest2.htmlから見たcssフォルダは、自身が直下に収められているaフォルダと同階層にあり、そのcssフォルダの直下のcssファイルを参照するのですから、test1.htmlやtest2.htmlからみて、各cssファイルは「自身から見て一つ上がった階層の別フォルダの直下にある」のですから、test1.htmlやtest2.htmlファイル内からの記述は: とならねばなりません。 > cssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか? 間違ってません。適切です。 > 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、 > いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが その通りです。それでは外部cssファイルにする利点が全く生かされていません。共通するファイルはあくまで一つ、それを各htmlファイル内から正しいパスで参照する、という事です。