ページの枠内をセンター揃えにしたいのですが

[kazuha]

サイトをセンター揃え指定で作っているのですが、
今日、Macの「iCab(2.53)」と「Netscape 6.1」で確認した所、
コンテンツを囲んでいる枠が左揃えになって表示されてしまっているようなのです。
Macの「Explorer 5」、「Netscape 4.7」と
Windowsの「Explorer 5〜6」
では意図した通り表示されてます。
ブラウザのバグでしょうか？それとも何かタグを変更する事で解決しますでしょうか？

よろしくお願いします。m(_ _)m

[Koh]

たぶん <DIV class="waku-in">
<!---->
<DIV align="center"><BR> に原因があると思われます。
同一種類の要素・タグを入れ子にするのは、HTML の仕様では確か認められていない(はずだ)からです。上記の例の場合、閉じるタグは同じ </DIV> ですが、どちらが何に対応しているのか判断が付きませんよね。

<DIV class="waku-in" align="center"> と1つにまとめれば、iCab(2.53) や Netscape 6.1 でも意図通りに表示されるかもしれません。その場合、 </DIV>
<!--枠エンド-->
</DIV> 中 </DIV> の何れか片方を削除しましょう。

ついでですが、<!---BODY--------------------------------------------> はまずいです。もしかするとブラウザによってはコメント部分の表示がおかしくなることがあるかもしれません。コメント開始の「<!--」と終了の「-->」を除く「-」については、に1文字おきにスペースを入れるなり - を他の文字に変えるなりしたほうがいいでしょう。

[kazuha]

Koh様、御回答ありがとうございました。
試してみようと思います。

また<!-------------->については教えて頂いて良かったです。
教えていただかなかったらそのままずっと使い続けてました…(;^_^A

[dayan]

htmlを自動的にチェックしてくれるサイトもありますよ。

http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

100点満点で点数も出ます。
ただちょっとチェックが厳しいし、DIVはチェックされませんでしたが。

[kazuha]

dayan様。
とても素晴らしいサイトを教えて頂いてありがとうございますv
今回とは別でもこちらのサイトを活用したいなと思います。
（採点の辛さにはかなりヘコみましたが・苦笑）
ただ、「たいへんよくできました」までがんばったのですが（広告部分は除く）、
残念ながら解決しませんでした。
やはりブラウザのバグな気が…


Koh様。
あれからタグをシンプルにし、おっしゃる通りやってみたのですが、
残念ながらダメでした。
<table>、<span>、<P>、なども試したのですが…。
でも「要素の入れ子」はしない方が良いという事を学ばせて頂きましたので、
とても勉強になりました。m(_ _)m

[fuzzie]

原因は、<div align="center">ぢゃないかなぁと思います。
本来<div align="center">って、中のインライン要素を中央寄せにするってことだと思います。tableはブロック要素なので中央寄りにならないわけです（たぶん）。
それでもIEやネスケはブラウザ側で判断して勝手に中央寄せしてくれます。
iCabや新しめのネスケはHTMLの仕様書に忠実に従おうという考え方のように感じられるので、左に寄った表示になるとおもいます。

だから、ブラウザが原因なんだけど、バグではない。ですね。

<div align="center">を<center>にしちゃうと、きちんと表示されたことがあります。
ダメかもしれないけど、試してみてはいかがでしょう。

要素の入れ子は認められています。ただ、あまり入れ子が複雑になると閉じる順番を間違う危険性があるから注意しないといけません。と書いてあった気がします。

それと、<!-- --> はちょっと説明するのが難しいので省略しますが、中に「-」は入れない方が無難ですね。

いろいろなブラウザで試したり、HTML-lintでチェックしたり、本当はとても重要なことなのに、なかなかできません。今度から見習います。

最後に、ワタクシが普段参考にしているマニアックなサイトを紹介します。わからない用語はココに載っているかも。
「鳩丸倶楽部」
http://www.ne.jp/asahi/minazuki/bakera/hatomaru/hatomaru.html

[kazuha]

fuzzie様。

レスありがとうございました。(*^^*)
私も<center>は最初に考えたのですが、iCabのソースでエラーがかかり、また今後廃れて行くタグらしいので、使わない方がいいとどこかで見たような気がして、それ以来使わないようにしているんです。（←タグ初心者なのでいい加減な情報です；；；）
で、<div><table>のダブル入れ子で全体を補強することでで解決いたしました。
御報告遅れてすみません。

しかし結局エラーのかかりやすいデザインみたいなので、サイトデザインを一新しようかと、正しく表示されたデータはアップロードしていないんです。
お世話をかけて申し訳ありませんでした。m(_ _)m

[Koh]

Originally posted by fuzzie
要素の入れ子は認められています。ただ、あまり入れ子が複雑になると閉じる順番を間違う危険性があるから注意しないといけません。と書いてあった気がします。

同じ要素を入れ子にするのは、基本的にはダメだと思います。
たとえば <p>と</p> の中に <p>〜</p> を入れるような場合ですね。確か <div>〜</div> もこれに該当します。

<table>〜</table> や <dl>〜</dl> などは入れ子にできますが、あれは正確には <table>〜</table> の子要素である <td>〜</td> の中に <table>〜</table> を入れるとか、 <dl>〜</dl> の子要素である <dd>〜</dd> の中に <dl>〜</dl> を入れるとかいうことだからOKなんです。

あと、<blockquote>〜<blockquote> の中に <blockquote>〜<blockquote> が入るのは問題ないんですが、これは引用という特殊な意味を持つ要素だからです。

Originally posted by fuzzie
それと、<!-- --> はちょっと説明するのが難しいので省略しますが、中に「-」は入れない方が無難ですね。

HTML 4.01 では、<!-- と --> の間に連続する - が入るのは禁じられています。

[fuzzie]

ワタクシも書き方が悪かったですね。
まず、前回の最後に書いたアドレスが間違ってました。トホホ・・・。
http://www.ne.jp/asahi/minazuki/bakera/html/hatomaru
が正解です。すんませんでした。

廃れてゆくcenterを使わないというのは賛成です。ただ、Kazuhaさんの指定していたDOCTYPEでは使えたと思ったもので（自信なしです）。

Kohさんがおっしゃっている、入れ子についてとコメントについてですが、
同じ要素の入れ子についてですが、
各要素（今回はdiv）ごとに中に書いてよいモノが決まっていて、div要素は、中にインライン要素もブロック要素も書いてよいとありますので、divをdivの中に書いてもOKです。
一方、pの中はインライン要素じゃないとダメなので、ブロック要素であるpはpの中には書けません。
まぁ、こんな感じのことが http://www.w3.org/ の中のHTML4.01の説明に書かれています。（日本語訳もどこかにあるはずですが、場所忘れました）

つぎにコメントなのですが、HTMLの中のコメントは注釈宣言というらしく、SGMLの流れをくんでいるそうです。で、コメントは二つの「--」の間に書くことになっています。だから、
<!--コメント１-- --コメント２-->
というのもHTML的には正解らしいのですが、まぁ、紛らわしくなるので書かない方が無難ですねと書きました。
コメントに関しては自信なさげな文末になっていますが、そのとおり自信がないのです。しかも長くなるから省略しまくってます。ていうか理論複雑すぎ。

Kohさん、ご理解いただけたでしょうか。
コメントについては、ワタクシの知識が間違っているかもしれません。もしよろしければ、根拠となるサイトや書籍をお教え下さい。これを機会に勉強します。

[kazuha]

Koh様。

レスありがとうございました。
同じ要素を入れ子にするのは、基本的にはダメという事ですが、私思っきり<div>〜</div> の入れ子使ってました。（タグは奥が深い…）
なるほど良い事を聞きました。やはり入れ子にする場合は素直にテーブルを使った方がいいのですね。勉強になります。

fuzzie様。
レスありがとうございました。
<div>〜</div> の入れ子は大丈夫なのですか。(私的にはありがたいのですが)
う、…どちらの方の情報が正しいのでしょう…。
もう少し自分でも調べてみようと思います。
とりあえず<table></table>を使っておくのが一番安全なようですね。(^ ^:)

---

コメントにつきましては御指摘のように、<!-- -->の間に-を書くのを止めますね。（今は時間がないのでまだなおせないんですが・涙）
色々ありがとうございました。m(_ _)m

[fuzzie]

まず、kazuhaさんとKohさんにお詫びから。
コメントに付いてはKohさんの御意見が正しいようです。HTML4.01の仕様書の日本語版を見ると、そのように記述されておりました。あやふやな記憶で、惑わせたことをお詫びします。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.4
が該当する所です。

次に、DIVについては
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV
によると、ブロック要素またはインライン要素を0個以上必要と読み取れますので、DIVの入れ子はOKです。
TABLEの入れ子も間違いではありませんが。

参考サイト：HTML4.01の仕様書の日本語版
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/

今回のことで、仕様書を読みなおして間違いに気づくなど、とても勉強になりました。

[Koh]

Originally posted by fuzzie
次に、DIVについては
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV
によると、ブロック要素またはインライン要素を0個以上必要と読み取れますので、DIVの入れ子はOKです。

済みませんそうですね。(お奨めはしませんが)

Originally posted by fuzzie
TABLEの入れ子も間違いではありませんが。

これは、前にも書いたとおり <td>〜</td> や <th>〜</th> の下だったら問題ないけど、<table>〜</table> の 直下　はダメという意味です。
<table>〜</table> の直下にきていいのは、HTML 3.2 以前なら <tr>〜</tr> と <caption>〜</caption> のみ、HTML 4.0 以降では <thead>〜</thead> と <tbody>〜</tbody> (ただしいずれも省略できるので、実質的には HTML 3.2 以前と同じ書き方でも大丈夫) でしょ。

[kazuha]

fuzzie様、Koh様。

詳しいレスをありがとうございました。
今回は本当に勉強になりました。
教えて頂いたようなサイトも知らなければ、タグの正しい使い方も知らず、ただただお二人を感心するばかりです。
未熟ながらも私も早くタグをマスターして、お二人のように他の人のサポートができるようにがんばりたいです。

今回は本当にありがとうございました。m(_ _)m