こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

外部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にする意味が無いと思うのですが
やはり、そうでしょうか?


うまく、説明が出来ないのですが、どなた様かご指導の程よろしくお願いします。

投稿日時 - 2009-08-02 19:29:15

QNo.5176354

すぐに回答ほしいです

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

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

./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"と書けばリンクされます。

投稿日時 - 2009-08-04 00:03:14

補足

ken_tyan様
この度はご親切にご指導を頂きまして誠にありがとう御座います。
初心者の私には本当に助かりました。この度結論と致しまして、背景画像やチエックマーク画像全て表示されました。ありがとう御座いました
ですが、まだ私は階層の事で少し悩んでしまいます。
今一度フォルダ構成をご説明させて頂きたいのですが以下のようになっております。
ツリー表示の書き方は私にはちょっと、無理そうで、文章でご説明をさせてください。

Wフォルダの中に、index.html
同じくWフォルダの中に、aフォルダ、このaフォルダの中にtest1.htmlが入っております。
同じくWフォルダの中に、imgフォルダ、cssフォルダが入っております。


そこで、私はindex.htmlに以下の記述をしました。
よろしければ、ご覧になって下さい。
<link href="css/1.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/common.css" rel="stylesheet" type="text/css" media="all" />

上記の階層についてなのですが、同じWフォルダの中にindex.htmlとcssフォルダがあるため
上記の記述でリンクされるという事でよろしいのでしょうか?

大変お手数では御座いますが
ご指導の程よろしくお願い致します。


次に、私はtest1.htmlに以下の記述をしました。
よろしければ、ご覧になって下さい。
<link href="../css/common1.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/toiawase.css" rel="stylesheet" type="text/css" media="all" />

上記の階層についてなのですが、test1.htmlはaフォルダに入っているために
上記の記述でリンクされるという事でよろしいでしょうか?
../は、今回で言うと、aフォルダの事で、aフォルダ/cssフォルダ/common1.cssでリンクが
されるという事でよろしいのでしょうか?


大変お手数では御座いますが
ご指導の程よろしくお願い致します。



そして私は、htmlの記述にばっかり気をとられてcssの記述を全く気にしていませんでした。
今までは、<head>~</head>に記述をしていたため、気にしていなかったのですが外部cssにすることにより
background-image:url(img/back.png);やbackground-image:url(../img/back.png);を、cssフォルダと
imgフォルダの位置を考えて、修正するところは修正しなければならなかったわけですね。
今頃、気が付きました。

上記の場合でも../はcssフォルダの事を言っており、
(css/img/back.png); 先のような意味合いでよろしいのでしょうか?

今回、画像が表示されない件で困っておりましたが、cssの記述を(img/back.png);から
(../img/back.png);に、変更したところ画像が表示されました。


大変お手数では御座いますが
ご指導の程よろしくお願い致します。


この度は、ご丁寧にご指導賜りまして誠にありがとう御座いました。

投稿日時 - 2009-08-05 06:51:19

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(8)

■階層ディレクトリにおける相対ファイル参照
自分自身から見てどの位置にあるか現しますので、cssの場合でも背景画像の指定など同様に作用します。

../は一つ上の階層を現わす事だけを知れば、全て解決できると思います。
なお./は、なにも記述していない場合と同じです(同じ階層です)

これは、UNIX系OSに共通しますのでプログラムを書くとき、SHELLからのファイル操作なども良く使いますのでかならず覚える必要があります。

投稿日時 - 2009-08-08 02:07:26

お礼

ken_tyan様
この度は、ご指導頂きまして真にありがとう御座います。
とても勉強になりました。
又、ご縁が御座いましたときはご指導賜りましたら幸いで御座います。
ありがとう御座いました。

投稿日時 - 2009-08-09 03:19:02

ANo.6

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

> 再度改めて現在の状況を記載させて頂きたく

いや、結局また同じ事を繰り返しておられます(あそこまで敢えて書かせて頂いたのにはい・いいえも無視されてしまいましたし…せめて私や他の方が回答中で使っている様なツリー構造をまねしてでも書いてくれるというお気持ちはないのでしょうか?)から、お答えするのも同じ事しかないです。私としては全てもうお答えさせて頂いた事ばかりです。
残念ですが、私がNo.4で回答や確認要求や指摘させて頂いた事は、何一つ理解して頂いてない様ですね…というより日本語が通じてないんでしょうか?また「よろしければ拝見してみてください。」というおかしな日本語使われてますし、もしかして日本語ネイティブの方ではないのでしょうか?であれば、技術の理解の問題ではなく、日本語文章の理解の問題になってしまいますので、私の手には負えません。
このままでは無限ループになるばかりですので、すみませんがこれ以上お役に立てる事はない様です。

> 階層の部分を良く理解していないようです。

理解して下さい。

> htmlに画像を表示させようと考え、(省略)と安易に理解できるのですが、何故かこれが外部cssとなると、
> 相対パスが何だか実行しているうちに分からなくなってきてしまいました。

全く同じ事ですから。「相対パスが何だか」とか仰ってる状態のままでは、多分サイト制作は困難を極めます。時間をとって勉強なさって基本を理解できるまで待つか、商用サイトを早く立ち上げたいのであれば誰かプロの方にお金払って作ってもらうか、どちらかにされた方が良いと思います。

投稿日時 - 2009-08-03 23:21:24

お礼

abril様
この度は、色々とご指導を頂きましてありがとう御座いました。
そして、聊か不愉快な思いをさせてしまったようです。本当に大変失礼致しました。外部ファイルの事になると何故か分からなくなることがあり、大変ご迷惑をお掛けしてしまいました。この度は失礼致しました。
深くお詫び申し上げます。abril様から頂いたご回答に付きましても
もちろん、良く拝見させて頂き、自分自身で良く考えもしましたが
cssを外部にした場合のhtmlへの記述方法のことしか私の頭に無く
何故、これでリンクされないんだろう?といった事だけに悩み
頂戴したご指導について、良く理解をしていなかったようできちんと回答も出来なかったようです。
本当に失礼を致しました。
現状ご理解頂けましたら幸いで御座います。

あまりお聞きしたくないかも知れませんが、この度ようやく半分程度でしょうか?自分自身で理解出来た様で、表示されずに困っていた画像全て表示する事が出来ました。
これも、皆様方からご指導を頂けたからこそ、ここまで出来た事で御座います。
この度は、本当にありがとう御座いました。
そして多大なるご無礼大変失礼致しました。
ありがとう御座いました。

投稿日時 - 2009-08-05 07:43:08

ANo.5

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フォルダは全て同一階層にあります。その為、この3フォルダの中に現在ある各ファイル(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フォルダの中に、1フォルダの中に入っているものと同じ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);の部分が異なってしまうのです。
> 1フォルダの中に、imgフォルダを作成してその中に全てのimgを入れているからですね。
> やはりこのような場合には、共通にすることは出来ないのですよね?

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

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

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

投稿日時 - 2009-08-03 18:19:17

補足

abril様。
ご指導ありがとう御座いました。そして大変申しわけ御座いませんでした。正直申し上げて階層の部分を良く理解していないようです。
例えば、htmlに画像を表示させようと考え、imgフォルダの中の更にaaフォルダの中の、kakaka.jpgでしたら
記述は、<img src="../aa/kakaka.jpg" alt="サンプル" width="100" height="120" />等と安易に理解できるのですが、何故かこれが外部cssとなると、相対パスが何だか実行しているうちに分からなくなってきてしまいました。本当にすいませんでした。ここまでご指導をいただいているのに、本当にすいませんでした。

大変恐縮では御座いますが再度改めて現在の状況を記載させて頂きたく
何度も何度も、恐縮では御座いますが再度のご指導お願い出来ませんでしょうか?


フォルダの構成ですが、まずWというフォルダがあります。その中に1というフォルダがあり、その中にトップページになる
index.htmlが入っております。(直下に置きたくないため)
次に、やはりWというフォルダの中に1というフォルダがあり、その中にaというフォルダがあります。その中にはtest1.htmlとtest2.htmlが入っています。

そしてcssファイルは1フォルダの中にcssというフォルダを作成して、その中にindex.html、test1.htmlとtest2.htmlで使用するcssファイルを保存しております。



構成としては上記のようになっております。これで間違いありません。本当にすいませんでした。
何度もお手数をおかけいたしました。
全ての、index.htmlのヘッダー部分や、フォントのPの部分等、全て共通にしたい部分があり
その部分のcssを共通にしたいと考えていたのですが、index.htmlとtest1.html、test2.htmlとで若干cssの記述方法が
異なっていました。やはりこのような場合には、共通にすることは出来ないのですよね?

よろしければ拝見してみてください。
■index.htmlの記述

body{
background-image:url(img/back.png);



■test1.html、test2.htmlの記述

body{
background-image:url(../img/back.png);



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

これは1フォルダの中に、imgフォルダを作成してその中に全てのimgを入れているからですね。
やはりこのような場合には、共通にすることは出来ないのですよね?


よって、私はindex.htmlのヘッダーに適用させるcssをcommonness.css
その他の箇所に適用させるcssを1.cssとしてcssフォルダに保存しました。
そして以下のように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は適用されたようです。本当にご指導ありがとう御座いました。
ですが、background-image:url(img/back.png);で設定している
画像や、その他チエックマーク等の画像のみ表示されないんです。
現在はこれで悩んでおります。






test1.html、test2.htmlのヘッダーに適用させるcssをcommonness1.cssとしてcssフォルダに保存しました。
その他の箇所に適用させるcssをtoiawase.cssとしてcssフォルダに保存しました。
そして以下のようにtest1.htmlに記述しました。

<link href="../css/toiawase.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/commonness1.css" rel="stylesheet" type="text/css" media="all" />



お陰さまで、cssは適用されたようです。本当にご指導ありがとう御座いました。
そして、index.htmlでは表示されなかった背景画像もチエックマーク等も全て表示されました
何度もお手数では御座いますがご教示の程よろしくお願い致します。


確かに前回ご説明させて頂いたところと様々な矛盾点が確かにあります。
私も自分で書いていておかしいと思います。本当にすいませんでした。

私は、cssをWに保存しようか、1に保存しようか正直迷っておりました。
管理をする上でどちらが分かりやすいのだろうか?
様々な、ことを考えておりました。

また、背景画像や、チエックマークが表示されないことから、階層だろうか?
ファイルが無いのだろうか?cssフォルダの中にも表示させる画像を保存しなければならないのだろうか等と
余計な事ばっかり考えて安易に実行をしていたのかも知れません。
それにより、大変ご迷惑、ご面倒おかけ致しました事、深くお詫び申し上げます。
どうも、すいませんでした。

投稿日時 - 2009-08-03 19:34:50

ANo.4

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

CSSファイルの
background-image:url(../img/back.png);
この部分ですが、これは、このCSSファイルから見て、1つ上のディレクトリ(フォルダ)の中の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フォルダの位置関係を明示してください。

投稿日時 - 2009-08-03 18:18:19

補足

outbrave様
ご連絡ありがとう御座いました。

全ては、私の手違いにより皆様に間違ったご報告をしてしまいました。
大変申し訳御座いません。
正確には以下のようになります。


フォルダの構成ですが、まずWというフォルダがあります。その中に1というフォルダがあり、その中にトップページになる
index.htmlが入っております。(直下に置きたくないため)
次に、やはりWというフォルダの中に1というフォルダがあり、その中にaというフォルダがあります。その中にはtest1.htmlとtest2.htmlが入っています。

そしてcssファイルは1フォルダの中にcssというフォルダを作成して、その中にindex.html、test1.htmlとtest2.htmlで使用するcssファイルを保存しております。

保存方法としては1フォルダの中に、imgフォルダ、
index.html、aフォルダ(index.html以外のhtmlページ)のように
なっております。
何度もお手数で御座います。
よろしければご指導の程よろしくお願いします。

投稿日時 - 2009-08-03 20:12:17

ANo.3

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

HTMLファイルと画像ファイルの配置は関係ありません。

CSSファイルには、CSSファイルから見た、画像ファイルの位置を記述します。
ですからHTMLファイルがどのディレクトリにあろうが、問題ないわけです。

投稿日時 - 2009-08-03 16:42:33

補足

outbrave様
ありがとう御座いました。


>CSSファイルには、CSSファイルから見た、画像ファイルの位置を記述します。
ですからHTMLファイルがどのディレクトリにあろうが、問題ないわけです。


上記のようにご指導を頂きましたがすいません?
例えば、1というフォルダがあり、その中にindex.html、imgフォルダ
cssフォルダがあり、index.htmlに反映させたいcssファイルが仮に
test.cssだった場合、htmlへの記述は以下ではないでしょうか?

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


実行してみると、これでcssは反映されるのですが、但しimgに入っている画像が表示されません。img/back.png);やチエックマークの画像などです。

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

上記の記述に、img・・・・と入れる必要があったのでしょうか?
どうも、記述方法が理解出来ずにご迷惑をおかけしております。

ご指導の程よろしくお願い致します。

投稿日時 - 2009-08-03 17:34:41

ANo.2

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でのサンプルの記述でちゃんと反映される筈です。

投稿日時 - 2009-08-02 22:16:04

補足

abril様
いつも大変恐縮では御座いますがご教示頂けませんでしょうか?

フォルダの構成ですが、まずWというフォルダがあります。その中に1というフォルダがあり、その中にトップページになる
index.htmlが入っております。(直下に置きたくないため)
次に、やはりWというフォルダの中にaというフォルダがあります。その中にはtest1.htmlとtest2.htmlが入っています。

そしてcssファイルはWフォルダの中にcssというフォルダを作成して、その中に全てのcssファイルを保存したいと考えております。


構成としては上記のようになっておりますが
全ての、index.htmlのヘッダー部分や、フォントのPの部分等、全て共通にしたい部分があり
その部分のcssを共通にしたいと考えていたのですが、index.htmlとtest1.html、test2.htmlとで若干記述方法が
異なっていました。やはりこのような場合には、共通にすることは出来ないのですよね?

よろしければ拝見してみてください。
■index.htmlの記述

body{
background-image:url(img/back.png);
font-family:verdana, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
}


■test1.html、test2.htmlの記述

body{
background-image:url(../img/back.png);
font-family:verdana, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
}


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

これは1フォルダの中に、imgフォルダを作成してその中に全てのimgを入れているからですね。
やはりこのような場合には、共通にすることは出来ないのですよね?


よって、私はindex.htmlのヘッダーに適用させるcssをcommonness.css
その他の箇所に適用させるcssを1.cssとしてcssフォルダに保存しました。
そして以下のように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は適用されたようです。本当にご指導ありがとう御座いました。
ですが、background-image:url(img/back.png);で設定している
画像や、その他チエックマーク等の画像のみ表示されないんです。そこで
色々と考えてみた結果、cssフォルダの中に指定する画像が入っていないからでは無いかと思い
cssフォルダの中に、1フォルダの中に入っているものと同じimgフォルダを入れてみました。
そうしたところ、無事画像やチエックマーク等が表示されましたが、やはりこのような形で良いものなのでしょうか?





test1.html、test2.htmlのヘッダーに適用させるcssをcommonness1.cssとしてcssフォルダに保存しました。
その他の箇所に適用させるcssをtest1.cssとしてcssフォルダに保存しました。
そして以下のように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" />


上記の../../というのはフォルダの階層だと思いますが、正直申し上げて最初は../に記述をしてしまいました。
したところ、表示されなかったため、もしかしたらtest1.html、test2.htmlはaフォルダに保存しているからでは無いかと思い
上記のように記述をしました。



お陰さまで、cssは適用されたようです。本当にご指導ありがとう御座いました。
ですが、どうしても分からないのですが、background-image:url(../img/back.png);で設定している
画像や、その他チエックマーク等の画像のみ表示されないんです。
index.htmlとtest.htmlでは(img/back.png);と(../img/back.png);が異なるため、きっとそのあたりの
何かが間違えているのではと思っているのですが、そしてcssフォルダの中に新たに11というフォルダを作成して
その中にimgフォルダを作成して、表示されない画像を保存してみたのですが、やはり表示されませんでした。

何度もお手数では御座いますがご教示の程よろしくお願い致します

投稿日時 - 2009-08-03 15:20:55

ANo.1

【質問番号: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ファイル内から正しいパスで参照する、という事です。

投稿日時 - 2009-08-02 20:27:12

補足

abril様
適切なご指導をこの度もありがとう御座います。まず始めに一度締め切りをさせて頂いた件に付いてですが、何度か補足や回答とやっているうちに「補足をする」とか「回答をする」といったリンクが無くなっていて、これではabril様からもご回答を得られないのではと思い一度締め切らせていただきました。正直、まだ私はその辺がokwave様の利用方法について、良く理解をしていないのかも知れません。
ですが、この度も適切なご指導を頂きまして本当にありがとう御座います。
ですが、大変恐縮ですが再度ご質問をさせていただけませんでしょうか
今回ご指導をいただいたとおりに実行したつもりなのですが、うまく行きません。
まず、Wフォルダの中に1というフォルダがあり、その中にindex.html
次にWフォルダの中にaフォルダがあり、その中にtest1.htmlとtest2.html
次にWフォルダの中にcssフォルダがありその中に、それぞれのcssファイル

上記のようになっているわけですが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が有効になりません。そこで1フォルダの中に直接cssファイルを保存してみました。(cssフォルダには入れていません)

そして記述を以下のようにしてみました。

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

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

上記では、正常とはいえませんが表示される部分は表示されました。

ですが、bodyに設定しているbackground-image:urlや当時abril様に
もご指導をいただきましたが、(文字の左側にチエックマークを入れたいという件)の部分等が表示されませんでした。
きっと何らかの原因で外部cssが読み込まれないからだと思いますが
やはり原因が分かりません。もちろん自分でも色々とやっていますがやはりどうしてもうまくいきません。abril様、本当に何度すいません。
再度ご指導いただけませんでしょうか?

また、外部cssのトップには@charset "shift_jis";な記述が必要なのでしょうか?
インターネットで調べているうちに、このような事が出てきたのですが
いかがなものでしょうか?

何度も、本当にお手数で御座います。よろしくお願い致します。

投稿日時 - 2009-08-03 08:07:54

あなたにオススメの質問