テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。

Question

私HPをつくっているのですが、
テーブルレイアウトをしているのですが、
最近CSSを勉強しだしまして、
テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、
そのテーブル以外の部分に背景色を設定したいと思っております。

どのようにしたいかというと
参考HPをあげておきます。
http://www.neutrals.jp/works.html
http://www.kekkon-navi.org/
http://www.plusmoney.jp/

この用な感じにメニューや本文の部分は白くて、
それ以外のところの背景が色をついている状態にしたいです。

外部CSSで全ページに適用していこうと思っているのですが、
CSSにはどのように記述したらよろしいでしょうか？

お詳しい方よろしくお願いいたします。

leap_day · Accepted Answer

こんにちは tableはその内容をすべて読み込んでから表示されると聞いたことがあるので個人的にはあまり速くなっているという感覚はないような感じがしますが・・・ちょっとした追加で実現したいのであれば外部CSS div { width:table幅or希望の幅 px; margin:auto; background-color:white; } body { background-color:希望の色; margin:0px; }

現在作っているHP内容

でおそらくできると思います(現在作っている部分に

を使っているなら全体を覆う

にidかclassを設定して外部CSSのdivを#id名、.class名に変更してください）

NymphLuna · Answer

> javascriptってありますよね。

> これのプログラムファイルも外部ファイル化することができるのでしょうか？
可能です。下記の表記で読み込んできます。

<head>
<title></title>
<script type="text/javascript" src="外部JSファイルのパス"></script>
</head>
<body>

外部ファイルの作り方はメモ帳などのテキストエディタにJavaScriptを書き込み
「xxxxxx.js」（お好きな名前でどうぞ）で保存します。
下記URLが参考になると思います。
http://www.pori2.net/js/kihon/16.html

無事に解決なさったとのこと良かったですね。それでは今回は「締め切り」という形で
お願いできましたら幸いです。お疲れ様でした。

NymphLuna · Answer

#4、#5、#7、#8です。

#8が文字化けしてしまいましたので、再度正しいものを投稿させていただきます。
ご迷惑をおかけしまして申し訳ありません。

> ですが、今度はなぜだか一番上のテーブルの上に背景色の隙間がでてしまいます。
推測になりますが恐らく
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
を正しく表記されていないのではないでしょうか。（実は当方も同様の失敗をしましたので）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
と
http://www.w3.org/TR/html4/loose.dtd">
の間には「改行」を入れてください。またスペースなどを入れないようにしてください。

NymphLuna · Answer

#4、#5、#7です。

> ですが、今度はなぜだか一番上のテーブルの上に背景色の隙間がでてしまいます。
推測になりますが恐らく
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
を正しく表記されていないのではないでしょうか。（実は当方も同様の失敗をしましたので）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
と
"http://www.w3.org/TR/html4/loose.dtd">
の間には「改行」を入れてください。またスペースなどを入れないようにしてください。

NymphLuna · Answer

#4、#5です。まずドキュメントタイプですがANo.6様が仰っている通り "-//W3C//DTD HTML 4.01 Transitional//EN" がメインになってきていますね。ですのでで問題なく表示できます。（確認しました）上記のまま貼り付けてください。左に寄ってしまうのはANo.6様が回答されている通りです。上記指定をしておかないと左寄りになってしまいます。 > 一番はじめはbodyの直下の部分に

とありまして > 何度かでてきます。そして最後の直前に

とでてきています。テーブルやその他をセンタリングするために設定されているので出てくるものですね。ですので今回の場合、

テーブルとか文字とかその他色々

という具合にの直下に

を入れて最後は必ずの直前で

で終わって下さい。

というのはブロック要素になります。 http://www.tohoho-web.com/html/div.htm こちらがとても詳しい説明をされていますので参考になさってください。

leap_day · Answer

こんにちは＃3ですけれども全体が白くなるのは『px』指定を忘れてるんではないかな～というのはすぐ分かっていたのですが、＃5様のお礼を見てレイアウトが崩れていた理由がなんとなく納得できました（＾＾）＃3をそのまま使用していませんでしたか？最後に作成中のものに

があればidやclassを設定してくださいと付け加えておいたのですがまだその辺までは理解されておられなかったようですね（－－；） div{ }にしておくとHTML内のすべての

に適応されてしまいますので・・・それを実践したのが＃4のソースになっています Strictが厳密なルールの下にHTMLを構成するようになっていて、それを緩やかにして過去のものと互換性を持たせたものがTransitionalになりますどちらを使用しても構わないですが一般的にはTransitionalを使用している人のほうが多いです（理想はStrictでHTMLを書けるようになる事ですが）簡単に言うとTransitionalではStrictで非推奨となっているものがある程度使えたり、ルールにあっていないものでも勝手に判断して表示してくれることもあるということですかねまぁ、W3Cチェック（http://validator.w3.org/#validate_by_input）にかけて見るとよくわかると思いますよ。エラーの数が2～3倍位になると思いますので（下手すれば10倍にも（＞＜））・・・とは言うもののTransitionalの1エラーに対して2,3個エラーが付与してくることが多いのでTransitionalでOKが出せればStrictでもほぼOKにはなりますけど（＾＾）実際にエラーがあっても表示的には何処がエラーなんだろうって感じで普通に表示されてることが多いのでW3Cチェックとたまに出る表示違いさえ気にしなければStrictでもいいとは思いますけど（無責任発言かな？（苦笑） http://www.hajimeteno.ne.jp/html40/att/other.html#doctype ＞なぜだか全体が左に寄ってしまいます。 DTD宣言(）を宣言していないとmargin:auto;は効きませんので左に配置されます＞divというのはどういうタグなのでしょうか？構造ブロックを作るものですと考え方は同じと考えてください（テーブルのようにセル化はできませんが）

NymphLuna · Answer

#4です。何度も申し訳ありません。 > それだとテーブルのとこだけ背景が設定されてしまい。 widthの幅を自由に変更することも可能ですよ。テーブル以外のところも色指定できます。 #my_body { margin:0 auto ; width:お好きな幅px ; background-color:#ffffff;} と最初から明記しておけばよかったですね。例にあげられたサイトのような感じになります。 > 私のHPは一番上からテーブルをいくつかにわけて縦に並べているという形ですので例えばwidth="500"、height="100"のテーブルが10個縦に並んでいても最後まで全て白くなります。テーブルのひとつの色を変えたい場合はと明記すると変更されます。 * {margin:0 ; padding:0 ;}で指定されているので画面全体に余白が無い状態になるため白が上から下までになります。

～

の間に文字を入れても白い設定になります。うまく説明できなくて申し訳ありません。

NymphLuna · Answer

ご希望されているものかわからないのですが下記のような記述ではどうでしょうか。外部CSS * {margin:0 ; padding:0 ;} body {background-color:希望の背景色 ; margin:0px;} #my_body { margin:0 auto ; width:テーブルの幅px ; background-color:#ffffff;} HTMLファイル内

テーブルを含んだHP内容

ドキュメントタイプに　　↑これを忘れないようにしてください。このを入れるとテーブルが自動的にセンタリングされます。

noname#176215 · Answer

> 私のHPの場合表示を早くする為上のタイトル部分、 > メニューと文章、下部と言う風にテーブルを分けているのです。それで何故表示が速くなるのでしょう。というかテーブルはレイアウトをする為のものではないですよ。あくまで表として使うべきです。

テーブル１

テーブル２

テーブル３

こういう状態だということでしたらテーブル３つを囲うテーブルを新たに追加するくらいです。

テーブル１

テーブル２

テーブル３

統括のテーブルに色を付けます。個人的には早めにレイアウトから見直しされた方がいいと思います。

SAYKA · Answer

tableの方が上になるから背景でまず色を付けておいてtableの背景色を「色が付いてない(ように見える色)」にすればできる筈だよ。

因みに「色が付いてない」と「白い」は等価じゃないので要注意。
背景は全員が標準で白とは限らない。

テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。

こんにちは

> javascriptってありますよね。

#4、#5、#7、#8です。

#4、#5、#7です。

#4、#5です。

こんにちは

#4です。

この回答への補足

ご希望されているものかわからないのですが下記のような記述ではどうでしょうか。

> 私のHPの場合表示を早くする為上のタイトル部分、

tableの方が上になるから背景でまず色を付けておいてtableの背景色を「色が付いてない(ように見える色)」にすればできる筈だよ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング