プロが教えるわが家の防犯対策術！

CSSの外部参照について。

解決済

  • 質問者：von_un
  • 質問日時：
  • 回答数：5件

XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。

初心者です。
いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。ｍ（＿　＿）ｍ

index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。
XHTMLファイルはindex.html,works.htmlで （biography.htmlやaccess.htmlは後でつくります。）、
CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。

この回答にある４つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。
http://detail.chiebukuro.yahoo.co.jp/qa/question …
(次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合
<link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />）

*XHTMLソース
<?xml version="1.0" encoding"utf=8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.d …
<html xmlns=http://www.w3.org./1999/xhtml"
xml:lang="ja" lang="ja">
<?xml version="1.0" encoding"utf=8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.d …
<html xmlns=http://www.w3.org./1999/xhtml"
xml:lang="ja" lang="ja">
<head profile="">
<title>***</title>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<div id="wrapper">
<div id="header">
<h1>***</h1>
</div>
<div id="main">
<ul>
<li class="biography"><a href="#">&gt;&gt; Biography</a></li>
<li class="works"><a href="works.html#works">&gt;&gt; Works</a></li>
<li class="access"><a href="#">&gt;&gt; Access</a></li>
</ul>
</div><div id="footer">
<ul>
<li><a href="#">sitemap</a></li>
</ul>
</div>
</div>

*CSS
body,div,ul,ol,li,h1,p{margin:0;
padding:0;}
body{ text-align:center; min-width:780px;
background:#f5f5f1;
coler:#666666;
fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif;
font-size;62.5%;　　　　　　　　　　　　　　　　 }
h1{display:none;}h1
#wrapper{width:740px; margin:0 auto; text-align:left;}
#main a {height:100px;
color:#ffffff;
font-size:1.8em;
text-tramsform: uppercase;
text-decoration: none;
display: block;}
#main a:hover,a:active{color: #cccccc;}
#main ul{list-style:none;}
#main ul li{padding:5px 0px 5px 0px;}
#header{height:115px;
margin:15% 0 0 0;
background:url(.img/image/blue.gif) no-repeat left center;}
.biography{background:url("blue.gif") no-repeat left center;}
.works{background-image:url(./img/works.gif) no-repeat left center;}
.access{background-image:url(./img/access.gif) no-repeat left center;}
#footer ul li {padding:10px;
display:inline;}
#footer ul {text-align:right;}
#footer p {text-align:center;}

どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： one-moment
  • 回答日時：

連投失礼します。


先ほど記載したものからまた誤字脱字が見つかりましたので差し替えさせていただきます。
まだほかにも誤字脱字があるかもしれません。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

<title>***</title>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

</head>
<body>

<div id="wrapper">
<div id="header">
<h1>***</h1>
</div>
<div id="main">
<ul>
<li class="biography"><a href="#">&gt;&gt; Biography</a></li>
<li class="works"><a href="works.html#works">&gt;&gt; Works</a></li>
<li class="access"><a href="#">&gt;&gt; Access</a></li>
</ul>
</div><div id="footer">
<ul>
<li><a href="#">sitemap</a></li>
</ul>
</div>
</div>

*CSS

div,ul,ol,li,h1,p{margin:0;padding:0;}

body{
text-align:center;
min-width:780px;
background-color:#f5f5f1;
font-color:#666666;
font-family:"Lucida Geande",sans-serif;
font-size;62.5%;
margin:0;
padding:0;
}

h1{
display:none;
}

#wrapper{
width:740px; margin:0 auto; text-align:left;
}

#main a {
height:100px;
font-color:#ffffff;
font-size:1.8em;
text-transform: uppercase;
text-decoration: none;
display: block;
}

#main a:hover{
font-color: #cccccc;
}

#main a:active{
font-color: #cccccc;
}

#main ul{
list-style:none;
}

#main ul li{
padding:5px 0px 5px 0px;
}

#header{
height:115px;
margin:15% 0 0 0;
background:url(.img/image/blue.gif) no-repeat left center;
}

.biography{
background:url("blue.gif") no-repeat left center;
}

.works{
background-image:url(./img/works.gif) no-repeat left center;
}

.access{
background-image:url(./img/access.gif) no-repeat left center;
}

#footer ul li {
padding:10px;
display:inline;
}

#footer ul {
text-align:right;
}

#footer p {
text-align:center;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

one-momentさん
三回の回答、ありがとうございます！！(嫌味ではありません^^
親身になって回答してくれてありがとうございますと、感謝の意です。)
誤字脱字を発見して見やすくソースを書いて頂き、
実はこんなに親身になって答えてくれるのかと驚いている程です。

一回目にworksにリンク出来ないと書きましたが、
メモ帳から書き直してみたら、worksにリンクすることが出来ました。

shumokuさんの返答にも書いたのですが、
CSSが外部参照で反映できなかったのは、
・XML宣言や構成要素をまだ理解していない
・文字のスペルミス
・CSSの保存方法(保存するときに、ファイルの種類→すべてのファイル,
　文字コード→UTF-8にしました。)
・XHTMLに記述するCSSの外部参照<link href="">のミス
だと思います。

colorのことも大して触れていなかったです。
当たり前のことを言いますが、ソースに書く全てがそのままHPに現れますね。
colorにも今後気をつけます。

時間を割いて注意深く見て指導してくださり、本当にありがとうございます。
ｍ(＿　＿)ｍ

通報する
お礼日時：2009/09/16 22:44

No.4

  • 回答者： one-moment
  • 回答日時：

ソースの誤字脱字部分を修正してみました。


ですが、もしかしたら一部用途が変更になっているかもしれません。
colorとしか記載されておらず、font-colorなのかbackground-colorなのかわからなかったりとか、純粋なうち間違いでソースが機能してなかったりとか＾＾；

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

<title>***</title>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

</head>
<body>

<div id="wrapper">
<div id="header">
<h1>***</h1>
</div>
<div id="main">
<ul>
<li class="biography"><a href="#">&gt;&gt; Biography</a></li>
<li class="works"><a href="works.html#works">&gt;&gt; Works</a></li>
<li class="access"><a href="#">&gt;&gt; Access</a></li>
</ul>
</div><div id="footer">
<ul>
<li><a href="#">sitemap</a></li>
</ul>
</div>
</div>

*CSS

div,ul,ol,li,h1,p{margin:0;padding:0;}

body{
text-align:center;
min-width:780px;
background-color:#f5f5f1;
font-coler:#666666;
font-family:"Lucida Geande",sans-serif;
font-size;62.5%;
margin:0;
padding:0;
}

h1{
display:none;
}

#wrapper{
width:740px; margin:0 auto; text-align:left;
}

#main a {
height:100px;
color:#ffffff;
font-size:1.8em;
text-transform: uppercase;
text-decoration: none;
display: block;
}

#main a:hover{
font-color: #cccccc;
}

#main a:active{
font-color: #cccccc;
}

#main ul{
list-style:none;
}

#main ul li{
padding:5px 0px 5px 0px;
}

#header{
height:115px;
margin:15% 0 0 0;
background:url(.img/image/blue.gif) no-repeat left center;
}

.biography{
background:url("blue.gif") no-repeat left center;
}

.works{
background-image:url(./img/works.gif) no-repeat left center;
}

.access{
background-image:url(./img/access.gif) no-repeat left center;
}

#footer ul li {
padding:10px;
display:inline;
}

#footer ul {
text-align:right;
}

#footer p {
text-align:center;
}
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： shumoku
  • 回答日時：

行間を読む力が無いので、失礼な書き込みになってしまうかもしれません。


その際は、「バカが来たよ」とスルーしてください。



質問文を拝見して疑問に思ったんですけど。

> 次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合

↑の場合は
<link rel="stylesheet" type="text/css" href="../style.css" media="all" />
では？

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
だと、「HTMLが置いてあるディレクトリ内にcssというフォルダを作りその中にstyle.cssがある場合」になると思うんですけど。



「回答番号：No.2」のやり取りを拝見して疑問に思った事。

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

↑はHTMLとCSSを同じフォルダに置いてある場合の呼び出し方ですが。その辺りは大丈夫ですか？



「回答番号：No.1」のお礼欄に書かれていた記述を見たところ、余分な「"」や「.」を見つけました。
↓余分なものを消しみましたので、見比べてみてください。質問欄に書かれていたCSSの中身はしっかり見ていません。すみません。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>***</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

shumokuさん
回答、ありがとうございます！！
余分な「"」や「.」を消して分かりやすく教えて頂き、お蔭様で
CSSを内部参照していたページと同じページになりました。
注意深く読んでいたのですが、XHTMLヘッダー部分も端から理解して
いませんでした。読んでいたつもりでした。


次に、CSSのフォルダの位置のことなのですが、shumokuさんの
おっしゃる通りですね。
いま振り返ってみてみると意味の分からないことを書いていました。

(次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合
<link href="../○○.css" rel="stylesheet" type="text/css">とあったので、
今はこう記述しています。
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />）
とは完全に間違えていますね。
正解はこうですね。
・CSSが置いてあるファイル内に新規フォルダを作りその中にHTMLがある場合
<link href="../style.css" rel="stylesheet" type="text/css">
・HTMLが置いてあるファイルの中に新規フォルダを作りその中にCSSがある場合
<link href="css/style.css" rel="stylesheet" type="text/css">
・HTMLとCSSを同じフォルダに置いてある場合
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

それから、CSSが外部参照で反映できなかったのは、
・XML宣言や構成要素をまだ理解していない
・文字のスペルミス
・CSSの保存方法(保存するときに、ファイルの種類→すべてのファイル,
　文字コード→UTF-8にしました。)
・XHTMLに記述するCSSの外部参照<link href="">のミス
だと思えるようになりました。

最後になりますが、失礼な書き込みではないです(＞＜)
shumokuさんの知識をお借りして内部参照していたページ外部参照で出せたので、
次へのやる気が出てきました。
助けてくれて、本当にありがとうございます。ｍ（＿　＿）ｍ

通報する
お礼日時：2009/09/16 22:43

No.2

素直にディレクトリ云々では無くhref="○○.css"では正常にCSSは反映しますか？

この回答への補足

href="○○.css"（href="style.css"）でもCSSは反映しませんでした。
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
知識不足だとは分かっています。。
それから、メモ帳から書き直してみたら、worksにリンクすることは出来ました。
CSSは反映しないということはどういうことなのでしょう。

補足日時：2009/09/13 20:49
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： one-moment
  • 回答日時：

認識云々の前にソースが＾＾；



<?xml version="1.0" encoding"utf=8"?>
　　　　　　　　↓
<?xml version="1.0" encoding="UTF-8"?>

あとDOCTYPE宣言が2重？
どこかで見たことがあるのですが、XMLの場合、CSS記述が通常のHTMLとして認識されてしまうとの記憶があります。
内部に埋め込むか、要素に直接記述するほうが良いかもしれません＾＾；
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答、ありがとうございます！！^O^
^^;;;;;
基礎的なことが分かっていないと思い知らされました。

ヘッダーの部分、DOCTYPE宣言をひとつにして、
<?xml version="1.0" encoding="UTF-8"?>
の部分を書き換えました。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.d …
<html xmlns=http://www.w3.org./1999/xhtml"
xml:lang="ja" lang="ja">
<head profile="">
<title>***</title>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
ですが、worksにリンク出来なくなりました。
<li class="works"><a href="works.html#works">&gt;&gt; Works</a></li>
works.htmlファイルからは正常にみれます。
教えていただけますか。（；O；）

通報する
お礼日時：2009/09/13 15:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報