これからの季節に親子でハイキング! >>

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (9件)

いやいや、開発者の手抜きなんてことはありません(あったとしてもそれが唯一の理由ではないでしょう)。


確かに左寄せが一番簡単かもしれませんが
どう見せたいかで変わるのです。

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をかけるとか)。

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

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

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

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>

参考までに....。
    • good
    • 0

・幅を決めて全体に左寄せ


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

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

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

・幅を決めて全体に左寄せ


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

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

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

ただ、


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

>そうなると、これは開発者側の都合ということでしょうか?


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

見る手の画面サイズの問題もあるかもしれませんが、全体のレイアウトをテーブルタグを使わずCSSでセンタリングするには、CSSをよく理解していないとちょっとコツが必要です。

さらに、レイアウトのためのCSSでのLayerを示す「position」は、基準点がブラウザ画面の左上になるため、Layerを使ったレイアウトだと左上寄せが簡単だからです。ちなみに全体をセンタリングするLayer(position)の方法もコツがいりますができます。
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/05/25 07:36

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



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

ディスプレイの解像度を800×600など、小さく設定している人のためではないでしょうか。


大きさによって見え方は変わりますから。

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

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QGoogleChromeでレイアウトが左寄せになる

GoogleChromeでレイアウトが左に寄ってしまう。。。

タイトルの通り、Google Chromeで私のウェブサイトを閲覧した際に、レイアウトが左に寄ってしまっていることが分かったのですが、どう修正したら良いのか分からず大変悩んでいます。

当サイトのURLは下記になります。
http://runp.web.fc2.com/

GoogleChromeで当サイトを見るとレイアウト全体が左に寄ってしまっています。
FireFoxやIE、何故Chromeだけ左によってしまうのでしょうか・・・。

ネットで調べて色々試しましたが、わかりませんでした。
私で方法が思いつきませんので、どなたか詳しい方がいましたら原因と解決策を教えて頂きたいです。
アドバイスお待ちしていますので、よろしくお願いします!

Aベストアンサー

環境はだいたい同じですね。

Ctrl+F5(F5のみは不可)でページを更新しても駄目であれば以下を試してみて下さい。
・拡張機能をすべて無効
・閲覧履歴データの削除

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

QHPビルダーで中央表示がしたいのですが・・。 

HPビルダーで中央表示がしたいのですが・・。 
どこでも配置を使って作ったHPが、左端がブラウザに固定の表示になってしまいました。
常に開いたブラウザの中央に表示されるようにするにはどうしたらいいのでしょうか。

Aベストアンサー

>http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037

IBMのサイトを参考にしてください。

標準モードで「表の挿入」で「表」を使って、表の一番外枠を選択状態で「書式(O)」「位置揃え(A)」「中央揃え(E)」で表が中央に来ます。

または、普通の「文字の中央」をクリックでもOKです。

どのサイズのディスプレイでも中央表示となります。

どこでもモードでは不可です、標準モードで作成です。

表の列や行は後からいくらでも追加や削除が出来ますので、文字列の配置や画像の挿入位置などレイアウトを考えて、列や行を作りましょう。

またセルの結合や分割もできますので、自由な画面のレイアウトが可能です。

表の外枠を選択状態で「編集(E)」「属性の変更(A)」で表やセルの寸法を決めたり枠表示を消したり、枠に色をつけたりも出来ます。

Qホームページビルダーで、画面を常に中央にもっていくには…

よろしくお願いいたします。

ホームページビルダーVer.7を使っております。

サーバーにアップはしたのですが、「ブラウザのサイズにかかわらず、常にPC画面の中央に表示されるようにする」方法はありますでしょうか?

現在は、『お気に入り』を画面左側に表示させると、その表示横幅の分、右側に移動してしまいます。
この時に、表示部分の中央に常に表示させたいのですが…

わかりづらい表現ですみません。
よろしくお願いいたします。

Aベストアンサー

NO.5です。ご丁寧にレスありがとうございました。
やり方は様々ですので、今回は見送りという事ですが気になさらないで下さいね^^ただ、一つテーブルの多用について。
こちらを勘違いさせてしまったかもしれないので補足させて下さい。
既に出来上がっているPがどういった物か分からなかったので一応加えたのですが、乱用しない限りは普通に表示されます。
例えば先に例にあげたビルダー公式サイトにある程度のテーブル数でしたら最近のPCスペックも上がってますので、全く問題ありません。
ただ、余りにもテーブルの中に更にテーブル、更にテーブルを、と続けて行くと表示が遅くなります、という事でした^^;

>作ったHPがビルダーの「どこでも配置モード」だったので
>最終的には300ページくらいになりそうですので
どこでも配置でお作りだったのですね。
う~んこちらはですね…ごめんなさい、質問者様もここで色々と耳にされているとは思うので、敢えての事だったら申し訳ないですが「どこでも配置」は一般的に推奨されていません。というのも見るブラウザによっても表示が違いますし、個人個人のブラウザの設定でもまた違って見えてしまう物なのです(ただ普通にレイアウトしただけでは)。
最悪の場合、文字が重なってしまうなど閲覧不可能ともなりますので、まだ作成P数が少ないのであれば今から「標準」で作り直される事をおすすめします。
300Pとかなり多くのPを想定されているようなので、お節介ながら追記させて頂きました。

ついでに違う方法での中央配置の一例を挙げているURLを下に入れておきます。DIVタグやスタイルシートを使用しています。今の時期、テーブルかCSSかの分かれ道になっていますので、初めからCSSでいかれたい場合は参考にしてみて下さい^^(と言いつつ私はテーブル派なんですけどね^^;場合によりけり)

参考URL:http://www.stylish-style.com/csstec/basic/p-boxc.html

NO.5です。ご丁寧にレスありがとうございました。
やり方は様々ですので、今回は見送りという事ですが気になさらないで下さいね^^ただ、一つテーブルの多用について。
こちらを勘違いさせてしまったかもしれないので補足させて下さい。
既に出来上がっているPがどういった物か分からなかったので一応加えたのですが、乱用しない限りは普通に表示されます。
例えば先に例にあげたビルダー公式サイトにある程度のテーブル数でしたら最近のPCスペックも上がってますので、全く問題ありません。
ただ、余りにもテ...続きを読む

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。


人気Q&Aランキング