HPの横幅が広くなるのを防ぐにはどうすればいい？

質問

取引先の会社のHPの一部を作成する仕事をしています。
自社のブラウザで確認しても気がつかないのですが、
取引先に渡した後、本サーバにアップされたページを
確認すると、なぜか、横幅が広がっています。
下にスクロールバーがでてしまい、困っている
との報告を受けたのですが、どこを直せばいいのかが
はっきりとは分かりません。
原因としてどこを直せば的確でしょうか。
問題がありそうなところを確認しながら
直せればいいのですが、直接取引先へは見に行けない状態です。（物理的に遠いので）

スタイルシートを指定しています。

ページ内で使用している
テーブルの横幅はピクセル指定していますが、
中は％指定で　７：３くらいにしています。

テーブルの中身もピクセル指定したら
いいのでしょうか？

横幅が、別のブラウザで見ても、広がらないように
指定する方法を教えてください。

困っています。どうか皆さん、知恵を貸して下さい。お願いします！！

回答No.6

nogutan

画面解像度の問題ではないでしょうかね。
現状のページ横幅の基準としては、８００×５２０くらいで作成します。
これは、人によって、モニタの解像度が
８００×６００だったり、１０２４×７６８だったりするためです。
それ以上もありますが。
それで、幅を１０２４基準で作成してしまうと、
幅８００の画面解像度で見ているひとは、下にスクロールバーが出てしまいます。
同様に、幅が１０２４でも出る場合があります。
ＰＣを良く使用しているほど、気にならないのですが
ＰＣを良く知らない、またはあまり使わない人は
インターネットエクスプローラの左側に、お気に入りを表示させます。
そのことにより、左側に２００ピクセル分、エリアが取られてしまうのです。
そこらへんの問題ではないのかなと思います。

お礼

画像解像度まで、考えが及ばなかったので、
勉強になりました！
ありがとうございました！
次回提出のときに確認してみようと思います。

現在、ページ作成中の段階でして、
はっきり解決したとはいえませんが、
ソースの中身を整理し直して作っています。
ごちゃごちゃしていた
テーブルの中のソースを新しく作り変え、
提出するつもりです。

もし、それで又幅広がりがおこったら
今は、横幅の指定を600にしていますが、
少し縮めてみようかと思っています。

ご丁寧な回答、ありがとうがざいました！

回答No.5

koutarou504

＞取引先の会社のHPの一部を作成する仕事をしています。
大変失礼になるかもしれませんが、質問文の内容からして細かい処から段階を踏みたいと・・・。

１）どの様な物を作りたいのでしょうか？
閲覧環境のＯＳ，ブラウザの種類・バージョン，ディスプレイの状態（解像度），ブラウザのウィンド状態（最大化，ディスプレイの２／３程度など），スタイルシートの有効無効・・・。基本使用フォントなども関わってくると思うし・・・。
で、どの様な条件で閲覧する物を作成する必要があるのでしょうか？？？

ここでとりあえず、どの環境でもという事だと解像度1024*768 で横一杯にサイズを固定して作れば 640*480 では当然スクロールバーが出ますのでレイアウトが可変でないと不可能です。
また、ブラウザによっていろいろソースの解釈が異なったりバグもあります・・・。

１－ａ）とにかく横スクロールバーが出る様な事態が回避できれば良いのか？
その場合、各要素（例えばテーブル）の横幅をパーセント指定として、全てウィンドを基準に考える。文字列は適度に改行される様に逆に改行回避となる様な指定をしない様に注意する事。これは中身の情報（文字列など）がいれものの領域を超えるとサイズ指定を無視して広がる事がある為・・・。

１－ｂ）特定の条件で期待する結果が得られれば良いのか？
その場合、条件を明確にしないと・・・。というか、質問文で明示されていない事から契約としてもどこまで確認されているのか不安です・・・。（仕事に関する質問ですよねぇ・・・。）
尚、先にも書きましたが無条件に全ての期待がかなうというのはまず不可能ですので、状況によると期待する条件自体が無理という結論もありますので、その辺は妥協するしかありません・・・。

２）（納品先の）動作環境が不明（検証環境が手元にない）というのは、どの様な開発，検証をしているのでしょうか？
そもそも、何を以って完成としているのかによって、するべき事も違ってきますし、なにより問題の把握が伝聞だけという事からもしかして問題の現象自体が違う可能性もあります・・・。
例えばＰＣにあるフォントが違ったり、同じブラウザと思っていたらそのブラウザに拡張ツールが追加されていたりしてそれが影響していたりとか、可能性は考えればいろいろあります・・・。
手元に類似環境を作るなどしてみるのも必要かと思いますが・・・。
そもそも環境がないと修正しても検証できないでしょう・・・。

お礼

そうですね。
質問が細かいところまで説明されてなくて
すみません。ご迷惑かけました。

閲覧環境の条件は、どの環境でもというのが理想ですが、とりあえず、90%の人がみれるようにという事を条件として言われています。

１－ａ）を受けて…
現在、テーブル幅を　ピクセル指定していますが、
パーセント指定に変えて作成してみます。

拡張ツールなども先方に確認してみます。
細かいアドバイスをありがとうがございました！

回答No.4

chie65536

＞ページ内で使用している
＞テーブルの横幅はピクセル指定していますが、
これが問題。

閲覧者のブラウザのウィンドゥの最大横幅は、使用しているパソコンの画面の解像度に依存します。

閲覧者のパソコンの画面の解像度が768ｘ512だったら、ウィンドゥスタイルで全画面表示を指定してもブラウザは横768ピクセルまでしか広がりません。

また、閲覧者のブラウザの文字サイズが「中」になってるとは限らないので、TDタグにnowrap属性を付けた場合、横に何文字書けるかは、閲覧者のブラウザの文字サイズ設定や使用フォントに依存します。

ですので、ＷＥＢページ上では、表示位置をピクセルで指定するスタイルシートの記述や、横幅のピクセル数を固定した記述は極力避けなければなりません。

＞テーブルの中身もピクセル指定したら
＞いいのでしょうか？
これは逆効果です。余計に「どうにもならない状況」に陥って自分で自分の首を締めます。

ページトップに
「Internet Explorer 6、画面解像度を横幅768ピクセル以上に設定しての閲覧を推奨します」
などと書いておき、設計時には、画面解像度の横幅を768ピクセルに設定して閲覧テストをしましょう。

お礼

画面の解像度を調べ、
作成環境等についてもう一度、
先方に細かく確認してみます！
ピクセル指定からパーセンテージ指定へ
変更して作成してみます。

ありがとうございました！

回答No.3

noname#19206

テーブルの中に長い文字列を打ち込むと、はみ出す場合がありますので、
ある程度のところで改行してみてはどうでしょう？

お礼

そうですね。
それが原因かもしれませんので、
テーブル内の文字は
長くなり過ぎないよう気をつけて、
作成してみます！

まだ、次回分作成中の段階なので
はっきりとはいえませんが、
それで大丈夫だと思います。

回答、ありがとうございました！

回答No.2

Jodie0625

＞別のブラウザ
取引先のブラウザはあなたが動作確認しているブラウザと違うのでしょうか？
違っている場合、その種類とバージョンを聞いてみて、自分の環境で再現することができませんでしょうか。

こういったトラブルを避けるために、動作確認は○○で行い、それ以外は保証対象外と受託契約で明記することがあります。

お礼

取引先のブラウザの種類とバージョンに
ついて確認してみます！

アドバイスありがとうございました！

回答No.1

mo_gu

横幅どれくらいにいているのでしょうか？
あなたの画面の解像度と取引先の解像度は同じなのですか？

お礼

いままで作成したデータでは、ここ２年くらいは
横幅は600ピクセルに指定しています。

自社の画面の解像度と取引先の解像度について
未確認でした。確認してみます。

どうもありがとうございました！！