- ベストアンサー
表の幅・高さ１００％表示が、ブラウザによっては見え方が違う事ついて
- ホームページビルダーで、表の幅と高さを１００％で指定してレイアウトを作成する際、ブラウザによって表示が異なることがあります。
- 特に、InternetExplorer、Opera、Sleipnirでは正しく表示されますが、Firefox、Lunascapeでは正しく表示されないかもしれません。
- これらの問題を解決するためには、CSSの使用やテーブルの構造の見直しなどが有効な対策となります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ごく簡単な例を書いてみました。それぞれを文字コードShift_JSで同じフォルダーに入れて、sample2.htmlを表示してみてください。 ★ウィンドウの幅を小さくしても崩れないか？ 色々なサイズのディスプレイを持つ訪問者に対応できるか？ ★スタイルシートを切り替えるとどうなるか firefoxの場合:表示→スタイルシートで「スタイルシートを使用しない」「標準」「大きい」を切り替えてみる。（目次とメモが逆になる--おまけ） ★携帯端末での表示は？ 携帯用のスタイルシートは無いけど、スタイルシートのない状態で表示されるはず。もちろん携帯用のスタイルシートを用意しておけば、それが適用される。 ★<head></head>内のリンク<link rel=**>を変えずに、色々なページを作っても良いsample3.htmlでは文章を変えるとか ★HTMLのソースが以下に小さいか、ソースを表示してみる。 ☆標準スタイルシート(standard.css)は無いので、作って遊んでごらん？？？ sample2.html＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル2</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" media="screen" href="./sample2.css"> <link rel="Alternate StyleSheet" type="text/css" media="screen" href="./standard.css" title="標準"> <link rel="Alternate StyleSheet" type="text/css" media="screen" href="./big.css" title="大きい"> </head> <body> <h1 id="Top">サンプル２</h1> <h2>スタイルシートで配置</h2> <div class="body"> <div id="index" class="note"> <h2>目次</h2> <ol> <li><a href="tosa">土佐日記</a></li> <li><a href="kage">蜻蛉日記</a></li> <li><a href="isum">和泉式部日記</a></li> <li><a href="mura">紫式部日記</a></li> </ol> </div> <div id="text"> <p> ここに本文を書く。段落は<p></p>で囲もう。---ソースのこの部分に適当な文章を入れる。---- </p> <p> ここにも適当な文章を入れる。 </p> <p class="wide"> 間を空けてみるここにも適当な文章を入れる。 </p> </div> <div id="memo" class="note"> <p> ここにも書いておこう。 </p> </div> </div> <hr> <p class="pageNavi"><a href="#TOP">TOP</a></p> <hr> </body> </html> 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%; }
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞スタイルシートは簡単な、フォントの装飾などに使用していますが、 ＞複雑なデザインを作ることができるのでしょうか？ というか、HTMLでは、そもそもデザイン用に作られているものではない(科学分野)ので、込み入ったデザインをしようとすれば、HTML本来の文書構造はそっちのけで、ブラウザ独自のタグを使ったり、表でもないのに<table>を使ったり、画像を文字代わりに使ったり、間を空けるために意味のない<br>や<p>や空白を使ったり・・・しなければなりません。 スタイルシートは、HTMLは文書構造にしたがってきちんと書き、スタイルシートでデザインするということですから、 『複雑なデザインをするためにスタイルシートはある』 なのです。 暇なとき、サンプルを作ってみますね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそも、表でないものを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でレイアウトをしていると思いますが、まさかいけないこととは、全く知りませんでした…。 スタイルシートでレイアウトするのがベストなのですね。 スタイルシートは簡単な、フォントの装飾などに使用していますが、 複雑なデザインを作ることができるのでしょうか？ なんか技術が必要そうです。 その辺がよく分からないので、調べてみます。 また、ＩＥを基準に作成してはダメとは…。たしかに、ＩＥにはバグが多いみたいです。 ＩＥを使う人が多いので、ＩＥを基準に作っていましたが、これからは他のブラウザを基準にしてみます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ORUKA1951さん、回答ありがとうございます。 サンプルを試してみました。 ＣＳＳでは色々なことができるのですね。 おまけに、ソースが少なくページも軽そうです。 自分なりに調べてみて、 http://www.2step-css.com/や、http://css.uka-p.com/のサイトを見つけました。 どのようにＣＳＳでレイアウトするのかが、なんとなく見えてきました。 サンプルも参考にさせて頂きます。 ただ、テーブルレイアウトとは全く異なるので、 一つのページを作るのが大変そうです。後々は楽そうですが…。 テーブルレイアウトは「良くない」「古い」という意見が多いようですし、 もう少しＣＳＳを勉強し、脱テーブルレイアウトを目指します。 たいへん勉強になりました。 サンプルまで作って頂いて、ありがとうございました。