ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

スタイルシートで、背景画像(header.jpg')を設定してるのですが表示されません。

 --- style.css
    newpage5.html

 --- img ┐
       header.jpg

スタイルシートは

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;

ホームページビルダーでは、簡易表示されてるんですが
アップロードすると、画像が表示されないのですが・・・

以上宜しくお願いします。

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

A 回答 (3件)

>img


半角小文字や/img/ディレクトリで間違いなく、
また、border-bottom: 1px solid #FF9900;が表示されてるなら外部CSSは問題ないので、

絶対パスで画像だけ表示してみる。
http://www.○○.com/img/header.jpg

HTMLファイル内の適当な所に表示してみる。
<img src="img/header.jpg" width="200" height="200" />

style属性で書いてみる。
<div style="width: 200px; height:200px; background: url(img/header.jpg);">テスト</div>

↑このセレクタを #idや.class で適応してみる。
<div id=" ">テスト</div>

別の表示可能な画像.jpgと入れ替えてみる。

別の名前で新規保存して表示してみる。

これらで原因がわかれば、対処もできますが、
単なる記述ミスの場合が多いのでは・・・
    • good
    • 0
この回答へのお礼

スタイルシートを見直したら、
最初の方に、余計なタグを入れてたので
バグ(?)の為に、表示されない結果でした。

単なる記載ミスとヒントをくれてありがとうございます。

お礼日時:2011/04/10 18:29

画像ファイルをアップロードされましたか?

    • good
    • 0

30代男HP初心者です。


まずHP作成ソフトって記述がでたらめになるケースがあります。
なのでプロですとザクっとつくってその後タグを編集します。
・・・という事を踏まえて
そのCSSタグはどの部位にたいして設定してますか?
body{この中に書いてますか?}
それともこのかっこの外が何になってるかで何に対して設定しているかとなります。

--- style.css
    newpage5.html ←まさかこれがCSS外部データとかではないですよね
                 CSSの場合は拡張子も.CSSです。 
 --- img ┐
       header.jpg

ちなみに↑何ですか??

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;  ←ここが問題かもしれません…
この画像を背景にという事ですが全体に表示させるだけですかね??
それとも所定の位置に表示したいんですかね??
padding:20pxが何をしたいのかに依るんですが…
表示位置を指示する場合は
background-position-x:"例です"20px又は20%;
background-position-y:50px又は50%;
等写真画像の場合はx軸とy軸を指定します。
header部分にという場合はHTMLでヘッダーを定義している場合において
header{
     border-bottom: 1px solid #FF9900;
     background-image: url('img/header.jpg');
     padding: 20px;
     }

とすればヘッダー部分にその画像が表示されます。
どういう状況かがいまいちわかりませんのでこんな感じで終わらせておきます。
ちなみに…これ外部CSSでーたですかね?
只ヘッダー部分に画像を貼りたいだけで、
かつ、HTML内部にCSSを記述しているなら、なんでかんでCSSでなくて
HTMLで貼ったほうが文字数制限でその分軽くなるかと…
    • good
    • 0

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

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

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

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

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

QCSSで背景画像が表示されない

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]-----------------------------------------------------

#wrap{
width: 920px;
height: 100%;
margin-left: auto;
margin-right: auto;
background: url(../img/background.jpg) repeat-y;
}
#contents{
clear: both;
}
#sidemenu{
width: 275px;
float: left;
}
#mainbox{
width: 570px;
float:right;
}

[ html ]----------------------------------------------------

<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
</div>
</div>

以上です、よろしくおねがいします!

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]--------------...続きを読む

Aベストアンサー

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
<div style="clear:both"></div>
</div>
</div>
でしょうね。これで初めてclearの意味が出て#contentsと#wrapの高さが出ます。ただ、これだと空のボックスが生まれる為W3Cに準拠したコーディングとは言えませんが。
また例えば#sidemenuの内容よりも#mainboxの内容が多く#sidemenuの内容の高さの方が低くなってしまう場合はどうやっても現在のCSSでは#sidemenuの高さを#mainboxの高さまで広げる事は不可能です。CSS3.0では可能だったりしますが、IE6等が対応してないのでとりあえず置いときます。
その場合は#sidemenuの背景だけが欲しい場合でも#contentsに背景を指定します。これで#sidemenu,#mainboxどちらが高くなっても高い方の高さまで背景が反映されます。
#contents{backgrounde:url(画像) repeat-y left top}
のように#sidemenuの背景の幅の画像を左側に寄せて縦だけにリピートさせます。repeat-xかも。。忘

ちなみに上の方に書いたclearのかかったdivをおく対処法ですが、先ほども述べたように空のブロック要素は本来書かないほうがよいです。
参考サイトのにかかれてあるようにafter疑似要素というのを利用してfloatを解除します。
ネットで「float after疑似要素 解除」などで調べると出てきますが、もしプロの方でなければ空要素の<div style="clear:both"></div>を書くのが楽です。できれば疑似要素のfloat解除はサイト制作に必須スキルですので勉強した方が勿論よいですが。

参考URL:http://www.cptskgj.com/ilog/2008/04/css-floatclearfix.php

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="...続きを読む

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ホームページの背景画像が表示されない。

ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。

構成としては、ものすごく単純な構成なのですが・・。
構成は図に記載させていただきました。

大枠を【Contents】というDiv要素で囲み、
その中に【mainArea】【subArea】をDiv要素配置しております。

【mainArea】はFloat:Left【subArea】はFloat:Rightを設定し左右に配置しております。

【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。

色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。

※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。

【HTML】
<div id="contents">
<div id="mainArea"> id "mainArea" の内容がここに入ります</div>
<div id="sideArea">
<div class="6support"> 背景画像をおきたい。</div>
</div>
</div>

【CSS】
#contents {
height: 1000px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#mainArea {
float: left;
height: 800px;
width: 700px;
}
#sideArea {
float: right;
height: 800px;
width: 250px;
}
#sideArea .6support {
height: 400px;
width: 240px;
background-repeat: no-repeat;
margin-left: 7px;
background-image: url(images/6supportBack.jpg);
}


一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。

ご教授よろしくお願いいたします。

ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。

構成としては、ものすごく単純な構成なのですが・・。
構成は図に記載させていただきました。

大枠を【Contents】というDiv要素で囲み、
その中に【mainArea】【subArea】をDiv要素配置しております。

【mainArea】はFloat:Left【subArea】はFloat:Rightを設定し左右に配置しております。

【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。

...続きを読む

Aベストアンサー

まず最初に一言、言わせて下さい。

検証にすんごい時間かかりました!もうイヤ!

取り乱しました。申し訳ありません…。
というのも、すごい初歩的なミスなんですよ。
一回ミスった事がある人か、
CSSの仕様をちゃんと読んでる人しかわからないくらいの。
私の場合、ミスったこともないし仕様も読んでませんから…!



なんと、クラス名って、数字で始められないんですって。
(私もCSSを扱って長いですが、初めて知りました)

たったそれだけです。びっくり!

でも、製作環境がdreamweaverならハマるかもです。
頭文字が数字でも、dreamweaverのプレビュー画面が変な気をまわしてですね、
marginだのheightだのwidthはプレビュー上で反映しちゃうんですよ。
背景については、反映したりしなかったり不安定な挙動でした。

でも、そもそも数字から始まるクラス名はCSSのサポ外なので、
実際にブラウザで確認しても背景は表示できないわけです。
私はdreamweaverで製作しているので、まんまとハマりました。
あれ、プレビューではイケそうなのに、ブラウザにでないぞ…!と。



いやぁ…疲れました。

あと、CSS内でIDの中にクラスを記述するのはやめたほうがいいですよ。
#sideArea .6supportっていう記述のことです。

そこ、.6supportってだけでいけますし、#sideAreaを頭につけた分無駄かと。
ブラウザによっては変な挙動をしたはずです。昔ハマッた気がします。
IDとクラスは明確に分けて扱うほうがCSSルール上好ましいと思います。

#sideArea .6support ではなく、
#sideArea .tdとか#sideArea .pのようなHTMLタグへの一括指定ならば、
CSSでも推奨している使いかたになるのですが。

まず最初に一言、言わせて下さい。

検証にすんごい時間かかりました!もうイヤ!

取り乱しました。申し訳ありません…。
というのも、すごい初歩的なミスなんですよ。
一回ミスった事がある人か、
CSSの仕様をちゃんと読んでる人しかわからないくらいの。
私の場合、ミスったこともないし仕様も読んでませんから…!



なんと、クラス名って、数字で始められないんですって。
(私もCSSを扱って長いですが、初めて知りました)

たったそれだけです。びっくり!

でも、製作環境がdreamweaverならハマるかもで...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

QCSSで、何故か、「float」が上手く効かない

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="left">

</div>
と、
<div class="right">

</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。

ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか?
詳しい方がいましたら、よろしくお願いします。

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="l...続きを読む

Aベストアンサー

幅を設定しましょう。
今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・

問題点:
1、トップ画像よりも大きな枠にする。または、画像を小さくする。
2、メイン=レフト+ライトの幅に収まるようにする。

1、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px; ではなく、 width: 800px; 程度にしましょう。

2、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}

左width: 400px;+右width: 400px;=合計800px ←この値より小さくする事。

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)はこれら以外にも
いろいろな設定方法があります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!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">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->


人気Q&Aランキング