メインメニュー


[スポンサードリンク]


レイアウトが崩れるのを防ぐ
表示させている画面のサイズは全部同じではありません。
パソコンの種類や設定によって解像度が違いますし、同じ解像度であっても全ての人が全画面表示をさせて見ているわけでもありません。
大きいウィンドウサイズや大きい解像度で見ているときにはさほど気にしなくても良いのですが、小さいウィンドウサイズにしたときに文字の部分や画像がズルズルと改行されてしまい、レイアウトが崩れてしまうことがあります。
これを回避するために「nobr属性」を使う方法もありますが、全体のレイアウトを考えたときには透過gifを使ったほうが良いと思います。
また、レイアウトが崩れては困るようなサイト(特に商用サイト)ではよく使われている方法です。

あれこれ説明するよりも見たほうが早いので、ここに2つの例を挙げます。
別画面で出てきますので、マウスを使って画面を横に伸縮させてみてください。
  例.その1 (レイアウトが崩れてしまう)
  例.その2 (レイアウトが崩れない)

この違いは、小さな透過されたgif画像を用意し、それを「つっかえ棒」として表の中に入れているからなのです。
透過されているので実際には見えないのですが、赤で表示させると以下のように入れています。
 猫の好奇心を育てよう

子猫はやたらと動くものにじゃれついてきます。
これは元々の狩りの本能によるところで、動くものを見つけると、自分の本能を満足させようと飛びかかります。

         

素材:「Toy Box


この画像は大きくしても意味がないので、高さは1ピクセルにして、横幅を表(テーブル)の大きさに合わせて使います。
透過gifを用意するのが面倒臭い…という方は、「名前をつけて画像を保存」で持ってかえってください。
spacer.gif
 ↑この中にあります。透明なので見えないけど。。(^▽^;)
   保存すると、縦横1ピクセルの小さぁぁぁい画像になります。

それから。。この方法を使うと表(テーブル)の中のレイアウトは崩れませんが、画面の下(表示させているフレーム)にスクロールバーが出現するようになります。
スクロールバーが出現することによってレイアウトが崩れてしまうこともあるので、フレームを使っている場合はスクロールバーの設定もしておいたほうが良いですよ。
ページを書き終えた時点でブラウザに表示させて、ウィンドウサイズを大きくしたり・小さくしたりして確認することをオススメします。

参考までに当サイトを訪問されている方々の解像度の割合を書いておきますね。
数年前までは、さほど解像度の種類も多くなかったのですが、最近は色々なものが発売されていて、解像度も多種多様となっているようです。
基本的に解像度の低い(800x600あたり)に対応したようにサイトを構成していくのですが、解像度の高いユーザーが増えてきたため、商用ページなどでも、ギッシリと内容のつまったものが多くなってきているようです。
2003/11/07現在
1024x768 76.6%
1280x768 6.5%
1280x1024 6.3%
800x600 4.3%
1400x1050 3.1%
1152x864 1.3%
1280x960 1.1%
2007/04/01現在
1024x768 54.3%
1280x1024 23.2%
1280x800 9.3%
1280x768 5.6%
1280x960 1.2%
1152x864 1.1%
1400x1050 1.0%
800x600 1.0%
1440x900 0.7%
1366x768 0.6%