ブラウザ表示

ここで、サンプル表示される窓の幅は約800（ピクセル）になっています。
表示される窓が画面幅と同じなら、パソコン画面幅は800（解像度800ｘ600）。全体の画面の大きさより、３分の２ほどの窓なら、画面幅は1024（解像度1024ｘ768）。もう少し小さい窓ならそれより大きいことになります。（解像度1152ｘ864、1280ｘ960、・・・）
このように、見ている側の画面の幅がそれぞれ違うということです。編集画面でうまくレイアウトをしたつもりでも見る側環境によって違ってきます。それがブラウザです。

そんなブラウザ表示をここでは、見ていきます。

 

普通に入力した。　サンプル 1

行頭にスペースを入れ、行末にも改行を入れ、ほぼ中央にくるようにレイアウトをした。

上記のようにサンプル 2 　　画面幅が変ると、かなり乱れましたね。
行頭にたくさんスペースを入れてレイアウトするのはよくない。

上記で、行頭にスペースない場合。　サンプル 3
まずまずって、ところかな？？

編集画面で表示される幅を考えて後ろに改行を入れた。　サンプル 4

いかがですか、最初表示された時はよかったけど、お気に入り窓を表示させた時や窓の幅を小さくしたときに乱れましたね。

いままで見てきて、どうでしたか。普通に入力された場合が一番理にかなっているように思いますよね。
これが、ブラウザの表示です。
今は、パソコンの表示幅が広くなっているのが多く出回っています。（解像度1024ｘ768）その幅で見ていると文字が長くなって読みづらいですか？でも広い分、いつもお気に入り窓を表示していませんか？・・・・
お気に入り窓を表示していると、ページの幅が狭くなって読みやすいですね。
でも、もっとスマートに作成したい。そうなると、表でレイアウトを作らないといけませんね。