- ベストアンサー
パソコンで見るとレイアウトが崩れる
- web初心者のため、width800px, height700pxのDiv内に文字を入力して簡易のホームページを作成しました。
- しかし、1024px×768pxの2台のPCで比べると一方では正しく表示されますが、もう一方では文章が切れて表示されない状態です。
- 両方のPCで使用しているブラウザはfirefoxで、表示のズームもリセットしていますが、原因がわかりません。また、他の人に聞いたところ、tableタグの使用は避けるべきと言われましたが、その理由も分かりません。お教えください。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
>現在はあまりtableタグを使用しない方が良いと 表であるものをtableでマークアップするのは正しいです。 表でないものを--主にデザインのために--tableでマークアップするのは誤りです。 →『非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 →『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 「現在」がいつのことを指すのかわかりませんが、HTML4.01が勧告になった1999年(12年前)が昔なら、昔からtableをデザインのために使用するのは間違いでした。 →Tables should not be used as layout aids. ( http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#the-table-element )--HTML5仕様書「tableをレイアウト目的で使用すべきではありません」 >勉強で、width800px, height700pxでDiv組した中に文字を入力して簡易のホームページを作りました。 が、そもそもの初心者がおちいりやすい最大の誤りです。 HTMLはプレゼンテーションのためのものではありません。文書をそれを構成する要素に分解して、それぞれの構成要素が何であるかをタグを使ってマークアップするメタ言語です。ワープロやDTPとは別物です。デザインのためならPDFというすばらしいフォーマットがあります。 最初の最初が間違っている--とんでもない参考書かサイトを参考にしている??? divやspanは、『id属性及び class属性と併用することで、文書に構造を付加するための ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』タグです。たとえば、その部分が文書の本文だと知らしめたいときは <div class="section"></div>、ナビゲーションのためなら<div class="nav"></div>のように使います。 >もう片方のPCで見ると下側の文章が切れて全ての文章が入っていないようです。 ブロック要素のoverflowプロパティのデフォルト(Initial)は、visible(表示)ですから、はみ出した部分は、overflow:hiddenを指定していない限り表示されるはずです。ただし、次のブロックの背景色にtransparent以外を指定していると、それで覆い隠されてしまいます。 ★HTMLは単に文書構造をマークアップするためだけに使用すること。 ★その文書構造を利用してスタイルシートでプレゼンテーションを指定していくこと これが基本です。最初にここを間違うと上達しません。 →HTML,CSSの記述について - HTML - 教えて!goo ( http://okwave.jp/qa/q7636233.html ) で回答したサンプルをごらんいただくと、あの程度の複雑なことをするにしてもHTMLが複雑になるわけではありません。 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より のあたりをよく読んでおくこと・・
その他の回答 (1)
- gogawaku
- ベストアンサー率26% (124/464)
>height700px DIVでBOX指定するときは、全体の大きさをいきなり指定したら切れるのは当たり前 ブラウザーの表示でフォントの大きさなどの指定がまちまちだから。 親のBOXなら高さはauto指定 数値指定は、そのBOXにインラインフレームで別のHTML呼び出して スクロールを可能にするときと、画像ファイルで大きさがきっちり決まっているときだけ。 >現在はあまりtableタグを使用しない方が良いと言われました。これは何故でしょうか? 昔は仕切りがテーブルかフレームだけだったので多用されたが HTMLソースが無駄に長文になるのとテーブルのフレームの数値が変るだけで全体がズレルので 単純な表表示以外は使わないほうがいいよとの指導 逆に単純な表をわざわざCSSで組むのも時間の無駄だし自己満足で終わる