ホームページ制作日記 vol.6 -画面表示不具合解決編-

前回のブログに書いた画像表示の件は、
ホームページ立ち上げ当初からの問題だったのですが、
同時進行で問題になっていたのが、画面表示に関する問題です。

どのような問題だったのかというと、
ホームページを表示するディスプレイによって
ホームページの見え方(画像や文字の配置、スペースの広さなど)が
変わってしまうという問題でした。
具体的にいうと、ディスプレイの縦横比が4:3であるか、
16:9であるかで表示が違ってくるということです。

主にホームページを制作するときに使っていた、私の自宅のパソコンの
画面の縦横比が16:9だったので、この比率の画面を基準にして
ホームページを作っていたのですが、
ある日、初めて自宅のパソコン以外で、本社にあるパソコンに
ホームページを表示してみた時に、自宅のパソコンでは整然と表示されていた
文字や画像の位置が、大幅にずれて表示されることが発覚したのです。

本社のパソコンの縦横比は4:3なのですが、16:9の画面で表示する時は
横1列に3つの画像が並んでいたのに、
4:3の画面で表示すると画像の表示が2つと1つの2列に表示されたり、
書いてある文章の段落の位置も変わって、非常に読みづらくなっていました。

これはホームページ制作に利用したテンプレートの特性らしく、
表示する画面に合わせて横に伸びたり、縮んだりするので、
当然、16:9よりも横の広がりの少ない4:3で表示すれば、
左右から横にぎゅっと圧縮した感じになるので、
横に3つ分の画像スペースがあったのが、2つ分に圧縮されて、
あふれた1つの画像は下に押し出されるということになります。

ホームページ制作中には、このことに全く気付いていませんでしたので、
このことが発覚してから、慌てて4:3の画面を基準にして
画像の配置や文字・文章の位置を調整していきました。
ちなみに4:3基準で作ったものを、16:9で表示しても左右のスペースが
広がるだけで、画像や文字の位置に変化はありませんでした。

この問題は、HTMLタグできちんと画面表示を固定化するように設定すれば
解決出来たと思うのですが、私にそこまでの知識が無かったのと、
4:3基準への変更で十分に対応できたので、
今回はこのような形での対処ということになりました。

しかし、このままでは使用するディスプレイの種類によってホームページの
表示が変わるという不安定な状況であることには変わりないので、
立ち上げから2ヶ月も経たないうちに、どの種類のディスプレイでも
同じように表示されるホームページへの変更を決めたのです。


vol.7に続く・・・



vol.5へもどる・・・



ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

有馬寅
2011年01月21日 12:52
ミユキ産業 HP担当 小池様
 vor.16の記事には納得。私はブログ「農山漁村の今昔物語」を作成しています。その際、写真の貼り付けで、作成中の画面ではうまくいってても、公開された画面ではグチャグチャな配列になる場合があります。
 タグの問題なのでしょうか?
 
ミユキ産業 小池
2011年01月28日 15:12
有馬寅様 
コメント有難うございます。
どのブログを利用しているのか分かりませんが、
biglobeのブログに関して言わせていただきますと、
「画像貼付」をクリックすると本文中にタグが
記載されますので、そのタグの内容を修正すれば
自分のイメージに近付けられるのではと思います。



この記事へのトラックバック

  • ホームページ制作日記 vol.5 -画像表示不具合解決編-

    Excerpt: とりあえず、ホームページをネット上に公開したものの、 貼り付けた画像が表示されていないということが発覚し、 そこから画像表示不具合の原因の究明が始まりました。 Weblog: ミユキ産業株式会社 racked: 2018-02-15 15:10