ホームページの画面表示サイズについて

このQ&Aのポイント
  • ホームページの画面表示サイズについて質問があります。環境は古いですが、最大解像度1280x1024のモニタを使用しています。Webページの壁紙に使っている画像も1280x1024ですが、最近のPCの環境ではフルHDが普通になってきました。そのため、ノートPCで確認すると画像が収まらず、境界線が表示されてしまいます。ビルダー12で表示スペックに順応して画面サイズに収めることはできるのでしょうか?
  • ビルダー12のツール=オプション=ページサイズの設定では、「940x1200 1280x1024 ディスプレイ 標準」という項目に設定しています。しかし、モニタの解像度や閲覧側の表示スペックに合わせて自動的に画面サイズに収める機能はないのでしょうか?ヘルプを見ても詳細な情報が見つかりませんでした。
  • 質問としては、ビルダー12で作成したWebページの表示を、壁紙に使っている画像のピクセルサイズに依らず、閲覧側の表示スペックに順応して自動的に画面サイズに収まるように設定する方法があるのかどうかを知りたいです。ビルダー12ではその機能が備わっていないのか、ヘルプを見ても分かりませんでした。プロレベルの知識がないため、教えていただけると助かります。
回答を見る
  • ベストアンサー

ホームページの画面表示サイズについて

当方の環境は少々古いのですが。 XP・SP3、使用ソフト:HomePageBuilder12 モニタもまだ、HP作成/編集様には最大解像度SXGA:1280x1024のをメインに使っておりまして、 ビルダー12の、ツール=オプション=ページサイズ の設定の欄では、 「940x1200 1280x1024 ディスプレイ 標準」なる項目に設定していまして、 Webページの壁紙に使っている画像も1280x1024の画像ですが、 そこで、 最近のPCの環境/表示能力は、フルHDの普及もごく普通になってきましたし、 又、当方はノートPC(モニタは最大設定1680x1050)Thinkpadも使っているのですが、 作ったWebページをそのThinkpadで確かめると、 壁紙に用いている画像が1280x1024ですから画面右側に境界線が出来て、 画面右端側に、画像の左端部分が現れてしまうのですが、 Q:作成ページの表示を、壁紙にしている画像などのピクセルサイズに依らずとも、 閲覧側の表示スペックに順応して自動的に、閲覧側サイズに適応して画面サイズに収まる様な、 ビルダー12で設定などは出来ないものなのでしょうか?(意味が伝わっていますかどうか…)。 ビルダー12ではその機能は備わっていないのでしょうか? ビルダー12のヘルプはちょいちょい見てはみたのですが…。 当方は、Web制作等のプロレベルの知識は無いです。

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

  • ベストアンサー
  • dragon-man
  • ベストアンサー率19% (2700/13647)
回答No.1

ビルダーを使わず、htmlでHPを作っています。デザイン上考えたことは、世の中の大多数のPCモニタで問題なく表示されることです。いろいろ検討して、横幅を900~1000ピクセルに抑えました。これだと小さな1080ピクセル程度ののモニタでもはみ出さずに表示できます。このサイズはいろいろなHPを参考にして決めました。例えばこの質問箱はおそらく横幅1000ピクセル以内です。ヤフーやグーグルやMSNのサイトも同じです。どれも1280~1920のワイド画面を想定していません。万人に見てもらえることを目的にしているからでしょう。中にはもっと大きなサイトもありますが、例外に近いです。 ビルダーの使い方はよく知りませんが、HPは基本的にhtml言語で作られます。その場合はめ込む画像のサイズはhtmlタグで指定しなければなりません。つまり固定です。モニタ画面のサイズに合わせて画像のピクセル数を自在に調整できる機能はちょっと想像が付きません。html文にはそう言う機能はないし、それを表示するためのブラウザに、モニタサイズを検知してタグのパラメータを自動的に調整する機能はないからです。 私の不勉強かもしれません。もしかしたら私の思いつかないような高度な機能を回答してくれる人がいるかもしれません。HPとその中の画像のサイズ設定には興味があります。

その他の回答 (2)

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

ビルダーのようなWebオーサリングツール( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB )は、HTMLやCSSのしっかりした知識がないと、ちゃんとしたページは作ることは出来ません。  決して逆(HTMLやCCCの知識がなくても作れる)ではありません。少なくともまっとうなオーサリングツール(Dreamweaver,Fireworksなど)は、そんな誇大広告はしてません。  そもそも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 )]より  なのですから、そのようなページを作ってしまったら、HTMLでページを作成する意味がありませんよ。 >最近のPCの環境/表示能力は、フルHDの普及もごく普通になってきましたし、  スマホのような、640pxや480px程度の小さな画面での利用も多くなってきました。  そんな中で、サイズ固定と言うのは時代遅れです。  私自身は、最小640px~1024px程度にフレキジブルに対応し、それ以下だと横スクロールが必要、それ以上だとディスプレイの中央に配置されるようにしています。それ以上や細かい設定が必要なときはmedia queryでデザイン自体を変更させたりしています。  私は、現在はオーサリングツールは使っていません。テキストエディタのほうが、圧倒的に早いし、覚えることも少ないし、楽ですし、なによりもちゃんとしたものが出来ますし。ツールのあのマニュアルの量には恐れをなします。(^^) 例]タブは_に置換してあります。  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★ ⇒Anothe HTML Lint( http://www.htmllint.net/html-lint/htmllint.html )  は満点ですし ★ディスプレイ幅にはこだわりませんし ★印刷したら素の状態で印刷できるし ★スクリーンリーダー--読み上げソフトも点字端末も対応してるし ★なによりもgoogleできちんと理解してくれるし--SEO的にバッチリですし ★とても簡単で、デザインは自由に変更できるし ★雛形から数分あったら書けるし div.article{width:90%;min-width:640px;max-width:900px;margin:0 auto;} と一行書いたら済むだけですもの。 <!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>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.article{width:90%;min-width:480px;max-width:900px;margin:0 auto;background-color:silver;} div.header,div.section,div.footer{border:solid 1px aqua;} div.header{background-color:aqua;} div.section{background-color:silver;border-color:silver;min-height:300px;} div.footer{background-color:lime;border-color:lime;} div.section p.figure{width:210px;float:right;background-color:white;height:200px;} --> _</style> _<style type="text/css" media="print"> <!-- div.section{min-height:300px;} div.section p.figure{width:210px;float:right;height:200px;border:solid black 1px;} _ --> _</style> </head> <body> _<div class="article"> __<div class="header"> ___<h1>タイトル</h1> ___<p>このページでは・・・・</p> __</div> __<div class="section"> ___<p class="figure"> ____<img src="" width="200" height="200" alt="挿絵"> ___</p> ___<h2>見出し</h2> ___<p>・・・</p> __</div> __<div class="footer"> ___<h2>文書情報</h2> ___<dl class="documentHistry"> ____<dt id="FIRST-PUBLISHED">First Published</dt> ____<dd>2012-08-10</dd> ___</dl> ___<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> __</div> _</div> </body> </html>

  • Safe_Mode
  • ベストアンサー率48% (1329/2725)
回答No.2

私もテキストエディターでHTMLとスタイルシートを作成しているのですが、Webページの幅は800pxに抑えています。 私自身はモニタサイズ一杯で表示させるのが好きですが、いろいろなユーザーさんを見てると、必ずしもフル画面で閲覧するとは限らず、むしろちょっと小さ目な画面サイズにしている方々のほうが多いと感じています。 ですので、幅はある程度抑えたほうがいいと思っています。 余談ですが・・・ ホームページビルダーの「どこでも配置モード」だけは使ってほしくないですね。 (自分の環境が閲覧者全てに当てはまると思っている管理者も意外と多いようですけど。)

関連するQ&A

  • ホームページビルダー作成にて画面サイズでつまづいています

    ホームページビルダー13でホームページを作成しているのですが、ビルダー上では画面サイズを940×1200で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。 文章だと伝えづらいので、目標イメージのサイトを書きに載せました。 そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。 作成ページ右いっぱいに画像を広げても空いてしまいます。 どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか?どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。

  • ホームページの画面のサイズが変わってしまって直せません。

    壁紙を何回か変えていたら、いつのまにか(気づいたら)Internet Explorerの画面のサイズが、最大にしても、 上の所に隙間が1cm弱くらい空くようになってしまいました。 そして下側が、隠れてしまってるんです。 全部を表示できてない状態です。 どうしたら、もとに戻せるのでしょうか? 使いずらくて困ってます。よろしくお願いします。

  • 画面表示位置(ホームページビルダー)

    どのサイズのモニターで見ていただいても画面中央に位置づけられる様に設定したいので、お教えください。(ホームページビルダー10)

  • ホームページ作成について

    現在、IBMホームページビルダーでホームページを作成しました。 TOPページを開いてみると画面全体が左側に寄って表示されます。 見る人によってモニターの大きさが違うのでどの大きさのモニターでも作ったページがセンターに寄って見やすくしたいとおもいます。 そこでビルダーのソースを見ているのですがサイズをセンターに寄せタグをどのように設定したら良いかわかりません。 それとページ全体を設定するソースがどこの入っているのかわかりません。 一般的に、ページのどの位置に設定されているのでしょうか?

    • ベストアンサー
    • HTML
  • パソコンのモニターのサイズごとにホームページの画面を最適表示させる方法

    モニターのサイズごとにホームページの画面を最適表示させる方法はどのようなものがあるでしょうか? ホームページの背景を一枚の写真で途切れなく使いたいと思い。 17インチのモニターでサイズを調節し、その後htmlファイルの背景としてプレビューしました。 すると、17インチの画面では最適に表示されるのですが、別のパソコンを使い、15インチのモニタで表示すると画像が大きくなり過ぎ、画面に収まりきらなくなってしまします。 逆に15インチのモニターでサイズを調節すると17インチの画面で見たときにサイズが小さすぎ写真につなぎ目が出来てしまします。 どのような方法でも良いので一枚の写真を継ぎ目なく背景にし、それをモニターごとに最適に表示させる方法はありますでしょうか?

  • 画面の色とサイズが変わってしまいました

    IEから「Google」で検索したページを見に行きました。 そろそろ、終わりにしようと思い、ウィンドウを消したら、 壁紙が、そのサイトで見たものに変わっており、「画面の領域」が最大にしていたのに、最小になってしまっていました。 再起動をしたら、今度は色まで「16色」になってしまい、壁紙を戻し、画面の設定を変えて再起動をしても、色と、画面のサイズが戻りません。 なお、今、そのサイトを見に行っても、壁紙は変わりませんでした。 どうすれば、もとに戻るでしょうか? 助けてください! (過去に同様の質問がありましたら、ごめんなさい。 御手数ですが、URLお教えて下さい。m(__)m)

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

    IEやOEを立ち上げたときの表示サイズが変わってしまいました。 以前はいつも最大化で開いていましたが、今朝から画面の上端約2cmくらい、 デスクトップの壁紙が見えている状態です。 最大化ボタンを押しても変わらず、移動をさせても今の位置より上に上がりません。 ステータスバーは表示されています。 マイドキュメントやメッセンジャーのチャットウインドウでも試してみましたが同じでした。 元に戻す方法を教えてください。よろしくお願いします。

  • ホームページビルダー14のプレビュー画面で画像が表示されない

    初めまして。 ホームページビルダー13で作ったHPをホームページビルダー14で開くと、プレビュー画面で画像が表示されません。 13では正しく表示されていましたし、14でも表示されないだけで、アップロードした画像は正しく表示されます。 IBMのページで表示されない時は、2バイト文字になっている事があると書いてありましたが、半角英数で書いております。(フォルダも半角英数・記号も不使用) 「ウェブアート デザイナーなどでファイルを保存し直すことで改善されることがあります。」とも書いてあったので、保存しなおしましたが改善されませんでした。 14に何か特殊な設定などがあるのでしょうか? 「表示されなくても、正しくアップ出来ているならいいじゃないか」と言われたらそうなんですが、やはりアップ前に画像の確認をしたいので、何か良い方法はありますか?

  • 画面表示のサイズ変え方

    パソコンを修理に出して帰ってきたら、画面表示が変わって文字や、アイコンが前より小さく表示されるようになりました。また、画面がモニターの枠からはみ出たりと表示がおかしいです。(文字のサイズ変更では直りませんでした) 設定方法を教えてください。

  • ホームページのWindowsに表示される画面サイズ

    ホームページを作成していますが、作っているページがフルサイズで でしか、表示されません。(左側にお気に入りのウインドウを表示した ままだと、画面が切れてしまう) 画像が切れずに、小さいウインドウのときでもジャストサイズで 表示されるHTMLタグが分りません。 ご存知でしたらおしえてくださいませ。