WEBサイトの画面サイズ表示について

このQ&Aのポイント
  • WEBサイトの画面サイズ表示について知りたいです。PCとMacで画像や文字の配置が異なるようで、修正方法を教えてください。
  • デスクトップPCとMacでの画面表示が異なるため、WEBサイトの画面サイズ表示についてアドバイスが欲しいです。
  • PCとノートでのWEBサイトの画面表示に差異があるため、画面サイズに関わるCSSの指定方法やアドバイスをお願いします。
回答を見る
  • ベストアンサー

WEBサイトの画面サイズ表示について

どなたかご存知の方、ご回答お願い致します。 現在制作しております、WEBサイトですが、自分のPCは デスクトップタイプでwindows os7になります。 先日制作したサイトをMac Bookで観覧したところ、 自分のPCとは画像などの配置が異なっておりました。 おそらく画面のサイズ(解像度)が異なるので仕方ないと思っておりましたが… 気になってしまい、出来れば修正したいと考えております。 自分のデスクトップPCでは全てが収まるよう配置しているのですが、 ノートでは、一番下にあるCopyright…部分が画面したギリギリになっておりました。 それぞれの画像や文字の配置はCSSでtop50 left100などにて指定してます。 どの解像度で見てもあまり変わらない指定方法や、何かアドバイス下さい。 お手数をお掛け致しますがどうぞ宜しくお願い致します。

  • CSS
  • 回答数3
  • ありがとう数12

質問者が選んだベストアンサー

  • ベストアンサー
  • balloon23
  • ベストアンサー率69% (16/23)
回答No.1

指定の仕方から、もしかしたらposition:absolute;で指定してますでしょうか?   ぱっと思いつく対策として ・絶対配置の基準(親)となるボックスを作る (body以下をdivで囲んでcssでposition:relative;width:○○px;margin:0px auto;指定) くらいでしょうか?   多用すると編集がめんどくさくなりがちなので、あまりレイアウトでは使わない方が無難とは思います。

mauichicken
質問者

お礼

balloon23さん ご回答有難う御座います。 対策を試してみました。 おっしゃるとおり…レイアウトでは使用しない方が 良さそうですね(汗) もう少し試行錯誤してみます!! また機会がありましたらどうぞ宜しくお願いします。 有難う御座いました。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

皆がワードやIllustratorでページを作らず、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 )]より  という目的の言語だからです。これが唯一最大の目的と言っても良い。  あなたがお使いのノートとか、Mac bookなんて狭い範囲じゃありません。最近は様々な解像度のスマホも訪問してくるし、レガシーな携帯電話も、超幅広のPCでも、縦型画面のデスクトップでも訪問されます。  そもそも最初から画面サイズを固定してしまったのが原因かと思います。

mauichicken
質問者

お礼

ORUKA1951さん ご回答有難う御座います。 そうですね…解像度は様々ですね!! 今後もっと増えて種類も豊富になりそうですね(汗) もう一度考慮してみます。 また機会がありましたらどうぞ宜しくお願いします。 有難う御座います。

回答No.2

全て%で指定すれば比率で表示されます。

mauichicken
質問者

お礼

talooさん ご回答有難う御座います。 %での表示指定ですか!! なるほど…早速修正して確認してみます。 有難う御座いました。 また機会がありましたら宜しくお願いします。

関連するQ&A

  • 画面表示がサイトによって変わるのをなんとかしたい

    WINXPで、20.1型ワイド(解像度1680×1050)のディスプレイを使っています。サイトによって表示のされ方が変わる訳が知りたくて質問です。 1.画面いっぱいに表示され、文字の大きさ配置とも問題なし 2.画面の中央または端だけを使った形(B5の資料をA4の紙でコピーしちゃった時みたいな感じ)に表示され文字や画像が小さく、パスワード入力欄もすごく細い 3.画面中央しか使わずに縦長に表示され、文字はいいのだけど縦長になっているため変なところで改行があり、読みにくい 例として、gooやYahooトップ他7割方は1、gooリサーチ、某デパートや鉄道会社などは2、教えてgooトップ、楽天オークショントップなどが3、といった具合で、老眼の私には2はつらいです。解像度を変えればなんとかなるかもしれませんがサイト毎に変えるのもめんどうです。何か設定が間違っているのでしょうか。つい最近壊れるまで使っていた古いPCは使いこなせていたのですが、新しいのがまだまだ慣れなくて。よろしくお願いします。

  • widthを100%にした時の画面調整について

    こんにちは、 WEB制作に関する質問です。 今制作しているサイトをフルスクリーンにしようと考えています。 #wrapper { width: 100%; height: 任意の値 } また#header、#content、#footerなどにもwidth: 100%の値を同様に入れました。 その中にdivなどのブロックを置いてデザインをしました。 そこで、疑問なのですが、わたしが使っているPCの画像解像度が1366/768です。 この解像度に合わせて作っているので、自分のPCでは問題なく、画面に表示されますが、 例えば他の解像度のPCや、あるいは他のディスプレイのサイズだと、形が崩れていたり、自分のパソコンで映っていた時のものと見栄えが変わってしまいます。 そこでディスプレイや解像度が変わっても、それに合わせてサイトが自動で調節してくれるような、コード(例えばjavascript)のようなコード記述ってあるのでしょうか? 画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。 もしあれば、教えていただきたいと思っています。 よろしくお願いします。

    • 締切済み
    • CSS
  • 画面の表示がおかしい

    宜しくお願いします。 先日BenQのG2220HDという液晶に買い換えました。 ビデオボード(RADEON X550)のドライバを最新版に更新、 画面の解像度も指定通り1920×1080に設定しました。 なのですが、毎度PCを立ち上げると画面の表示がおかしいのです。 設定してある解像度よりも小さくなっている様子で、 画面の四隅にカーソルをやると表示しきれていない方に向かって スクロールを始めます。 そこで解像度の設定を確認するのですが正常です。 一度他の解像度に変えてから再び元の解像度に戻したり、 ATIのソフトウェアのプロパティをいじると正常になることがあります。 しかし、一度電源を落とすと同じ状態に戻ってしまいます。 「画面の解像度のスライダー」が液晶画面の適正解像度よりも大きい 方向に選択出来る様子なのですが(2048×1536)、 以前の液晶では適性の解像度までしか選択出来なかった気がします。 これは何か関係あるのでしょうか。 また、僕はデュアルディスプレイ構成で二つの画面のサイズは違います。 この様な状況です、どうぞ宜しくお願い致します。

  • サイトの画面表示が大きくて見にくい・・

    PCを買い換えたところ、サイトを表示する際 画面いっぱいまで広げないと見れなくて困っています。前のPCでは小さめな画面で全体が見れていたんですが・・ また、デスクトップのアイコンも大きいです。 これもわかる方いらっしゃいましたら教えてください。 表示の文字の大きさは中にしてますが、文字は 小さくなりますが画像はでっかいままです。 PCは NEC LavieL LL770です。 よろしくお願いします!

  • 動画の全画面表示について

    質問させていただきます。 インターネットでDLした動画を観覧したのですが、全画面表示にした時に、上下に黒帯が表示されてしまいます。 1240×1024の解像度でやっているのですが、もう一台のノートパソコンで観覧すると、上下に帯は表示されないのです・・・。 こちらも1240×1024の解像度なので違いはないと思うのですが、何か設定の違いがあるのでしょうか? PS:帯が出てしまうPCで使っているモニターにノートパソコンから表示させても、帯は表示されませんでした。

  • デスクトップ画面端の表示がされず画像が残る

    開いてくださりありがとうございます。 添付させて頂いた画像のように、デスクトップの表示がおかしくなってしまいます。 いつからこの現象が起きているのかはわかりません。 以前使っていた方に聞いても「前からこのままで直らない」とのことでした。 画面の解像度等いじっても直りません。 解決策をご存知の方教えて下さい、よろしくお願い致します。

  • 画面サイズについて(はみ出し)教えて下さい

    パソコンは東芝・ダイナブック2140でOSはウインドウズ98です。 ネットでのスタート画面を「yahooトップページ」にしてあるのですが、「新しいyahooトップページ」だと画面からはみ出しているのです。 下に左右のスクロールバーが出てきて1画面では収まらなくなっています。 画面設定は、標準の解像度800×600にしてあり、他のサイトやデスクトップ画面はぴったり収まっています。 トップページから検索して次の画面に移動してからは全く問題なしで、あくまでトップページだけがはみ出るのです。 画面のプロパティで解像度大きくしても、やはりはみ出るし、デスクトップ画面もはみ出してしまうのでより悪化するだけです。 仕方ないことなのか、それとも対応策はあるのでしょうか?

  • 画面の表示サイズを変更したい

    タイトルの通り、画面の表示サイズを変更したいのです。 モバイルノートPCの購入を検討しているのですが これまで小さいサイズの画面を見たことがなく実際の使い勝手が不安です。 そこで今使っているデスクトップの20インチの画面の表示サイズを変更して 10~13インチのサイズを体験できないかと思ったのですが方法がわかりません。 20インチの画面に10~13インチ分だけを表示してあとの領域は真っ黒とかにできればと思っています。 そもそも可能でしょうか? モニタの解像度の変更の方法はわかるのですが、 解像度を下げても20インチで見るのと10インチで見るのとでは 感覚的にずいぶん違うのではないかと思います。 量販店にでも行って確認できればいいのですがなかなか時間がとれませんし、 現在使用しているソフトの実際の使い勝手もわかるのではないかと思っています。 どなたか方法を御存知でしたら教えてください。

  • パソコンの画面表示についての質問です。

    ヒューレットパッカードのパビリオン dv6000(ノートPC)を使用しています。 windows Vista、ブラウザはIE7です。 PCを起動させたまま放置しておいたところ、待機モードになり 待機モードから復帰するにはマウスやキーボードを触れば復帰します。 この際、キーボードを適当にカチャカチャと押したところ、復帰した画面がおかしくなっていました。 (Fキー辺りも押してしまった思います。) まるでセーブモードのような、解像度を下げたかのように文字が大きく、ぼやけた感じになってしまいました。 デスクトップの背景に設定している画像も、横に伸びてしまったような感じに・・・。 解像度を最大(1280×800)まで上げれば文字が小さく、くっきりした元のような画面に戻るのですが、以前の画面とは違うような違和感があります。 (くっきりしすぎているような感じ・画面が狭い感じ) このPCは15インチで、元々の解像度は、1024×768になっていました。 PC本体には、画面に関するボタン(デスクトップのモニターにあるような画面操作ボタン)は付いていません。 これはどこを操作すれば元に戻るのでしょうか?

  • 同じピクセル、解像度のPC表示差異について

    現在WEB制作をやってる上で行き詰まっているので、 ご意見頂戴したく投稿させていただきます。 現在あるWEBサイトのデザインに合わせながら制作を行っているのですが、 一部のPCではどうしても自分が制作しているページが その参考にしているWEBサイトよりも大きく表示されてしまいます。(特に幅) サイトに掲載するトップ画像なども ピクセル、解像度は参考サイトと同程度、 幅のレイアウト(950px)も同程度なのに 何故このような違いが出るのでしょうか? ちなみに自分が制作しているPC画面では問題ないのですが、 一部のmac、windowsだとその参考サイトと明らかな差異が出てしまいます。 原因として考えられることなど ございましたらご教示いただけると幸いでございます。 宜しくお願い致します。

専門家に質問してみよう