掲示板/スタイルシート質問板/過去ログ/一覧/ 外部cssの呼び出し方

0 名前： naito ： 2007/01/17（水） 20:56 ID:dlWw5LR5: 外部cssを呼び出せず非常に困っております。どうすれば外部cssを呼び出せるのでしょうか？

現在のhtml　（レイアウトが崩れています。）
<?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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" media="all" />
<title>れいなとさゆみとわたし連絡フォーム</title>

<script src="js/form.js" type="text/javascript"></script>

</head>

<body>
<form method="post" action="http://www.altoworld.com/form2/post.cgi" id="inquiry">
<p><input type="hidden" name="_mailto" value="naito@reina-sayumi.com" /></p>
<p><input type="hidden" name="_subject" value="連絡フォーム" /></p>
<p><input type="hidden" name="_location" value="http://www.reina-sayumi.com/" /></p>
<table border="800" summary="お問い合わせに関する入力項目名とその入力欄" cellspacing="0">
<tr>
<th scope="row" class="must"><label for="name">お名前<em>（必須）</em></label></th>
<td><input type="text" name="name" size="30" id="name" class="text1" onfocus="focusColor(this)" onblur="blurColor(this)" /></td>
</tr>
<tr>
<th scope="row" class="must"><label for="email">email<em>（必須）</em></label></th>
<td><input type="text" name="email" size="30" id="email" class="text3" onfocus="focusColor(this)" onblur="blurColor(this)" /></td>
</tr>
<tr>
<th scope="row"><label for="address1">ＵＲＬ</label></th>
<td><input type="text" name="address1" size="30" id="address1" class="text3" onfocus="focusColor(this)" onblur="blurColor(this)" /></td>
</tr>
<tr>
<th scope="row" class="must">お問い合わせの内容<em>（必須）</em></th>
<td>
<input name="category" type="radio" value="相互リンク" id="category1" />
<label for="category1">相互リンク</label><br />
<input name="category" type="radio" value="ご意見、ご感想" id="category2" />
<label for="category2">ご意見、ご感想</label><br />
<input name="category" type="radio" value="その他" id="category3" />
<label for="category3">その他</label>
</td>
</tr>
<tr>
<th scope="row" class="must"><label for="content">コメント<em>（必須）</em></label></th>
<td><textarea name="content" cols="30" rows="15" id="content" class="text4" onfocus="focusColor(this)" onblur="blurColor(this)"></textarea></td>
</tr>
</table>
<div class="submit"><input type="submit" value="送信" /></div>
</form>
</body>
</html>

外部css
body {
font-size: 75%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif;
line-height: 1.5;
color: #333333;
background-color: #FFFFFF;
}
#inquiry {
width: 600px; /* ボックスの幅を指定 */
}
#inquiry table {
border-top: 1px solid #CCCCCC;
border-bottom: none;
border-left: none;
border-right: none;
font-size: 100%;
width: 100%;
}
#inquiry td {
border-top: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
border-right: 1px solid #CCCCCC;
padding: 10px;
}
#inquiry th {
border-top: none;
border-bottom: 1px solid #CCCCCC;
border-left: 6px solid #CCCCCC;
border-right: none;
background-color: #F3F3F3;
font-weight: normal;
padding: 10px;
width: 200px;
}
#inquiry th.must {
border-left-color: #0000FF;
}
#inquiry th em {
font-style: normal;
color: #0000FF;
padding-left: 5px;
}
.text1,.text2,.text3,.text4 {
border: 1px solid #CCCCCC;
background-color: #F3F3F3;
padding: 2px;
}
.text1 {
width: 100px;
}
.text2 {
width: 4em;
}
.text3 {
width: 98%;
}
.text4 {
width: 98%;
}
#inquiry select {
border: 1px solid #CCCCCC;
background-color: #F3F3F3;
}
#inquiry .submit {
text-align: center;
margin-top: 30px;
}
.text1:focus,.text2:focus,.text3:focus,.text4:focus {
border-color: #7F9DB9; /* フォーカス時のボーダーの色を指定 */
background-color: #FFFFFF; /* フォーカス時の背景色を指定 */
}

このcssを呼び出したいのですが分からずに困っております。詳しい方ご鞭撻お願い致します。

1 名前： きゃら ： 2007/01/17（水） 20:56 ID:9xhDRl0h: ８行目あたりの

<link rel="stylesheet" href="css/form.css" type="text/css">

"css/form.css"が外部スタイルシートにあたります。

↑が表示したいスタイルシート名と同じでないと表示されません。

2 名前：イサ： 2007/01/17（水） 20:56 ［URL］ ID:0yJG31Zh: ｃｓｓファイルの中に、form.cssがあればよいです。

例えば、http://www.アナタのドメイン.com/css/form.css

という配置、になっていれば、呼び出せるはずです。

＊index.htmlなどがあるファイルに、ｃｓｓというファイルがあり、その中にform.cssがなければなりません。

ｃｓｓファイルやｃｓｓ名と配置を、見直してみてください。

3 名前：モノ ◆7YMtX/NYmu ： 2007/01/17（水） 20:56 ID:3mXSSG1S

>>6 イサさん
すみません、ファイルとフォルダ(ディレクトリ)を混同していらっしゃいませんでしょうか。

<link rel="stylesheet" href="css/form.css" type="text/css">

の

css/form.css

ここが意味するのは、
cssという名前がついた"フォルダ"の中にあるform.css"ファイル"
ということではないのでしょうか。

4 名前：モノ ◆7YMtX/NYmu ： 2007/01/17（水） 20:56 ID:3mXSSG1S: >>3
タイプミスです。失礼しました
× >>6　イサさん
○ >>2　イサさん

5 名前： naito ： 2007/01/17（水） 20:56 ID:dlWw5LR5: 私の方の言葉足らずで申し訳ありません。
index.htmlと同じ階層にcssというフォルダがありその中にform.cssが入っています。
form.cssの呼び出し方は正しいはずなのですが表示されずに困っております。

6 名前：イサ： 2007/01/17（水） 20:56 ［URL］ ID:0yJG31Zh: う～ん

とりあえず、外部ｃｓｓ呼び出し方法が間違っているとは思えませんが・・・

ｃｓｓ呼び出しが出来ない事が原因でしょうか？

>>3
すいません混同していません。書き間違いでした。
投稿してから気が付きましたが、意味はわかると思ったのでそのままにしていました。

7 名前：匿名： 2007/01/17（水） 20:56 ID:63/rbfjN: 当方試しましたが、反映されてますよ。
UTF-8で保存されてますか？
s-jisだったりして、これはないか。失礼しました。

8 名前： naito ： 2007/01/17（水） 20:56 ID:dlWw5LR5: >>6
＞ｃｓｓ呼び出しが出来ない事が原因でしょうか？
どういう事でしょうか？詳しく教えていただけると幸いです。

>>7
＞UTF-8で保存されてますか？
申し訳ありませんが意味が分かりません。どういう意味ですか？

9 名前： K+S ： 2007/01/17（水） 20:56 ID:nROqylMa: >>8

> >6
> ＞ｃｓｓ呼び出しが出来ない事が原因でしょうか？
> どういう事でしょうか？詳しく教えていただけると幸いです。
>> >>5
>> > form.cssの呼び出し方は正しいはずなのですが表示されずに困っております。

表示されていないのはどのようにして確認したのですか？
何を根拠に表示されていないと判断したのでしょうか。
CSS 呼び出しが成功していても、他に問題があれば表示できない可能性があります。

> >7
> ＞UTF-8で保存されてますか？
> 申し訳ありませんが意味が分かりません。どういう意味ですか？
HTMLソースには、文書が UTF-8 であると明示されていますが、実際のファイルの文字コードは UTF-8 ですか？
でも、ここが不適であれば CSS 呼び出し云々以前の問題に気付くはずですが。

10 名前： カヅサツ ： 2007/01/17（水） 20:56 ［URL］ ID:lY9L7AMa: 想像で「ああでもない、こうでもない」と首をひねっているように見えます。
事態がここに至っては、検証のために該当のページのURLを教えていただくのが、最も良い解決方法と思われます。

11 名前： naito ： 2007/01/17（水） 20:56 ID:dlWw5LR5: >>9
申し訳ないです。今までの言い方に若干語弊がありました。
Internet Explorerではレイアウトが崩れているようです。
先ほどたまたまMozilla Firefoxで同ページを確認しましたら、
自分が思っていた通りに表示されていました。
Mozilla Firefoxでちゃんと表示されていまるので、
実際のファイルの文字コードもUTF-8であっているはずです。
Mozilla Firefoxで問題なく表示され、
Internet Explorerでは表示されないことを考えると
Internet Explorerの不具合なのでしょうか？

>>10
http://www.reina-sayumi.com/form.html
Internet Explorerでは崩れています。

12 名前：匿名： 2007/01/17（水） 20:56 ID:7BdMT5w6: しっかり、s-jisだよ
UTF-8で保存しなおせば、多分解決。

13 名前： K+S ： 2007/01/17（水） 20:56 ID:nROqylMa

>>11
HTMLファイルに関しては、文字コードは Shift_JIS で "Shift_JIS" と明示されているので問題ありません。
CSSファイルに関しては、文字コードが Shift_JIS のようですが "utf-8" と明示されています。
ただ、本件に関する問題と考えられることの原因に文字コードはそれほど関係していないと思われます。

あなたの言う「崩れています」とはどのような状態を示すのでしょうか？

<table border="800" summary="お問い合わせに関する入力項目名とその入力欄" cellspacing="0">

border="800" という記述は何でしょうか。

14 名前： naito ： 2007/01/17（水） 20:56 ID:dlWw5LR5: >>12>>13
匿名さんの指摘通りcssの文字コードをShift_JISからUTF-8に変更したら
Internet Explorerでもちゃんと表示されるようになりました。
ご回答のほど有難うございました。