【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

FC2のホームページについてです。

ホームページはなんとか作れてサーバーにアップしたのですが、
style.cssで設定した背景画像とスクロールバーが反映されません><
テンプレートをお借りして、その中に入っていたstyle.cssもそのままffftpに
アップロードしました。

ファイル内で自分のホームページを見てみると背景画像と色など設定したスクロールバーは
しっかり反映されているのですが、サーバーにアップすると反映されません。

ffftpにstyle.cssをそのままアップロードしたのが間違いだったのでしょうか;;
検索して調べてみるとCSSのフォルダごとアップロードしろと書いてあったりするのですが
テンプレートに入っているのはstyle.cssというものだけで、cssフォルダは入っていません。
それともcssフォルダは自分で作るのですか><?

このQ&Aに関連する最新のQ&A

A 回答 (10件)

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。


本当にまだ初心者なのですね。
ちょっとショックかもしれませんが、ページを作成したら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
 などでチェックするのがもっとも良いです。減点0の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。
 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になります。

<DOCTYPE>の宣言がされていますが、今からはじめられるなら必ずstrictにするべきです。これは1999年のHTML4.01の勧告時に
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』とされて来たものです。多分参考にされている書籍かサイトは相当古いものだと思います。
 というか、まったく仕様書を知らない人が作られたテンプレートではないかな。Another HTML Lintを確認するまでもなく酷いものです。

 その後、そのままXML化されたXHTML1.0の後、XHTML1.1が勧告されましたが、XHTML1.1ではstrict以外はありません。【現在、勧告直前になっているHTML5は、HTML4.01strictの改訂で、transitinal的なものは一切ありません。】

 そして、HTML4.01で方向性は示されていたのですが、それがまったく徹底していなかった反省からHTML5は、完全に文書構造とプレゼンテーション(表現)は分離されます。たとえば、
「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
★<DOCTYPE>はおまじないなんかじゃありません。仕様書にきちんと書かれているルールです。これはブラウザ(IE)を標準モードで起動させるスイッチにもなっています。
→DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient … )

 実は、DOCTYPEの宣言以上にあなたのサイトは、この点で誤りだといえます。厳しいですが、これは今後は絶対に守らなければならない条件の一つです。詳しくは
・スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 など。

たぶん携帯やスマートホンを想定されたページだと思います。
本来は下記サンプルのようにシンプルなものであるはずです。
iframeはstrictでは使えませんので、objectを使っています。
そのため、targetは同様に使えませんので、それぞれのページにこのソースを書く方が良いです。
 →FRAME 問題 HTML - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output= … )


★Anothe HTML Lint
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でテスト済み
(注意) タブは_に置換してあるので戻すこと!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<meta http-equiv="Content-Script-Type" content="text/javascript">
_<title>pochette</title>
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rel="stylesheet" type="text/css" media="screen" href="./test.css">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
<!-- ここから -->
_<div class="header">
__<h1>*pochette*</h1>
_</div>
<!-- ここまではすべてのページで共通 -->
_<div class="section">
__<h2>本文</h2>
__<p><object data="./main.html">新着情報は<a href="./main.html">新着情報</a>へ</object></p>
__<div class="Navigation">
___<ul>
____<li><a href="main.html">Top</a></li>
____<li><a href="about.html">About</a></li>
____<li><a href="material.html">Material</a></li>
____<li><a href="bbs.html">BBS</a></li>
____<li><a href="link.html">Link</a></li>
___</ul>
__</div>
__<p><img src="./g8.png" height="273" width="250" alt=""></p>
_</div>
<!-- ここから -->
_<div class="footer">
__<address>Copyright (c) 2012 *pochette* All Rights Reserved.</address>
<!-- ここまではすべてのページで共通 -->
<script type="text/javascript"><!--
この部分はFC2自動挿入なので省略
-->
</script>
_</div>
</body>
</html>

[CSS]
@charset "Shift_Jis";
html,body{margin:0;padding:0;}
body{
_color: #808080;
_font-family: 'Osaka,verdana';
_font-size: 10px;
_letter-spacing: 1px;
_line-height: 12pt;
_text-align:center;
}
div.header,div.section,div.footer{
width:30%;min-width:320px;
margin:0 auto;
}
div.section object{width:300px;height:200px;}
a:link{color: #808080;}
a:hover {color: #FF8040;}
h1,div.Navigation{
background-image: url("./cccc12.png");
}
div.section div{margin:20px

この回答への補足

お忙しい中ありがとうございます><

まず、宣言文を書き直してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

フレームを使用している場所には

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

という宣言文です。

チェックもしてみたらかなりの項目がチェックされてしまったので
自分なりに直していこうと思います。。

一つ一つ参考にしながら勉強してみます。

ありがとうございます!

補足日時:2012/09/25 21:28
    • good
    • 0

スタイルシートを使用する最大の利点は、


・すべてのページのデザインをたった一つのスタイルシートだけで変更できること
・スタイルシートを一度しか読まないのでネット負荷か小さい
です。

 詳しい説明は最後に回しますが、階層の異なるところにある、どのHTMLからもスタイルシートを利用するためにはその階層にあわせてスタイルシートへのパスを指定しなければなりません。これはページに画像を貼り付けるのと同じです。
 最も楽なのは絶対パスですが、初心者はローカルでテストできません。
<link rel="/style.css"
 また、スタイルシートで指定する画像も必ずスタイルシートからのパスになります。

 なお、スクロールバーやポインターなどユーザーインターフェイスに関わるものはデザインを変更すべきではありません。プロは決してしませんよ。
 リンク関係の色も可能な限り変更しません。

ブラウザはHTMLファイルをサーバーに要求して入手したら、そのページの描画を完成させるために必要なファイルが追加で必要なら、HTMLに書かれたそのファイルへのパスを計算して、改めてサーバーに要求します。
 そのHTMLが、サーバー名/abc/efg/index.htmlだとして、必要なファイルが
../hoge/abc.css
 でしたら、計算して
/abc/hoge/abc.css
 をサーバーに要求します。

指定されたパスが
/CSS/abc.css
でしたら、そのまま要求します。この場合HTMLがどこにあってもよいことがわかります。

指定されたパスが
abc.cssでしたら、今いる位置から計算して
/abc/efg/abc.css
を求めます。

そして呼び出されたスタイルシートについて、改めて同じ計算をします。今度はHTMLからの位置ではありません。

この回答への補足

とても勉強になりました><
ありがとうございます。

補足日時:2012/09/24 17:11
    • good
    • 0

no1です。


ここが問題かもしれません。

/* サイトタイトル、メニュー部分の背景画像の設定*/
.back {
background: url(img/cccc12.png) repeat;
text-align: center;

}


このように書き換えてください!

.back {
background-image: url(img/cccc12.png);
background-repeat: no-repeat;
text-align: center;
}
    • good
    • 0
この回答へのお礼

ありがとうございます。
無事、画像は表示することできました^^

お礼日時:2012/09/23 23:45

>これは、すべてのページですか?


>それともindexだけですか><?

 この一連の指定は、全てのページに必要です。
 というか、本来、必ず書いてあるべき事項なんです。
 はっきりいって、おまじない以外の何物でも無いんですけどね。

 スクロールバーの色指定に使われている属性ですが、最近のIEと昔のIEでは指定の場所が違ったはずです。たしか、IE5.5では、<BODY>への指定で、IE6以降はブラウザーの動作モードに依存して、<HTML>への指定も必要になる場合がある・・・といった感じだったと覚えています。(両方に指定するものと私は覚えてますが)
 で、ブラウザーの動作モードは、No4.の方が書かれている一連のおまじないの内容によって決まります。他にも、細かいところでいろいろとこの指定でブラウザーの挙動が変わるため、正しく書いておかないといけません。

この回答への補足

すごく重要なことを学びました。。

今すぐ書き加えますね;;

これは、
meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>pochette</title>

<!--このタグ消すとデザイン崩れます-->
<link href="style.css" rel="stylesheet" type="text/css">

を消さないといけないんですか?;;
この次の行でも大丈夫ですかね?

補足日時:2012/09/23 23:37
    • good
    • 0
この回答へのお礼

とりあえず、
meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>pochette</title>

<!--このタグ消すとデザイン崩れます-->
<link href="style.css" rel="stylesheet" type="text/css">

を消さずにその上に貼り付けました。

それでも画面じたいは何も変わりませんが、、大丈夫ですかね?^^;

お礼日時:2012/09/24 16:36

画像の方は


style.css

.back {
background-image: url('http://xpastelcolorx.web.fc2.com/cccc12.png
'); repeat;
text-align: center;

}

54行目の改行を削除して下のようにしてください。

.back {
background-image: url('http://xpastelcolorx.web.fc2.com/cccc12.png'); repeat;
text-align: center;

}

スクロールバーは反映されているようですが、ブラウザによって違いますので。
    • good
    • 0
この回答へのお礼

画像ちゃんと表示されました!!

ありがとうございます!!

お礼日時:2012/09/23 23:33

no1です。



まず基本をおさえましょう ^^
htmlでコーディングするときは、
かならず宣言文というのが必要になります。
これがないと文字化けしたり、レイアウトが崩れたりします。
index.htmlに限らず、すべてのページに必要です。
そのまえに、問題のstyle.cssのソースコードを見せていただけますか?
↓これのコピペは後にしましょう、
まんがいち質問者様が手順をまちがえたら僕は責任がとれません。^^!

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel='stylesheet' href='default.css' />
<link type="text/css" rel='stylesheet' href='style.css' />
<title>pochette</title>
</head>

この回答への補足

詳しくありがとうございます!
宣言文!
とっても必要なものなんですね;;

えっと
style.cssは

@charset "Shift_Jis";

/* ページ全体 */
body,td{
color:#808080;
font-size:10px;
font-family:'Osaka,verdana';
letter-spacing :1px;
line-height : 12pt;

}

html{
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#ffc2a6;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-track-color:#ffffff;
}


body{
margin: 0;
background:#ffffff;
}


/* リンクの設定 */
a {
color:#808080;
text-decoration:none;
}

a:hover {
color:#ff8040;
text-decoration:none;
}





/* メインのテーブル部分の設定*/
.table {
width: 320px;
text-align: center;
}


/* サイトタイトル、メニュー部分の背景画像の設定*/
.back {
background: url(img/cccc12.png) repeat;
text-align: center;

}

です。

補足日時:2012/09/23 23:28
    • good
    • 0

no1です。

ホームページ拝見しました。
htmlの宣言文がないですね。
前のデータを念のためとっておいて、
これを頭から</head>まで書き換えてみてください。


<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel='stylesheet' href='default.css' />
<link type="text/css" rel='stylesheet' href='style.css' />
<title>pochette</title>
</head>

この回答への補足

これは、すべてのページですか?
それともindexだけですか><?

補足日時:2012/09/23 22:54
    • good
    • 0

背景画像が表示されないのはパスが間違っているから



また、スクロールバーの方は記述が間違っているからだと推測されます。

ソースかページを確認できない場合は推測しかできませんね。

この回答への補足

http://xpastelcolorx.web.fc2.com/

これがホームページです。

この「pochette」という文字の背景と
「top,about,material.Link」の文字の背景に水玉の背景画像が表示されるはずなんです。

スクロールバーもノーマルの状態ではなく
色をつけたりしました;

でも、ファイルから自分のホームページを見るとどちらも反映されてるのですが。。

補足日時:2012/09/23 22:20
    • good
    • 0

no1です。



ヘッダー内にstyle.cssをリンクさせてますか?
こんな感じです。↓

<head>
<link type="text/css" rel='stylesheet' href='style.css' />
</head>

この回答への補足

テンプレートはお借りしたものなので、
これは元から書いてあったものなのですが
<link href="style.css" rel="stylesheet" type="text/css">

とどのページにもかいてあります。

補足日時:2012/09/23 22:23
    • good
    • 0

webデザイナーです。



FC2のことはよくわかりませんが、
htmlファイルとcssファイルは同じフォルダに入れないと反映されませんよ。
ホームページはどのように作られたんですか?DWですか?エディタですか?

この回答への補足

ご回答ありがとうございます><

一つのフォルダに作ったページ(index.htmlなど)とstyle.cssは一緒に入れてあります。
エディタで作りました。

反映されないのは、スタイルシートに記入した背景画像と、色などを設定したスクロールバーだけ
なんです;
フォントのサイズ、色はきちんと反映されています。

補足日時:2012/09/23 20:52
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qアップロードすると、スタイルシートが反映されない

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡

QFFFTPでページに反映されません

過去にアップしたものを上書きしてアップしたのですが、
サイトで確認すると反映されてなく、
前のページのままになっています。
アップ自体は問題なくできています。
アップしてから反映されるまでに時間がかかるのでしょうか?
それとも、何かおかしな点があるのでしょうか?

詳しい方がいらっしゃいましたら、
是非回答よろしくお願いします。

Aベストアンサー

ページのキャッシュが残っているのかもしれません。

インターネットの一時ファイルを削除してください。
IEの場合は「ツール」―「インターネットオプション」―「一時ファイルの削除」で、できます。
(クッキーの削除はしないでください。他のサイトを見るときに影響を及ぼす場合もあります)

あるいは、ブラウザのページの更新ボタンを何度か押すと、新しいものが表示される場合があります。

Qテンプレートが反映されない【Fc2ブログ】

観覧有難うございます
Fc2でテンプレートを変更する際、時々上手く反映されない事があります。

テンプレートは配布されているものを使用しています
Fcで見てみるとcssが反映されていない様なデザインになってしまいます
(保存したPCファイルから見ると問題無く見れます。Fcへとアップロードすると見れません)
css,htmlは同じ場所に入れています
ブラウザのキャッシュクリアも試しましたが効果はありませんでした

他の配布サイト様からお借りした時も同じような事があったので、今回質問させて頂きました
少しでも情報頂ければと思います<m(__)m>

↓私のサイトです
http://winlove.web.fc2.com/

Aベストアンサー

>css,htmlは同じ場所に入れています
同じ場所であればcssの指定は、以下のようになります。
  css/main.css → main.css

また、gifファイルのパスも間違っていますよ。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

QIEで外部スタイルシートが反映されない

IEで外部スタイルシートが反映されない


HPを製作したところ、
Firefoxでは、完璧に外部スタイルシートが適用されていたのですが、
IEでテストしたところ、CSSが全く反映されていてませんでした。

多くの皆さんがしてるように、
ヘッダーに、
<link href="style.css" rel="stylesheet" type="text/css" />
と記述しているのですが・・・


原因としては何が考えるでしょうか?

ご助力願います。

Aベストアンサー

別アカウント作成した質問者です。

ご報告いたします。
原因が判明しました

CSSの一番上、
@charset "utf-8;


このutf-8の後の”(アポストロフィ)が消えてました。

@charset "utf-8";が必要なのは、IEの7以前のみ。
なので、IE8とMozilaは問題なく表示されたようです。


皆様ご協力ありがとうございました。


因みに、この場合、
なぜか次のBodyの部分や、他の部分がチェッカーに引っ掛かっていました。

QFC2ホームページでCSSテンプレートを使いたい!

FC2ホームページでサイトを開設していまして、トップページの仕様替えにCSSデザインテンプレートを使おうとしたのですが、どうやればいいのか全く分かりません。

下記サイト様の#design_167のデザインをお借りしたいのです。
http://spica.xtr.jp/

HTMLについてはなんとなく理解しているつもりですが、ほとんどド素人です。
ちなみに今までFC2のファイルマネージャーを使用してホームページを作ってました。

一から十まで細かく教えて下さる心の広い方、お願いします。

Aベストアンサー

#design_167のHTML4.01バージョンをダウンロードしてみました。特にHTML5でなくても問題ありませんでした。

ダウンロードしたzipファイルを解凍するとフォルダが4つ生成されます。
4パターン用意されているようです。
FC2ホームページでこのテンプレートを使用する場合、ファイルマネージャを使用してそのままファイルをアップロードしてください。(FTPを使用したほうが楽だとは思いますがここでは省略します。)

ファイルを編集する場合、index.htmlがトップページ、page1.htmlが各ページのテンプレートとなります。各ページを増やす場合、page1.htmlをコピーし、page2.htmlなどとして保存、アップロードしてください。
スタイルシートは167.cssです。特に編集する必要はありません。

トップページのリニューアルだけをお考えでしたら、index.htmlと167.cssを同じディレクトリ(フォルダ)にアップロードすれば問題なく使用できるかと思われます。

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 


人気Q&Aランキング