私HPをつくっているのですが、
テーブルレイアウトをしているのですが、
最近CSSを勉強しだしまして、
テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、
そのテーブル以外の部分に背景色を設定したいと思っております。
どのようにしたいかというと
参考HPをあげておきます。
http://www.neutrals.jp/works.html
http://www.kekkon-navi.org/
http://www.plusmoney.jp/
この用な感じにメニューや本文の部分は白くて、
それ以外のところの背景が色をついている状態にしたいです。
外部CSSで全ページに適用していこうと思っているのですが、
CSSにはどのように記述したらよろしいでしょうか?
お詳しい方よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
こんにちは
tableはその内容をすべて読み込んでから表示されると聞いたことがあるので個人的にはあまり速くなっているという感覚はないような感じがしますが・・・
ちょっとした追加で実現したいのであれば
外部CSS
div {
width:table幅or希望の幅 px;
margin:auto;
background-color:white;
}
body {
background-color:希望の色;
margin:0px;
}
<head>
<link rel="stylesheet" href="外部CSSのパス" type="text/css">
</head>
<body>
<div>
現在作っているHP内容
</div>
</body>
でおそらくできると思います(現在作っている部分に<div>を使っているなら全体を覆う<div>にidかclassを設定して外部CSSのdivを#id名、.class名に変更してください)
ご回答ありがとうございます。
アドバイスいただいたソースでやってみたいのですが、
レイアウトが崩れてしまいうまくいきませんでした。
背景を青にすることができたのですが、
白のdivを追加すると全体が白くなってしまうのです。
プレビューすると全体の背景が白でなぜかレイアウトもばらばらになってしまいます。
No.10
- 回答日時:
> 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
無事に解決なさったとのこと良かったですね。それでは今回は「締め切り」という形で
お願いできましたら幸いです。お疲れ様でした。
No.9
- 回答日時:
#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">
の間には「改行」を入れてください。またスペースなどを入れないようにしてください。
できました!
ありがとうございました!
今回はお世話になりありがとうございましたm(_ _)m
便乗質問で別件があるのですが、
javascriptってありますよね。
これのプログラムファイルも外部ファイル化することができるのでしょうか?
No.8
- 回答日時:
#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">
の間には「改行」を入れてください。またスペースなどを入れないようにしてください。
No.7
- 回答日時:
#4、#5です。
まずドキュメントタイプですがANo.6様が仰っている通り
"-//W3C//DTD HTML 4.01 Transitional//EN" がメインになってきていますね。
ですので
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
で問題なく表示できます。(確認しました)上記のまま貼り付けてください。
左に寄ってしまうのはANo.6様が回答されている通りです。
上記指定をしておかないと左寄りになってしまいます。
> 一番はじめはbodyの直下の部分に<div align="center">とありまして
> 何度かでてきます。そして最後の</body>直前に</div>とでてきています。
テーブルやその他をセンタリングするために設定されているので出てくるものですね。
ですので今回の場合、
<body>
<div id="my_body">
<div align="center">
テーブルとか文字とかその他色々
</div>
</div>
</body>
という具合に<body>の直下に<div id="my_body">を入れて
最後は必ず</body>の直前で</div>で終わって下さい。
<div>というのはブロック要素になります。
http://www.tohoho-web.com/html/div.htm
こちらがとても詳しい説明をされていますので参考になさってください。
ご回答ありがとうございます!
できました!(^^)
ですが、今度はなぜだか一番上のテーブルの上に背景色の隙間がでてしまいます。ちょうど一番上のテーブルに<br>をしたような感じです。
もちろんbrははいっておりません。
これはdivがブロック要素ということが影響しているのでしょうか?
No.6
- 回答日時:
こんにちは
#3ですけれども
全体が白くなるのは『px』指定を忘れてるんではないかな~というのはすぐ分かっていたのですが、#5様のお礼を見てレイアウトが崩れていた理由がなんとなく納得できました(^^)
#3をそのまま使用していませんでしたか?
最後に作成中のものに<div>があればidやclassを設定してくださいと付け加えておいたのですがまだその辺までは理解されておられなかったようですね(--;)
div{ }にしておくとHTML内のすべての<div>に適応されてしまいますので・・・
それを実践したのが#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.htm …
>なぜだか全体が左に寄ってしまいます。
DTD宣言(<!DOCTYPE ~>)を宣言していないとmargin:auto;は効きませんので左に配置されます
>divというのはどういうタグなのでしょうか?
構造ブロックを作るものです
<table>と考え方は同じと考えてください(テーブルのようにセル化はできませんが)
No.5
- 回答日時:
#4です。
何度も申し訳ありません。> それだとテーブルのとこだけ背景が設定されてしまい。
widthの幅を自由に変更することも可能ですよ。テーブル以外のところも色指定できます。
#my_body { margin:0 auto ; width:お好きな幅px ; background-color:#ffffff;}
と最初から明記しておけばよかったですね。例にあげられたサイトのような感じになります。
> 私のHPは一番上からテーブルをいくつかにわけて縦に並べているという形ですので
例えばwidth="500"、height="100"のテーブルが10個縦に並んでいても最後まで全て白くなります。
テーブルのひとつの色を変えたい場合は<td width="500" height="100" bgcolor="お好きな色">と明記すると変更されます。
* {margin:0 ; padding:0 ;}で指定されているので画面全体に余白が無い状態になるため白が上から下までになります。
<div id="my_body">~</div>の間に文字を入れても白い設定になります。
うまく説明できなくて申し訳ありません。
この回答への補足
何度もすみません、
時間がとれたのでやってみたのですが、
途中まではうまくいきました(’’;)
問題が一つありまして、背景は青にできて、真ん中の縦に並ぶテーブルのバックもきちんと白になっています。
ですが、なぜだか全体が左に寄ってしまいます。
これを解消する方法はありますでしょうか?
また
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
というアドバイスをいただいたのですが、
http://www.tagindex.com/html_tag/basic/doctype.h …
で少し勉強しまして、教えていただいたものだと非推奨タグが使えないとのことで、私何度も非推奨タグを使っているはずですので、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
にしても問題はありませんでしょうか?
後もう少しなのですが、
なにしろCSSをはじめてやりはじめたばかりでお伺いすることばかりで申し訳ないのですが、よろしくお願いいたしますm(_ _)m
ご丁寧にご回答ありがとうございますm(_ _)m
今日も忙しくHPが更新できないでいるのですが、
アドバイスいただいたCSSを素人ながら理解してみたのですが、
背景に青(例えば)をおき、その上のテーブルの後ろにちょうど白の背景がくるように両者ともCSSで指定するということですね。
ありがとうございます。なんだかできそうな感じがしてきました。
一つ気になったのですがdivというのはどういうタグなのでしょうか?
自分のHPのソースを見てみたのですが、
一番はじめはbodyの直下の部分に<div align="center">とありまして、
何度かでてきます。そして最後の</body>直前に</div>とでてきています。
このdivというのはcenterやleftなど整列を指定するタグなのでしょうか?
No.4
- 回答日時:
ご希望されているものかわからないのですが下記のような記述ではどうでしょうか。
外部CSS
* {margin:0 ; padding:0 ;}
body {background-color:希望の背景色 ; margin:0px;}
#my_body { margin:0 auto ; width:テーブルの幅px ; background-color:#ffffff;}
HTMLファイル内
<head>
<link rel="stylesheet" href="外部CSSのパス" type="text/css">
</head>
<body>
<div id="my_body">
テーブルを含んだHP内容
</div>
</body>
ドキュメントタイプ<!DOCTYPE>に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
↑これを忘れないようにしてください。
この<!DOCTYPE>を入れるとテーブルが自動的にセンタリングされます。
お返事ありがとうございます。
今日は忙しくてHPの更新ができないのですが、
アドバイス頂いたものですと、
背景に色を設定して
その上のbodyにもテーブルに背景を設定するといったことだと思うのですが、
それだとテーブルのとこだけ背景が設定されてしまい。
私のHPだとおそらく無理なんではないかなと思います。
私のHPは一番上からテーブルをいくつかにわけて縦に並べているという形ですので、通常のテーブルレイアウトのように1つのテーブル内に入れ子にしていっているものとは違うのです(’’;)
ほんとは私のHPのURLを載せたいのですが、
それをして一度gooの方から削除されましたからできないんです。
アドバイス頂いたものを明日の午前中に試してみたいと思います。
No.2
- 回答日時:
> 私のHPの場合表示を早くする為上のタイトル部分、
> メニューと文章、下部と言う風にテーブルを分けているのです。
それで何故 表示が速くなるのでしょう。というか テーブルはレイアウト
をする為のものではないですよ。あくまで表として使うべきです。
<body>
<table summary="タイトル部分"><tr><td>テーブル1</td></tr></table>
<table summary="メニューと文章"><tr><td>テーブル2</td></tr></table>
<table summary="下部"><tr><td>テーブル3</td></tr></table>
</body>
こういう状態だということでしたら テーブル3つを囲うテーブルを新た
に追加するくらいです。
<body><table summary="総括"><tr><td>
<table summary="タイトル部分"><tr><td>テーブル1</td></tr></table>
<table summary="メニューと文章"><tr><td>テーブル2</td></tr></table>
<table summary="下部"><tr><td>テーブル3</td></tr></table>
</td></tr></table></body>
統括のテーブルに 色を付けます。
個人的には 早めにレイアウトから見直しされた方がいいと思います。
ご回答ありがとうございます。
表示が速くなるのはテーブルを分割してるため体感速度が速くなるということです。
やはりテーブルでつくってしまっているものはテーブルでしかできないようですね(;;)
No.1
- 回答日時:
tableの方が上になるから背景でまず色を付けておいてtableの背景色を「色が付いてない(ように見える色)」にすればできる筈だよ。
因みに「色が付いてない」と「白い」は等価じゃないので要注意。
背景は全員が標準で白とは限らない。
ご回答ありがとうございます。
通常ならそれでできるはずなのですが、
私のHPの場合表示を早くする為上のタイトル部分、
メニューと文章、下部と言う風にテーブルを分けているのです。
ですので、
そうするとテーブル内だけ白くなり私の意図しているものとちがうようになってしまうのです。
説明不足ですいませんでした。
この場合どのようにすればよいのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Access(アクセス) ACCESS2019 ナビゲーションウィンドウの色 1 2022/05/10 17:15
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- ノートパソコン AMDディスプレイ設定 暖色見にくい 2 2023/07/18 17:24
- モニター・ディスプレイ ASUS ノートパソコン有機EL AMDディスプレイ 白 1 2023/07/22 13:36
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
tableの背景色のみ半透明にする
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
更新するとずれる?
-
TABLEタグの幅指定
-
HTMLでテーブルを横に並べる方法
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
tableの要素(tr、td)に一...
-
<img>タグにCSSのclass設定可能?
-
TRタグの余白をcssで設定するには
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
(HTML)Tableを任意の位置に置...
-
テーブル結合 縦横両方するには?
-
cssで、テーブルのtdの中の文字...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
CSSで特定のテーブルだけに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
tableのheight指定が効かない
-
ウィンドウのサイズを変えても...
-
テーブル内に画像を表示したい。
-
2つのテーブルを左右に表示した...
-
CSSで文字を一番下の中央に表示...
-
複数のテーブルを無条件に中央...
-
箇条書きリストのすぐ横に画像...
-
画像の横にテーブルを。。。
-
【CSS】縦横スクロールテーブル...
-
プルダウンの表示位置
-
HTMLでページの幅を設定し...
-
DWで、デザインビューに表示さ...
-
ヘッダー固定のスクロールが可...
-
画像と、セルのつなぎ目に白い...
-
ドリームウィーバーでテーブル...
-
一部CSSを無効にする
おすすめ情報