なぜ左に寄っているの？

質問

すごく素朴な質問ですが、どうしても知りたいので
教えてください。

最近のホームページは、全体的に左寄りになっている
ことが多いように感じます。
（例）http://www.microsoft.com/japan/

なぜ、左寄りなのでしょうか？
右側が空白になるので少し変な感じがします。

回答No.4

9arabi · ベストアンサー

いやいや、開発者の手抜きなんてことはありません（あったとしてもそれが唯一の理由ではないでしょう）。
確かに左寄せが一番簡単かもしれませんが
どう見せたいかで変わるのです。

No.1さんの言われるとおり、
環境によってそれぞれ人の見え方が違うので
両端か片側に空白ができるデザイン、
もしくは画面の幅を小さくしてもスクロールせずに読めるデザインというのが見る側に立ったデザインです。

で、片側に空白を開けるとなると、私たち日本人は横書きの場合左から右へ読みますから、右寄せにならずに左寄せになるのだと思われます。
縦書きの場合は、右寄せでもいいんじゃないでしょうか。たとえば
http://go.to/tategaki/
↑こんなかんじ。
また、No.3さんのおっしゃるアラビア語サイトの例を挙げておきます。
http://www.aljazeera.net/　←真ん中寄せ
http://www.asharqalawsat.com/　←右寄せ

ところで、CSSで画面をセンタリングするのは別に難しくありませんよ。positionを使わなくてもやろうと思えばできますし（<div><div></div></div>として、外側の<div>にtext-align:centerをかけるとか）。

たとえば、両端の空白に背景画像をつけたりしているところだと、これはデザイン的には片側に寄せるより両端に寄せたほうがきれいってこともありますよね？
また真ん中のデザインと空白のバランスもあるかと思います。

というわけで、
・いろんな環境の人に見えやすくするためコンテンツの幅が小さくなっているので空白ができる
・両側または片側に寄せるかはデザインによる
・片側に寄せる場合は、右から読むか左から読むかでどちらに寄せるかが決まる
以上が妥当なのではないかな、と思いますが。

両側に寄せるか片側に寄せるかは、デザインしたひとの趣味、という理由で片付けられるのかもしれませんが。

回答No.9

mat-21

500px幅のボックス(例えば,<div style="width:500px">内容</div>)をセンタリングにするには、2重の設定が必要です。古いブラウザ(Win-IE5.x)や新しいブラウザ(Win-IE6.0-)の両対応のために...,

<div style="text-align:center">
<div style="width:500px; margin:0px auto;">
内容
</div>
</div>

参考までに....。

回答No.8

flowermaze

・幅を決めて全体に左寄せ
・幅を決めて中央揃え
・常にウィンドウいっぱいに表示

どれも、代表的なサイトデザインパターンのひとつです。
Webデザイナー向けの本や雑誌を見てみると、例としてあがっていると思いますよ。

左寄せで幅を指定しているデザインだと、ユーザーがウィンドウの幅を自由に変えても常に同じ場所に表示されるというメリットがありますね。

回答No.7

flowermaze

・幅を決めて全体に左寄せ
・幅を決めて中央揃え
・常にウィンドウいっぱいに表示

どれも、代表的なサイトデザインパターンのひとつです。
Webデザイナー向けの本や雑誌を見てみると、例としてあがっていると思いますよ。

左寄せで幅を指定しているデザインだと、ユーザーがウィンドウの幅を自由に変えても常に同じ場所に表示されるというメリットがありますね。

回答No.6

equation

ただ、
外側の<div>にtext-align:centerをかけるとか）
でボックスがセンタリングされるのはIE6のバグなので、firefoxなど標準に準拠したブラウザでは無視されますよ。

回答No.5

mat-21

>そうなると、これは開発者側の都合ということでしょうか？
>開発者の手抜き？
一番は一度「TABLE」タグを使わず、HTMLをCSSのみでレイアウトするために「500px幅のボックスの中に左寄せでテキストを入れ、その500px幅のボックスをブラウザ画面のセンターになるようにし、さらにその500px幅のボックスに対し"LAYER(CSSのPOSITION)"で、500px幅のボックス左から300px右へ上から100px下へレイアウト」してみて下さい。
恐らく、普通では思うようにレイアウトできないと思います。では、どのようにやるかは、長くなるので省きますが、つまり、「レイアウトのために"TABLE"タグは使うべからず、というのを尊重して"CSS"でレイアウトをすると、"POSITION"の"absolute"と"relative"の使い分けと、"FLOAT"の回り込みをよく理解していないとなかなか一流なウェブデザイナーでも難しい」のではないかと思うんです。
また、デザインはウェブデザイナーが行い、後の更新などでHTMLを触る人は、その辺の理解ある人とは遠く離れた人が触る場合が多く、「TABLE」を使わず、CSSでのレイアウトで行うと、よく閉じタグが無くされたりします。「TABLE」とは違い、CSSで閉じタグを一個無くしただけで「レイアウトがものすごくバラバラになってしまう」という致命傷があります。よってだから.....なのかもしれません。
ちなみに、私は全体のレイアウトをセンタリングしますが、よく人に「TABLEを使わずにどうやってセンタリングするの？」と聞かれます(^_^;)......。

回答No.3

mat-21

見る手の画面サイズの問題もあるかもしれませんが、全体のレイアウトをテーブルタグを使わずCSSでセンタリングするには、CSSをよく理解していないとちょっとコツが必要です。さらに、レイアウトのためのCSSでのLayerを示す「position」は、基準点がブラウザ画面の左上になるため、Layerを使ったレイアウトだと左上寄せが簡単だからです。ちなみに全体をセンタリングするLayer(position)の方法もコツがいりますができます。

お礼

ありがとうございます。
そうなると、これは開発者側の都合ということでしょうか？
開発者の手抜き？

回答No.2

pk7743

文字は左から書いて右方向に読むものだからじゃないでしょうか。

ちなみに、アラビア語圏は右から左へ読むらしいですが、パソコンだとどういう風になってるのか、ちょっと気になります（笑）。

回答No.1

NannoFlower

ディスプレイの解像度を８００×６００など、小さく設定している人のためではないでしょうか。
大きさによって見え方は変わりますから。

左にメニューを持ってくると、左を空けるのはデザイン的に変ですし。

ヤフーなどは真ん中ですね。