• ベストアンサー

ネスケでの背景表示に困ってます!(CSS使用)

はじめまして! 今手打ちでHPを作っているのですが、ネスケで動作確認をすると背景画像が テーブルのセルごとに表示されてしまって困ってます。 セルごとにリピートされている感じです。 背景画像の表示は、HTMLにCSSを組み込んで以下のようにしています。 table{ background-image : url(../images/***/***.gif); background-repeat : no-repeat; background-position : 50% 50%; } これだけだとIEでも背景が真っ白になってしまったので <table width="640" height="430" border=0 background="../images/***/***.gif"> も付け加えています。 この時点でなんだか怪しいのですが・・・ 初心者で、もうどうしたら良いか途方にくれて困っています。 説明がへたで本当に申し訳ないのですが、 どうか良きアドバイスをよろしくお願いします!

  • HTML
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • mat-21
  • ベストアンサー率56% (91/162)
回答No.4

TABLEにStyleSheet指定するより、TDにした方が良いかと思います。 StyleSheetの指定は、 .img01{ background-image:url(../images/xxxx/xxxx.gif); background-repeat:no-repeat; background-position:50% 50%; } として、 HTMLのソースを2重のTABLEでくくります。 <table width=640 border=0 cellspacing=0 cellpadding=0> <tr valign=top> <td class="img01> <table width=100% cellspacing=0 cellpadding=0> <tr>   <td>~~~~~~<td> </tr> </table> </td> </tr> </table> ちなみに、 TABLEの中のheight=XXXは、WindowsのIEだと無視されてませんか?

shocorax
質問者

お礼

ありがとうございます! TDに指定しましたら解決できました。 こんな技があったんですねー、スゴイ!! でも未だに <table width="640" height="430" border=0 background="../images/***/***.gif"> は付け加えているままです。 インラインフレームを同時に使用しているせいでしょうか?? とにかく1つ解決いたしました! スッキリ、ありがとうございました。

その他の回答 (3)

  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.3

わかりやすいかどうかは別にして(^^; http://hp.vector.co.jp/authors/VA010341/css.html とか http://www6.plala.or.jp/go_west/css2/ref/atrl.htm は参考になるかも。他にもGoogleで検索するといくつか見つかりますよ。 基礎知識として http://www.kanzaki.com/docs/htminfo.html http://anslasax.net/css-make/ あたりは勉強になると思います。

shocorax
質問者

お礼

またまたありがとうございます! 理解するのにちょっと時間がかかりそうで ブルッときちゃいましたが、これからの事もあるので なんとかやってみようと思います!

  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.2

Netscape4.xのスタイルシート実装は間違いだらけの上のバグだらけです。細かいバージョン間でもバグの出方に差があるため、事実上簡単なスタイル以外は使えません。 で、数あるバグの中からあるバグを利用して、Netscape4.xにはスタイルシートを解釈させない、ことで致命的な表示の乱れを回避する、という手段がいくつか考案されており、よく用いられています。 #詳細は参考URLを参照してください。 使い勝手でいくとmedia属性の解釈がうまくできないバグを利用する方法がいいと思います。 @media screen,print{ ここに書いたスタイルはNetscape4.xでは無視される } この場合は、背景画像の指定部分を無視されるようにしておけば、IEやNetscape6以降では意図通りになり、Netscape4.xでは背景画像が表示されなくなるので見栄えが悪化することが避けられます。 IE5以降、Netscape6以降、Opera6.04(?)以降では(おおむね)同等の表示が得られ、Netscape4.xでは見栄えがちょっと変わるものの使用には支障がない、という状態にするわけですね。 「ブラウザによって見栄えに差がある」ことを病的に嫌う方もいますが、(見栄えそのものが作品である場合を除くと)見栄えは内容を伝えるための手段のごく一部に過ぎませんから、そこそこの見栄えで提供できるのであれば、ごく少数の、バグだらけのソフトを愛好する方(や会社や学校の都合で使わされる方)に対する対応としては十分ではないか、と思います。 私のサイトもこのような対応をしていますが、(徐々に減少していますが)4%くらいの方がNetscape4.xで閲覧されていますけれど、一度も苦情をもらったことはありません。見た目はIEと比較すればかなりショボくならざるえないのですが、読者からすると大した問題ではないんでしょう、見栄えの良し悪しは。 #内容で評価してもらってると思えばいいのか、IEでかっこよく表示されてると思ってるのは作者だけなのか・・・多少複雑な心境です(^^;

参考URL:
http://www.remus.dti.ne.jp/~takahisa/flm/OWTXML/NN40x.html
shocorax
質問者

お礼

アドバイスありがとうございます! かっこいいのも必要かもしれませんが、 ウェブサイトはやはり内容とユーザビリティーですよね! 私の場合、ネスケで表示すると 背景がごちゃごちゃでかなりヤバイんです。 見栄えとかの次元じゃなくって・・・(汗) ブラウザ毎に対応するページを 作ってみようと思います。 参考に載せていただいたURLでなんとか 頑張ってみるつもりですが、より詳しく説明のある サイトご存知ありませんか? 済みません、重ね重ね質問してしまいまして・・・

noname#21343
noname#21343
回答No.1

 解決策ではなくて申し訳ないのですが。  これらのタグをテーブル内で使おうとすると、ネスケではアウト、というケースが多いようです。 backgroud-image=ネスケ4.7xの場合不可 background-repeat=ネスケ4.7/6とも不可 background-position=ネスケ4.7/6では不可 #翔泳社版「スタイルシート辞典第2版」より。  HTML(table background="●●.gif)を使用しても、ネスケ4.7では各セルごとに画像が表示されちゃうみたいですね。 #翔泳社版「HTMLタグ辞典第5版」より。  行単位での指示、つまり”tr background="●●.gif”を使うと、ネスケ4.7ではその行の背景として表示されますが、今度はIEではセル単位での表示になってしまうので、これまたアウトみたいです。  何でもいいので、タグ/スタイルシート辞典の類をとりあえず1冊買っておくと役に立ちますよ。

shocorax
質問者

お礼

う~ん、そうですよね。 どうしても背景に画像を貼りたかったのですが・・・ 背景を表示したくないところに透過GIFを 貼り付けるのも試したのですが、 私の求めていたものではなくって(苦笑) アドバイスありがとうございました。

関連するQ&A

  • ネスケで背景を表示する際に

    ネスケで背景を指定する際に、困ったことが起きてしまいます。まず横700のテーブルのTDに指定して貼り付けますが 、そのうえからまたテーブルを組んで、セルを作ると、背景が繰り返してしまいます。CSSで定義してますが、できません。この教えて・・・でも同じような質問があったのですが、真似しても、テーブルのみだったら背景はきっちり表示されますが。リピート禁止にしてもだめです。 cssはこうです。 <STYLE TYPE="text/css"> .img01{ background-image:url(img/back01.jpg); background-repeat:no-repeat; background-position:50% 50%; } </STYLE> できれば、cssでなくタグのみでできればいいのですが・・・

  • ネスケで背景色が表示されない

    WINXP IE6 ネスケ7.1 外部cssで td.bottom{    height: 30px; background:url(img/cr.gif);    background-repeat:no-repeat; background-position: center;    background-color: #fff76b; } と指定し、 HTMLに <TD colspan="4" align="center" class="bottom"></TD> というタグを書いています。 IEで見るとちゃんと表示されますが、 ネスケだと色がまったく表示されません。 理由がまったく分からず困っております。 どなたかアドバイス下さい!

    • ベストアンサー
    • HTML
  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか? それともそのような仕様なのでしょうか? よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか? 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?

    初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです

    こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク1">link1</a></li> <li><a href="***" id="link2" title="リンク2">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。

    • ベストアンサー
    • CSS
  • html・cssによる背景の2重設定

    HP制作をしているのですが… 少々デザインを凝ってみようかなー、と考え、 背景の2重設定を思いついたのですが、どうしても表現できないのです。 私が言う背景の2重設定とは… 背景Aと背景Bがあり、背景Aは固定されているのですが、背景Bは画面中央に表示される-というものです。 画面をスクロールをしても背景Bは常に画面中央に表示されていて背景Aの上に背景Bは存在する-という形になっております。 私が試したhtml・cssを以下に記載したいとおもいます。 <html> <head> <title></title> <style type="text/css"> body{ background-image: url(B.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } </style> </head> <body background="sozai/haikei/A.gif"> <table width="100%" height="1500" border="0" cellpadding="0" cellspacing="0"> <tr><td> </td></tr></table> </body> </html> -とこのような形になっております。 背景Aを透過gifを用いて背景Bを表示させようと試みたのですが、画面全体に透過gifを用いるとスクロール時に読み込みに時間がかかって…大変ユーザーに見にくくなってしまいました。 質問の回答の程、どうかよろしくお願いいたします。

  • tableの中のtableの表示と外側(大きい方)のtableに背景画像を表示させる方法

    非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側(大きい方)のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか?下記ソースまでは作ったのですが、中(小さい方)のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか?もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white">  <TR>   <TD> 文章 </TD>  </TR> </TABLE> </CENTER> </body> </html>

  • Webの表で画像を並べたい

    テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル(今後増やす予定です)を作り、画像を並べたいと思っています。 が、左の画像と右下(2つ)の画像、右下(2つ)の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか?どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>

    • ベストアンサー
    • HTML