外部cssの記述方法について

Question

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

noname#119957 · Accepted Answer

■あなたの疑問点は「相対ファイル参照」を学べば解決できます。

./index.html中にcssファイルを参照させる場合は以下の通り。
（./は現在のディレクトリを現します。）

■cssディレクトリがindex.htmlと同じフォルダに有る場合は
<head>
<link href="css/commonness.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/1.css" rel="stylesheet" type="text/css" media="all" />　
</head>

の順で書いてください。
<head>
<link href="./css/commonness.css" rel="stylesheet" type="text/css" media="all" />
<link href="./css/1.css" rel="stylesheet" type="text/css" media="all" />　
</head>
でもかまいません。（./は任意）

cssは、オーバーライド（上書きされますので、同じものは後に指定されたものが有効となります。）されますので、共通となるものは先に宣言してください。

■../はひとつ上のディレクトリの指定となり。../../は二つ上のディレクトリの指定となります。リンク（ファイル参照）はhtmlファイル（自分自身）のある位置から相対的に指定できます。
従って、a/test.html中の場合link href="../css/xxx.css"と書けばリンクされます。

noname#119957 · Answer

■階層ディレクトリにおける相対ファイル参照
自分自身から見てどの位置にあるか現しますので、cssの場合でも背景画像の指定など同様に作用します。

../は一つ上の階層を現わす事だけを知れば、全て解決できると思います。
なお./は、なにも記述していない場合と同じです（同じ階層です）

これは、UNIX系OSに共通しますのでプログラムを書くとき、SHELLからのファイル操作なども良く使いますのでかならず覚える必要があります。

abril · Answer

No.5の補足を読みました。

> 再度改めて現在の状況を記載させて頂きたく

いや、結局また同じ事を繰り返しておられます（あそこまで敢えて書かせて頂いたのにはい・いいえも無視されてしまいましたし…せめて私や他の方が回答中で使っている様なツリー構造をまねしてでも書いてくれるというお気持ちはないのでしょうか？）から、お答えするのも同じ事しかないです。私としては全てもうお答えさせて頂いた事ばかりです。
残念ですが、私がNo.4で回答や確認要求や指摘させて頂いた事は、何一つ理解して頂いてない様ですね…というより日本語が通じてないんでしょうか？また「よろしければ拝見してみてください。」というおかしな日本語使われてますし、もしかして日本語ネイティブの方ではないのでしょうか？であれば、技術の理解の問題ではなく、日本語文章の理解の問題になってしまいますので、私の手には負えません。
このままでは無限ループになるばかりですので、すみませんがこれ以上お役に立てる事はない様です。

> 階層の部分を良く理解していないようです。

理解して下さい。

> htmlに画像を表示させようと考え、（省略）と安易に理解できるのですが、何故かこれが外部cssとなると、
> 相対パスが何だか実行しているうちに分からなくなってきてしまいました。

全く同じ事ですから。「相対パスが何だか」とか仰ってる状態のままでは、多分サイト制作は困難を極めます。時間をとって勉強なさって基本を理解できるまで待つか、商用サイトを早く立ち上げたいのであれば誰かプロの方にお金払って作ってもらうか、どちらかにされた方が良いと思います。

abril · Answer

No.1-2です。

…どうも補足頂く度に与えられる情報が微妙に異なっていること、そしてこちらが確認の為に「こうなっているのですね？」と聞いた事に対する明確なレスが頂けないこと、その為こちらとしても現在の質問者様の「正確な」状況を把握するのが難しくなっております。

No.2での補足に基づき、もう一度、現状の各ファイルの位置関係を確認させて頂きます。

> Wというフォルダがあります。その中に1というフォルダがあり、その中にトップページになるindex.htmlが入っております。
> Wというフォルダの中にaというフォルダがあります。その中にはtest1.htmlとtest2.htmlが入っています。
> cssファイルはWフォルダの中にcssというフォルダを作成して、その中に全てのcssファイルを保存したい

この「説明」の示す通りであれば、現在の構造は以下の様になっている筈です。
それに対して”はい”か”いいえ”でお答え下さい。

W
├ 1
│ └ index.html
├ a
│ ├ test1.html
│ └ test2.html
├ css
│ ├ commonness.css…全てのページに共通に適用したいcss
│ ├ 1.css…1内のindex.htmlファイルにのみ出てくるスタイル部分をまとめる
│ ├ test1.css…a内のtest1.htmlにのみ出てくるスタイル部分をまとめる
│ └ test2.css…a内のtest2.htmlにのみ出てくるスタイル部分をまとめる

以下は、お答えが”はい”の場合です。

index.htmlが直下に収められている1フォルダ、test1.htmlやtest2.htmlが直下に収められているaフォルダ、各CSSファイルが直下に収められているcssフォルダは全て同一階層にあります。その為、この３フォルダの中に現在ある各ファイル（HTML、CSS共に）の相対的位置関係（相対パス）はいずれも、「自身が直下に収められているフォルダと同階層にある別のフォルダの直下にあるファイルどうし＝自身から見て一つ上がった階層の別フォルダの直下にある」になります。
なので、この場合はindex.html、test1.html、test2.html、から各cssファイルを参照する記述は：

<link href="../css/各CSSファイル名" rel="stylesheet" type="text/css" media="all" />

が正解です。

…なのですが、一方で下記の様にも仰っているので、辻褄が合っていません。

> 以下のようにindex.htmlに記述しました。
> <link href="../css/1.css" rel="stylesheet" type="text/css" media="all" />
> <link href="../css/commonness.css" rel="stylesheet" type="text/css" media="all" />
> cssは適用されたようです。

これは上記の構造に沿った記述ですし、それでCSSが適用されているのですから、index.htmlについては問題ありませんが、問題はtest1.htmlとtest2.htmlです。

> そして以下のようにtest1.htmlに記述しました。
> <link href="../../css/test1.css" rel="stylesheet" type="text/css" media="all" />
> <link href="../../css/commonness1.css" rel="stylesheet" type="text/css" media="all" />
> お陰さまで、cssは適用されたようです。

このパスでCSSが適用された、というのであれば、test1.htmlとtest2.htmlが収められているaフォルダは1フォルダやcssフォルダとは「同階層にはない」という事になり、先程のご説明と明らかに矛盾しています。aフォルダの位置は更に1階層下になければなりません。

> もしかしたらtest1.html、test2.htmlはaフォルダに保存しているからでは無いかと思い

aフォルダに保存している事が問題なのではなく、aフォルダが「どの階層にあるか」が問題なのです。
この「結果」の方が正しいとすると、現在の構造は以下の様になっている筈です。
それに対して”はい”か”いいえ”でお答え下さい。

W
├ 1
│ ├ index.html
│ └a
│　├ test1.html
│　└ test2.html
├ css
│ ├ commonness.css…全てのページに共通に適用したいcss
│ ├ 1.css…1内のindex.htmlファイルにのみ出てくるスタイル部分をまとめる
│ ├ test1.css…a内のtest1.htmlにのみ出てくるスタイル部分をまとめる
│ └ test2.css…a内のtest2.htmlにのみ出てくるスタイル部分をまとめる

以下は、お答えが”はい”の場合です。
この場合、aフォルダは1フォルダの中にありますから、となるとtest1.html、test2.htmlから見たcssフォルダは「自身から見て2つ上がった階層の別フォルダ」です。
ですから、この場合はtest1.html、test2.html、から各cssファイルを参照する記述は：

<link href="../../css/各CSSファイル名" rel="stylesheet" type="text/css" media="all" />

が正解です。

…いったい現状はどちらなんですか？

それから、CSSから参照している背景画像についても相変わらず正しい認識を持っておられない様ですが、No.3様の仰るとおり、外部CSSファイル内で指定している画像については、「そのCSSファイル自身と画像の相対位置関係」さえ正しく記述されていれば、そのCSSファイルを「正しいパスで参照している」HTMLファイルがどこの階層にあろうと、”無関係”です。それが外部ファイルにまとめるメリットの一つでもあるのですから。

> 拝見してみてください。

＃すみません、前から気になっていたのですが「拝見する」という言葉は謙譲語（話し手が相手に対してへりくだって使う）ですから、この場合、こちらに対して丁寧な言葉をお使いになりたいのであれば、「ご覧になってみてください」が妥当でしょう。
＃もっともこういうQ&Aサイトで相互に利害関係があるわけでも面識があるわけでもありませんから、別に「見てください」程度でかまいませんけれど…
＃質問者様は何か商用サイトを運営してらっしゃるそれなりの年齢のお方とお見受けしましたので、この機会にちょっと気をつけられた方が宜しいかと。

> background-image:url(img/back.png);で設定している画像や、その他チエックマーク等の画像のみ表示されない
> cssフォルダの中に指定する画像が入っていないからでは無いかと思い

CSSファイル内で背景画像が上記のパスで記述されているのなら、cssフォルダの下にimgフォルダがなければいけない事になりますので、

> cssフォルダの中に、１フォルダの中に入っているものと同じimgフォルダを入れてみました。
> そうしたところ、無事画像やチエックマーク等が表示されました

こうなるのは当然の結果ですね。

> background-image:url(../img/back.png);で設定している画像や、その他チエックマーク等の画像のみ表示されないんです。

CSSファイル内で指定している相対パスが正しくないからです。「どうしてもわからない」ではなく、表示されない画像の相対パス（ファイル名を含め。以前の回答で拡張子の大文字小文字を間違ったりしてらっしゃった様ですし…）を一つ一つ見直して下さい。

> ■index.htmlの記述
> background-image:url(img/back.png);
> ■test1.html、test2.htmlの記述
> background-image:url(../img/back.png);
> 上記のようにbackground-image:url(../img/back.png);の部分が異なってしまうのです。
> １フォルダの中に、imgフォルダを作成してその中に全てのimgを入れているからですね。
> やはりこのような場合には、共通にすることは出来ないのですよね？

いいえ。「１フォルダの中に、imgフォルダを作成してその中に全てのimgを入れている」のは別に問題ないですし、CSSファイル内で正しいパスで指定さえしていれば、画像がどこにあろうとも、index.htmlでもtest1.html、test2.htmlでもちゃんと表示されます。
上記の様にパスが異なるのは、（階層の異なる）各HTMLファイル内に直接記述をする場合のみです。外部CSSファイルにしてしまえば関係ない事です。

> 上記の../../というのはフォルダの階層だと思いますが、

というお言葉の頼りなさからしても、繰り返し繰り返し同様の質問が続く事からしても、おそらく質問者様は「相対パス」の理屈を未だにきちんと把握されてらっしゃらないと思われます。だから、CSSファイルや画像を参照する際に適切な指定ができないし、こちらの説明や確認の要求に対しても妥当なレスが返せないのでしょう。
以前も書きましたけれど、あやふやなまま「なんとなく」やってても良いことは一つもありませんよ…

outbrave · Answer

まず、今のところHTMLファイルの話は関係ないので除外します。

CSSファイルの
background-image:url(../img/back.png);
この部分ですが、これは、このCSSファイルから見て、１つ上のディレクトリ（フォルダ）の中のimgディレクトリにあるback.pngを参照しています。

imgフォルダとcssフォルダの位置関係が問題です。

imgフォルダとcssフォルダが同じディレクトリ内にあるのならば
background-image:url(../img/back.png);
これで正解です。

W
├ 1
│ └ index.html
│ ├ img
│ │ └ back.png
│ ├ css
│ │ └ commonness.css

imgフォルダとcssフォルダの位置関係を明示してください。

outbrave · Answer

>background-image:url(../img/back.png);の部分が異なってしまうのです。

HTMLファイルと画像ファイルの配置は関係ありません。

CSSファイルには、CSSファイルから見た、画像ファイルの位置を記述します。
ですからHTMLファイルがどのディレクトリにあろうが、問題ないわけです。

abril · Answer

No.1です。
一部ツリー構造の表示が適切ではなかったので、念の為訂正しておきます。

W
├ 1
│ └ index.html
│ ├ a
│ │ ├ test1.html
│ │ └ test2.html
│ ├ css
│ │ ├ commonness.css…全てのページに共通に適用したいcss
│ │ ├ 1.css…1の直下のindex.htmlにのみ出てくるスタイル部分をまとめる
│ │ └ a.css…a内のHTMLファイルにのみ出てくるスタイル部分をまとめる

この構造に「実際」なっているのであれば、No.1でのサンプルの記述でちゃんと反映される筈です。

abril · Answer

【質問番号：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ファイル内からの記述は：

<link href="css/commonness.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/1.css" rel="stylesheet" type="text/css" media="all" />

となります。
ちなみに、外部CSSファイルをHTMLファイル内から複数参照する場合、「複数のCSSファイルに同一のセレクタのスタイル（例えばどちらのファイルにも同じclass名の記述があるなど）があった場合は、より後に参照された（記述の順番が後）ファイル内での指定の方が有効になる（プロパティの指定がぶつかっている場合、後者の値で上書きされる）」為、普通は共通のスタイルのCSSファイルが先、個別のスタイルのCSSファイルが後、の順番で記述します。なので上記サンプルの順番の方が妥当です。

一方、
test1.htmlやtest2.htmlから見たcssフォルダは、自身が直下に収められているaフォルダと同階層にあり、そのcssフォルダの直下のCSSファイルを参照するのですから、test1.htmlやtest2.htmlからみて、各CSSファイルは「自身から見て一つ上がった階層の別フォルダの直下にある」のですから、test1.htmlやtest2.htmlファイル内からの記述は：

<link href="../css/commonness.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/a.css" rel="stylesheet" type="text/css" media="all" />

とならねばなりません。

> cssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか？

間違ってません。適切です。

> 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、
> いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが

その通りです。それでは外部CSSファイルにする利点が全く生かされていません。共通するファイルはあくまで一つ、それを各HTMLファイル内から正しいパスで参照する、という事です。

外部cssの記述方法について

■あなたの疑問点は「相対ファイル参照」を学べば解決できます。

この回答への補足

■階層ディレクトリにおける相対ファイル参照

No.5の補足を読みました。

No.1-2です。

この回答への補足

まず、今のところHTMLファイルの話は関係ないので除外します。

この回答への補足

>background-image:url(../img/back.png);の部分が異なってしまうのです。

この回答への補足

No.1です。

この回答への補足

【質問番号：5165536】の方でCSSの外部ファイル化について回答させて頂いたものです。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング