サイトの中央寄せ表示のやり方を教えてください。

Dreamweaverでサイトを作成しているのですが、サイトを中央寄せするやり方がわかりません。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/10 20:16:39
  • 終了:2011/10/17 20:20:02

ベストアンサー

id:Q-A No.4

Q-A回答回数106ベストアンサー獲得回数162011/10/11 06:25:30

ポイント29pt

ソースやコードは他の方のものを見てください。皆さん同じ事をされています。その説明をします。

  1. サイトを中央にとの事なので、サイト全体を汎用ブロック要素の< div>で囲みます。(単純なデザインだとbodyでもokです。)
  2. 1.の幅(width)を決めます。(500pxの箱が中央なのと、700pxの箱が中央なのでは位置が違ってきます。初期値は100%です。親要素に対して100%なのでいっぱいいっぱい取ってしまって空きがないので中央には行きません。)
  3. 1.をmargin-left:auto;margin-right:auto;します。(一般的、他の方もこれ)
     または画面の割合を計算してmarginを取ります。(画面100%、1.の幅が80%なら左右のmarginは10%ずつ)
  4. 以上が正しいブロック要素の中央寄せ。ただし、プログラムミスにより、ブロック要素の中央よせが効かないブラウザがあるので、body全体にインライン要素に対する中央よせであるtext-align:centerを付けます。
  5. 4.でbodyへ文字列の中央寄せをしてしまったので、bodyの子要素に継承されます。箱は中央だけど、中身は左寄せにしたいので、1.のdivに文字列は左揃えであるtext-align:left;を指定します。

完成

その他の回答(6件)

id:matane No.1

matane回答回数40ベストアンサー獲得回数22011/10/10 20:29:00

ポイント29pt

CSSに次のように書いたら良いですよ。

body {

width: 800px;

margin-top: auto;

margin-right: auto;

margin-bottom: auto;

margin-left: auto;

}


----

追記:

・・・って、以前の質問の回答のままでしたね・・・

http://q.hatena.ne.jp/1276500397

id:jpops No.2

jpops回答回数405ベストアンサー獲得回数252011/10/10 21:36:10

ポイント29pt

CSSでする方法としては、一例

body {text-align: center;}

div#wrapper {

width: 800px;

margin: 0 auto;

text-align: left;

border: 1px solid #FF0000;}



HTMLでは、単純に

ここに文字を入れます

または

ここに文字を入れます


ご参考http://html.eweb-design.com/0307_cnt.html

id:yotaca No.3

よたか回答回数423ベストアンサー獲得回数462011/10/10 22:02:57

ポイント29pt

私の場合は下記の感じで作成してます。

 

<html>

<head>

<style>

body{

text-align:center;

background-color:#efefef;

}

#main{

width: 800px;

margin: 0 auto;

text-align: left;

border:1px solid #ccc;

}

</style>

</head>

<body>

<div id="main">

ここにメインコンテンツを入れます。

</div>

</body>

</html>

 

このままコピーしていただければ使っていただけるかと思います。

id:Q-A No.4

Q-A回答回数106ベストアンサー獲得回数162011/10/11 06:25:30ここでベストアンサー

ポイント29pt

ソースやコードは他の方のものを見てください。皆さん同じ事をされています。その説明をします。

  1. サイトを中央にとの事なので、サイト全体を汎用ブロック要素の< div>で囲みます。(単純なデザインだとbodyでもokです。)
  2. 1.の幅(width)を決めます。(500pxの箱が中央なのと、700pxの箱が中央なのでは位置が違ってきます。初期値は100%です。親要素に対して100%なのでいっぱいいっぱい取ってしまって空きがないので中央には行きません。)
  3. 1.をmargin-left:auto;margin-right:auto;します。(一般的、他の方もこれ)
     または画面の割合を計算してmarginを取ります。(画面100%、1.の幅が80%なら左右のmarginは10%ずつ)
  4. 以上が正しいブロック要素の中央寄せ。ただし、プログラムミスにより、ブロック要素の中央よせが効かないブラウザがあるので、body全体にインライン要素に対する中央よせであるtext-align:centerを付けます。
  5. 4.でbodyへ文字列の中央寄せをしてしまったので、bodyの子要素に継承されます。箱は中央だけど、中身は左寄せにしたいので、1.のdivに文字列は左揃えであるtext-align:left;を指定します。

完成

id:jpops No.5

jpops回答回数405ベストアンサー獲得回数252011/10/12 17:45:29

ポイント28pt

ごめんなさい文字消えてますね。

タグ入れると、はてなはタグとよんで表示してしまうようです。

下の■のところを<に変えてやってみてください。

No.2補足です


■Center■   ここに文字を入れます  ■/Center■

■Div Align="center"■  ここに文字を入れます ■/Div■

id:Q-A No.6

Q-A回答回数106ベストアンサー獲得回数162011/10/15 10:36:58

ポイント28pt

No.4です。


htmlやcssでの書き方がわからないと思ったのですが、Dreamweaverでの操作の質問ともとれるので、そちらを紹介します。といっても、販売元のDreamweaverへの説明ページへのリンクですが。


id:mura24 No.7

mura24回答回数1ベストアンサー獲得回数02011/10/17 18:13:24

ポイント28pt

念のため、垂直方向の中央揃えについてご案内しておきます

■CSSでボックスの内容物を上下中央揃えにする方法3種。|web bibo

http://www.webbibo.com/blog/htmlcss/vertical.html

CSSでのレイアウトが得意でないのであれば、

レガシーな方法になってしまいますが、

テーブルの中に要素を配置してしまったほうが早いかもしれませんね。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません