
すごく素朴な質問ですが、どうしても知りたいので
教えてください。
最近のホームページは、全体的に左寄りになっている
ことが多いように感じます。
(例)http://www.microsoft.com/japan/
なぜ、左寄りなのでしょうか?
右側が空白になるので少し変な感じがします。
No.4ベストアンサー
- 回答日時:
いやいや、開発者の手抜きなんてことはありません(あったとしてもそれが唯一の理由ではないでしょう)。
確かに左寄せが一番簡単かもしれませんが
どう見せたいかで変わるのです。
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
- 回答日時:
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
- 回答日時:
・幅を決めて全体に左寄せ
・幅を決めて中央揃え
・常にウィンドウいっぱいに表示
どれも、代表的なサイトデザインパターンのひとつです。
Webデザイナー向けの本や雑誌を見てみると、例としてあがっていると思いますよ。
左寄せで幅を指定しているデザインだと、ユーザーがウィンドウの幅を自由に変えても常に同じ場所に表示されるというメリットがありますね。

No.7
- 回答日時:
・幅を決めて全体に左寄せ
・幅を決めて中央揃え
・常にウィンドウいっぱいに表示
どれも、代表的なサイトデザインパターンのひとつです。
Webデザイナー向けの本や雑誌を見てみると、例としてあがっていると思いますよ。
左寄せで幅を指定しているデザインだと、ユーザーがウィンドウの幅を自由に変えても常に同じ場所に表示されるというメリットがありますね。
No.6
- 回答日時:
ただ、
外側の<div>にtext-align:centerをかけるとか)
でボックスがセンタリングされるのはIE6のバグなので、firefoxなど標準に準拠したブラウザでは無視されますよ。
No.5
- 回答日時:
>そうなると、これは開発者側の都合ということでしょうか?
>開発者の手抜き?
一番は一度「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
- 回答日時:
見る手の画面サイズの問題もあるかもしれませんが、全体のレイアウトをテーブルタグを使わずCSSでセンタリングするには、CSSをよく理解していないとちょっとコツが必要です。
さらに、レイアウトのためのCSSでのLayerを示す「position」は、基準点がブラウザ画面の左上になるため、Layerを使ったレイアウトだと左上寄せが簡単だからです。ちなみに全体をセンタリングするLayer(position)の方法もコツがいりますができます。No.2
- 回答日時:
文字は左から書いて右方向に読むものだからじゃないでしょうか。
ちなみに、アラビア語圏は右から左へ読むらしいですが、パソコンだとどういう風になってるのか、ちょっと気になります(笑)。
No.1
- 回答日時:
ディスプレイの解像度を800×600など、小さく設定している人のためではないでしょうか。
大きさによって見え方は変わりますから。
左にメニューを持ってくると、左を空けるのはデザイン的に変ですし。
ヤフーなどは真ん中ですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
先着1,000名様に1,000円分もらえる!
教えて!gooから感謝をこめて電子書籍1,000円分プレゼント
-
GoogleChromeでレイアウトが左寄せになる
HTML・CSS
-
表示ページがブラウザウインドウ左に寄るのを、中央に表示したい。
Safari(サファリ)
-
画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?
HTML・CSS
-
4
画面が左寄りになってしまいました
Windows Vista・XP
-
5
HPビルダーで中央表示がしたいのですが・・。
ホームページ作成・プログラミング
-
6
モニター左寄りのHPを中央に表示するには。
InternetExplorer(IE)
-
7
複数のボタンを等間隔に、かつ中央に配置する
HTML・CSS
-
8
アップロードすると、スタイルシートが反映されない
HTML・CSS
-
9
画像のサイズが変わらない
HTML・CSS
-
10
表示が右寄りになります。
Firefox(ファイヤーフォックス)
-
11
テーブルの位置を細かく指定したい。
HTML・CSS
-
12
画像と文字が重なって表示される。
HTML・CSS
-
13
font-sizeが効かない
HTML・CSS
-
14
smallにtext-allignが効かない
HTML・CSS
-
15
CSS、width100%でもできる余白
HTML・CSS
-
16
div要素が重なってします
HTML・CSS
-
17
footer を横幅いっぱいに広げるがのうまくいかない
HTML・CSS
-
18
Bootstrap3でcontainerがずれる(画面の中央に配置する方法を教えてください)
HTML・CSS
-
19
confirmのOK・キャンセルを押した後の操作制御
JavaScript
-
20
左寄りになってしまいます
その他(パソコン・スマホ・電化製品)
関連するQ&A
- 1 画像データの左寄タグについて
- 2 フリーのCSSテンプレートで編集したら全体が左に寄ってしまう。
- 3 ホームページを作成中です。背景について、どうしても分からないので質問さ
- 4 カルーセルスライダー「slick.js」で画像と文章が左に寄ってしまいます。
- 5 左フレーム出てくるのはなぜ?
- 6 素朴なcaptionについて質問させてください。
- 7 最近、HTMLのヘッダーをIDで定義(id="header")しているサイトが多いですが、なぜclassでなくIDで定義するのでしょうか?
- 8 左○○px、右は残りの幅(100%-左px)ってできますか?
- 9 最近のWebプログラミング動向が知りたい
- 10 autoを使ってもブラウザの中央に寄らない
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
chromeだけbody直下に空白が開く
-
5
インラインフレームの表示位置...
-
6
CSSのtransform: translate(-50...
-
7
CSSでh1とその下の文字との行間...
-
8
pタグによる段落間のアキ調整...
-
9
上部の余白を消すには?
-
10
アップロードするサーバーによ...
-
11
<h1>タグの後の行間を詰めたい。
-
12
外部CSSがFireFoxで反映されません
-
13
INPUT TEXT内の文字位置を指定...
-
14
Dreamweaverで画面サイズを一定...
-
15
<P>を使わずに、右寄せ(左寄せ...
-
16
divタグを中央寄せでwidthを指...
-
17
CSSで<p>の幅指定を解除したい。
-
18
<legend>で表示されるタイトル...
-
19
cssの指定の横幅よりテキストが...
-
20
text-alignの解除の方法
おすすめ情報