表の幅・高さ１００％表示が、ブラウザによっては見え方が違う事ついて

Question

初めまして。お世話になります。現在、ホームページを作成していますが、分からない事がありますので、質問させて頂きました。ホームページビルダーで、表（tableタグ）を使ったレイアウトを作成中です。表の幅（width）と高さ（height）を共に１００％で指定し、表の中をセル（td）で細かく仕切り、その中に画像やテキストを配置し、レイアウトしたいと思っています。表のサンプルソースはこんな感じです。細かくてすみません…。

上記のソースでは表の中に、幅７００pｘの青色の四角いスペースを作っています。しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。高さは大丈夫なのですが、等の、 width="700"が無視され、青色の四角いスペースまでもが、１００％表示になってしまいます。どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか？また、Firefox、Lunascapeのバージョンが古いのですが、これらの影響もあるのでしょうか？ Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。よろしくお願いいたします。

ORUKA1951 · Accepted Answer

ごく簡単な例を書いてみました。それぞれを文字コードShift_JSで同じフォルダーに入れて、sample2.htmlを表示してみてください。 ★ウィンドウの幅を小さくしても崩れないか？　　色々なサイズのディスプレイを持つ訪問者に対応できるか？ ★スタイルシートを切り替えるとどうなるか　　firefoxの場合:表示→スタイルシートで「スタイルシートを使用しない」「標準」「大きい」を切り替えてみる。（目次とメモが逆になる--おまけ） ★携帯端末での表示は？　　携帯用のスタイルシートは無いけど、スタイルシートのない状態で表示されるはず。もちろん携帯用のスタイルシートを用意しておけば、それが適用される。 ★内のリンクを変えずに、色々なページを作っても良いsample3.htmlでは文章を変えるとか ★HTMLのソースが以下に小さいか、ソースを表示してみる。 ☆標準スタイルシート(standard.css)は無いので、作って遊んでごらん？？？ sample2.html＿＿＿＿＿＿＿＿＿＿＿＿＿＿サンプル2

サンプル２

スタイルシートで配置

sample2.css＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ @charset "Shift_JIS"; body { line-height: 1.4em; padding: 10px; background-color: rgb(220,220,220); } p{ text-indent: 1em; margin: 0.4em 0em; } body>h1,body>h2{ text-align: center;} h1 {font-size: 200%;} h2 {font-size: 170%;} hr{ display: none;} #index h2{display: none;} div.body{ position:relative; margin: 0px 20%; border: solid blue 30px; background-color: white; } div.body div#text{ padding: 1em; } div.body div#text p.wide{ margin-top: 10em; padding-top: 5em; border-top: solid 1px red; color: green; } div.note{ position: absolute; top: 0px; width: 25%; border: 6px rgb(160,255,160) solid; font-size: 0.8em; padding: 10px; } div.body div#index{ /*left: -37%; */ right: 109%; border-style: outset; } div.body div#memo{ left: 109%; border-style: inset; } p.pageNavi{ margin: 10px 20%; text-align: center; } big.css＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ @charset "Shift_JIS"; body { font-size: 16pt; background-color: white; } body>h2{ font-size: 10pt; } div.body{ border-color: pink; } div.body div#text{ padding: 0.5em; } div.body div#text p.wide{ margin-top: 5em; padding-top: 2em; } div.body div#index{ right: 109%; } div.body div#memo{ left: 109%; }

ORUKA1951 · Answer

＞スタイルシートは簡単な、フォントの装飾などに使用していますが、＞複雑なデザインを作ることができるのでしょうか？　というか、HTMLでは、そもそもデザイン用に作られているものではない(科学分野)ので、込み入ったデザインをしようとすれば、HTML本来の文書構造はそっちのけで、ブラウザ独自のタグを使ったり、表でもないのにを使ったり、画像を文字代わりに使ったり、間を空けるために意味のない
や

や空白を使ったり・・・しなければなりません。　スタイルシートは、HTMLは文書構造にしたがってきちんと書き、スタイルシートでデザインするということですから、『複雑なデザインをするためにスタイルシートはある』なのです。　暇なとき、サンプルを作ってみますね。

ORUKA1951 · Answer

そもそも、表でないものをtableを使うのは避けてください。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
14.1 スタイルシートの概説( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より

・・・・・・略・・・・・・・ Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。

    * メーカー独自拡張のHTMLを使う。
    * テキストを画像に置き換えて表現する。
    * 余白制御のために画像を用いる。
    ★ ページレイアウトの目的で表を用いる。★
    * ・・・略・・・
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
11.1 表の概説( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。・・・略・・・こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
<TABLE>をどうしよう( http://www.asahi-net.or.jp/~wq6k-yn/konomac.html#4.5 )より
・・・略・・・「表であることが自然な場合」にtableを使いたいと思うのはもっともなことです【レイアウトのためにtableを使うなどは論外】。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　耳にタコができるほど、散々聞かされているはずなのに、いまだにtableタグを使ってデザインしようとする人がいるとは、驚きです。ホームページビルダーが最も攻撃される部分かも。
　HTMK4.01 Strictで試したところ、IEのみ、表示されて他のブラウザは崩れます。(SleipnirはレンダリングにIEを使っているので評価できない)。IEは、配置に関しては特にウェブ標準とは異なった挙動をするためＩＥのあわせて作成したらダメ。IE8以降はIEのウェブ標準に移行する。

★仕様書にも書かれているように、tableは逐次表示を手助けするための方法を取らないといけません。内容サイズによって伸縮します。ですから、この表では、FurefoxやLunascape、Operaの表示が正しい。

★もう、長い間tableを使って配置したことはないのですが、スタイルシートを使えばたちどころに完結するし、HTMLとしても正しい。

表の幅・高さ１００％表示が、ブラウザによっては見え方が違う事ついて

ごく簡単な例を書いてみました。

＞スタイルシートは簡単な、フォントの装飾などに使用していますが、

そもそも、表でないものをtableを使うのは避けてください。

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

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

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

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