XHTML1.0trasitionalとCSS2でホームページを作成中です。
参考書片手にマークアップしているんですが、
CSS側から背景画像を反映させたくて
例えば、#sample{background-image:url("フォルダ名/画像ファイル名.png");}
と打ち込んでも何も画像がでてきません。
例えば、#sample{background-color:#000000;}
など背景色はしっかり反映します。
画像ファイルの指定が原因なのか、見当がつきません。
同様に、インライン要素の<span>も
なぜか反映しません。特別変わったやり方があるわけでもなさそうなのに、
どうやってもこの二種がクリアできなくて困っています。
どなたかアドバイスお願いします！！
参考書片手にマークアップしているんですが、
CSS側から背景画像を反映させたくて
例えば、#sample{background-image:url("フォルダ名/画像ファイル名.png");}
と打ち込んでも何も画像がでてきません。
例えば、#sample{background-color:#000000;}
など背景色はしっかり反映します。
画像ファイルの指定が原因なのか、見当がつきません。
同様に、インライン要素の<span>も
なぜか反映しません。特別変わったやり方があるわけでもなさそうなのに、
どうやってもこの二種がクリアできなくて困っています。
どなたかアドバイスお願いします！！
|
|
|
|
コメント(17)
haruringさん
他のCSS指示？は問題なく反映しているのでパスに問題はないと思います。
パスについて、確認したところ絶対パスと相対パスがあるようですが、サイト内のリンクなどには相対パスが基本で、サイト外のリンクサイトへジャンプする場合に絶対パスを用いる、という解釈でよろしいでしょうか。
今回はサイト内の問題なのでimgフォルダに入っているlogo.pngファイルであれば、img/logo.pngと表記しています。
ファイルやフォルダ名に日本語や全角文字が入っている かについては、半角英数しか使用していません。
リピートしないとわからないような小さい画像（左上に表示されているが気が付かない） についても、ピクセル指定したりして試したのにダメでした。
<span></span>で囲ったテキストのfont-colorを変更するために使いたいと思っています。
CSSコミュでは検索かけてもそれらしい質疑応答はありませんでした。
なぜ反映しないのか自分でも疑問で仕方ありません。
他のCSS指示？は問題なく反映しているのでパスに問題はないと思います。
パスについて、確認したところ絶対パスと相対パスがあるようですが、サイト内のリンクなどには相対パスが基本で、サイト外のリンクサイトへジャンプする場合に絶対パスを用いる、という解釈でよろしいでしょうか。
今回はサイト内の問題なのでimgフォルダに入っているlogo.pngファイルであれば、img/logo.pngと表記しています。
ファイルやフォルダ名に日本語や全角文字が入っている かについては、半角英数しか使用していません。
リピートしないとわからないような小さい画像（左上に表示されているが気が付かない） についても、ピクセル指定したりして試したのにダメでした。
<span></span>で囲ったテキストのfont-colorを変更するために使いたいと思っています。
CSSコミュでは検索かけてもそれらしい質疑応答はありませんでした。
なぜ反映しないのか自分でも疑問で仕方ありません。
現状とは少し違うんですが基本的には以下のディビジョン要素内のようなナビゲーションバーの背景画像や単純にbodyの背景画像でも反映しません。
ちなみに
マークのimg空要素は問題なく反映します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?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-transitional.dtd">
<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" />
<title>メインページ</title>
<meta name="description" content="概要文。" />
<meta name="keywords" content="キーワード１,２,３,４,５" />
<meta name="author" content="制作者（社名）" />
<meta name="copyright" content="Copyright ©著作権保有者" />
<link rel="stylesheet" type="text/css" href="import.css" media="screen, projection, tv" />
<!--中略-->
</head>
<body>
<!--中略-->
<div id="navi">
<ul>
<li><a href="index.html"><img src="navi/navi-home.png" alt="トップページに戻る"/></a></li>
<li><a href="gallery.html"><img src="navi/navi-gallery.png" alt="過去作品の紹介ページ"/></a></li>
<li><a href="price-map.html"><img src="navi/navi-price.png" alt="価格表"/></a></li>
<li><a href="order.html"><img src="navi/navi-order.png" alt="ご注文方法"/></a></li>
<li><a href="originalgoods-gallery.html"><img src="navi/navi-goods.png" alt="オリジナル商品"/></a></li>
<li><a href="faq.html"><img src="navi/navi-faq.png" alt="よくある質問"/></a></li>
<li><a href="contact.html"><img src="navi/navi-contact.png" alt="お問い合わせ"/></a></li>
<li><a href="info.html"><img src="navi/navi-info.png" alt="工房概要"/></a></li>
<li><a href="profile.html"><img src="navi/navi-profile.png" alt="作家プロフィール"/></a></li>
</ul></div>
<div id="span-dekinai">
<p>インライン要素<span>スパン</span>です。</p>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『CSS』 フォルダcss ファイルimg.css
@charset "Shift_JIS";
#navi ul li {
background-color:#c0c0c0;
background: url("bgimg/background1.jpg") no-repert;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『CSS』 フォルダcss ファイルtext.css
@charset "Shift_JIS";
#span-dekinai p span{
color:#red;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『import.css』
@charset "Shift_JIS";
@import url("css/box.css");
@import url("css/img.css");
@import url("css/text.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-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<!--中略-->
</head>
<body>
<!--中略-->
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@charset "Shift_JIS";
body{
background-color:#00ffff;
background-image: url("img/bgimg.jpg");
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSSの相談になってしまいましたが、宜しくお願いします。。。
ちなみに
マークのimg空要素は問題なく反映します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?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-transitional.dtd">
<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" />
<title>メインページ</title>
<meta name="description" content="概要文。" />
<meta name="keywords" content="キーワード１,２,３,４,５" />
<meta name="author" content="制作者（社名）" />
<meta name="copyright" content="Copyright ©著作権保有者" />
<link rel="stylesheet" type="text/css" href="import.css" media="screen, projection, tv" />
<!--中略-->
</head>
<body>
<!--中略-->
<div id="navi">
<ul>
<li><a href="index.html">
<img src="navi/navi-home.png" alt="トップページに戻る"/></a></li>
<li><a href="gallery.html"><img src="navi/navi-gallery.png" alt="過去作品の紹介ページ"/></a></li>
<li><a href="price-map.html"><img src="navi/navi-price.png" alt="価格表"/></a></li>
<li><a href="order.html"><img src="navi/navi-order.png" alt="ご注文方法"/></a></li>
<li><a href="originalgoods-gallery.html"><img src="navi/navi-goods.png" alt="オリジナル商品"/></a></li>
<li><a href="faq.html"><img src="navi/navi-faq.png" alt="よくある質問"/></a></li>
<li><a href="contact.html"><img src="navi/navi-contact.png" alt="お問い合わせ"/></a></li>
<li><a href="info.html"><img src="navi/navi-info.png" alt="工房概要"/></a></li>
<li><a href="profile.html"><img src="navi/navi-profile.png" alt="作家プロフィール"/></a></li>
</ul></div>
<div id="span-dekinai">
<p>インライン要素<span>スパン</span>です。</p>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『CSS』 フォルダcss ファイルimg.css
@charset "Shift_JIS";
#navi ul li {
background-color:#c0c0c0;
background: url("bgimg/background1.jpg") no-repert;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『CSS』
フォルダcss ファイルtext.css
@charset "Shift_JIS";
#span-dekinai p span{
color:#red;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
『import.css』
@charset "Shift_JIS";
@import url("css/box.css");
@import url("css/img.css");
@import url("css/text.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-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<!--中略-->
</head>
<body>
<!--中略-->
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@charset "Shift_JIS";
body{
background-color:#00ffff;
background-image: url("img/bgimg.jpg");
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSSの相談になってしまいましたが、宜しくお願いします。。。
>>5
background-image が表示されない点については，他の方もおっしゃられている通り，画像のパスが違うんだと思います．
これだと，img.css・box.css・text.cssの存在する css というフォルダの中に，bgimg というフォルダがあって，さらにその中にbackground1.jpgというファイルが存在しないと動作しません．
htmlソース上でのimg要素によるsrc指定の部分は，htmlファイルのある場所からの相対URLなので表示されるのは当たり前ですが，cssファイルの場合は，そのcssファイルが存在する場所からの相対指定となります．
この場合は，import.css からの相対パスではなく，import.css から import している css フォルダ内の css ファイルで background-image を指定しているので，css フォルダの中からの相対パスが正解となってしまいます．
あと，span要素の色が変わらないのは，
------
#span-dekinai p span{
color:#red;
}
------
これの記述が根本的に間違っているからです．
「red」等の基本色の名前を指定する場合は，頭に#文字は要りません．
background-image が表示されない点については，他の方もおっしゃられている通り，画像のパスが違うんだと思います．
これだと，img.css・box.css・text.cssの存在する css というフォルダの中に，bgimg というフォルダがあって，さらにその中にbackground1.jpgというファイルが存在しないと動作しません．
htmlソース上でのimg要素によるsrc指定の部分は，htmlファイルのある場所からの相対URLなので表示されるのは当たり前ですが，cssファイルの場合は，そのcssファイルが存在する場所からの相対指定となります．
この場合は，import.css からの相対パスではなく，import.css から import している css フォルダ内の css ファイルで background-image を指定しているので，css フォルダの中からの相対パスが正解となってしまいます．
あと，span要素の色が変わらないのは，
------
#span-dekinai p span{
color:#red;
}
------
これの記述が根本的に間違っているからです．
「red」等の基本色の名前を指定する場合は，頭に#文字は要りません．
みなさんいろいろコメントありがとうございます。
なんとか画像が出るまでになりました。
結論、原因となっていたのはパスと<div id="navi">の後にあった<div id="main">と背景画像のピクセル指定でした。
外部CSSファイルからの指定をやめてXHTMLソースに直接CSSを配置。
みなさんが指摘していたパスを訂正。
id=mainをCSSからfloat指定してnaviの横に持ってきていたので、画像がその下にあったと思われます。id=mainのピクセル幅をせばめて、id=naviの背景画像のサイズを指定したら反映しました。
<span>の#redの誤りは、mixiへの書き込み用に改めて書き直したもので、実際はcolor:#ff0000です。反映がなかったので削除してしまっていたので改めて書く時に書き間違えてしまいました。
なので、#redは原因ではありません。
kenicさんのリンクサイトは存じています。時折、CSSとあわせてXHTMLもここで確認しています。http://validator.w3.org/
なんとか画像が出るまでになりました。
結論、原因となっていたのはパスと<div id="navi">の後にあった<div id="main">と背景画像のピクセル指定でした。
外部CSSファイルからの指定をやめてXHTMLソースに直接CSSを配置。
みなさんが指摘していたパスを訂正。
id=mainをCSSからfloat指定してnaviの横に持ってきていたので、画像がその下にあったと思われます。id=mainのピクセル幅をせばめて、id=naviの背景画像のサイズを指定したら反映しました。
<span>の#redの誤りは、mixiへの書き込み用に改めて書き直したもので、実際はcolor:#ff0000です。反映がなかったので削除してしまっていたので改めて書く時に書き間違えてしまいました。
なので、#redは原因ではありません。
kenicさんのリンクサイトは存じています。時折、CSSとあわせてXHTMLもここで確認しています。http://validator.w3.org/
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
HTML / XHTML 更新情報
-
最新のアンケート
