- ベストアンサー
ワイドディスプレイでサイトが壊れている！
- ワイドディスプレイでサイトが壊れている！１７型のディスプレイでサイトを作成しています。
- 家電店に展示してある最新型の横長のディスプレイでみると、なんと横幅が縮小されています。
- １７型も横長も両方、正常に表示させる方法はないのでしょうか？詳しい方が居られましたら宜しくご指導願います。
- kfjbgut
- お礼率50% (2668/5262)
- その他([技術者向] コンピューター)
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (3)
部分的な、ＣＳＳですか？・・・ .rogoというのは、ロゴを表示したい領域なのかな？・・・ それにしては、widthの値が大きすぎるのですが？・・・ body{ width:850px; height:auto; } でなければ、全体を850pxにすることが、できないのでは？・・・ marginの設定も、間違っています。positionを絶対値で表すのであれば、-表示はありえないのでは？・・・ 見た目だけで、記述していませんか？・・・ borderの指定は、一つにまとめた方がいいのでは？・・・ bordre{ solid 1px #999; } とか、表記されているnoneの後に、色の設定はありえません。 もし書くとすれば、border:none;です。 言われていることから、察すると、rogoというのは、hederの意味なのかな？・・・ だとすると、 header{ width:100%; height:100px; margin:10px; padding:10px; border:solid 1px #ccc; border-radius:10px; } と、いうようになるのでは？・・・ wide幅に合わせるなる、私だと、width:100%とし、margin;paddingを指定しますが、全体的にどんなレイアウトにしたいのか、よくわかりませんので、詳しく説明できません。 レイアウトの勉強を先にされたほうがいいのでは？・・・ 今の主流は、レスポンシブレイアウトです。 閲覧者の環境に合わせ児童対応することが、基本だとおもいますが？・・・・
お礼
有り難うございます。 私の理想は幅８５０px程度で縦の長さはサイトのページによって 違うパターンです。 ですから、ワイド画面であっても幅は画面幅一杯に表示させたい 訳ではありません。 例えば、画面幅が１４００ｐｘの幅があったとします。通常はインチで表示するのでしょうが、よく分からないので１４００ｐｘと仮定します。 この場合、左に２７５ｐｘ(余白)、中央に８５０ｐｘ(サイト幅)、右に２７５ｐｘ(余白)と表示させたいのです。 今は、８５０ｐｘが縮小されているのかどうか分かりませんが横一列のナビボタンが２段になって表示されているので困っているのです。 これって修正は難しいでしょうか？
- foomufoomu
- ベストアンサー率36% (1018/2761)
HTMLでウィンド幅（ピクセル）が変われば、内部の要素の配置が変わるのは、あたりまえの現象ですが。。。 自宅のパソコンで、ウィンド幅を縮めてみてください。（最大化（フルスクリーン）表示しているなら、まず通常ウィンド表示に変えてから幅を縮めます） あるいは、使用しているフォントが違うため、１つの文字の幅が違うのかもしれません。 いずれにしても、HTMLの作成では、「ウィンド幅は、環境によって違うのがあたりまえ」を前提に考えて、配置が変わっても困らないような内容にする必要があります。 それがいやなら、すべての要素を画像にしてしまうしかありません。
お礼
困らないような内容にする方法は難しいですか・・
ソースを見ないとわかりませんが、ｈｔｍｌあるいは、ＣＳＳの記述が間違っているのでは？・・・ サイトＵＲＬがわかれば、どこが間違っているのか、ご指摘はできると思います。 きっと、<body>要素のwidthとheightのあたりか？・・・ その中の、marginあるいは、paddingの指定でおかしくなっているのでは？・・・ nav要素の<ul><li>menu</li><li>menu</li><li>menu</li><li>menu</li><li>menu</li></ul> と、なっていると思われる部分を、display:inlineで、表示するか？・・・ float:left;に変えてみては？・・・ この際、width:100%;とし、ディスプレイ幅に、自動対応させれば、解決できるとおもいます。 文章構造が正しければ、ｃｓｓに間違いがあると、思います。
お礼
ソースは下記となります。 《周りを罫線で囲んでいます》 div.rogo{ width:850px; position:absolute; left:50%; top:00px; margin-left:-425px; margin-top:-45px; border-top: 1px none #999; border-left: 1px none #999; border-right: 1px none #999; border-bottom: 1px none #999; } 《サイトの構成は上部、左部、右部に配置しています。今回のナビは上部で起こった破壊です》 #container{ width:850px; position:absolute; top:57px; left:50%; margin-left:-425px; padding-left:0px; padding-right:0px; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; background-color :#ffffff; }
お礼
有り難うございます。 ８５０ｐｘの件は了解しました。 ｃｓｓ、と、htmlの間違って間違っている部分は８５０ｐｘは関係ないですよね。 勿論、｛width:850px;height:auto;}は追加するとして他の間違っている記述は直接８５０ｐｘ表示に影響する部分ではないですよね。 seo的には良くないのかもしれませんが・・ それと、もう一つ理解できないのですが・・ ナビが８５０ｐｘ以上であれば、どうして１７型では正常にみえるのでしょうか？ ワイドは８５０ｐｘより縮小されて表示される特徴でもあるのでしょうか？