タグ・デザイン掲示板

[

【解決】パソコンでの中央寄せ、幅指定について
by 匿名

2016-02-14 17:35
パソコンでの閲覧向けに、サイト全体を中央に寄せてかつ文字を広げすぎないように幅を指定したい場合なんですが、HEAD内に

<pc_only>
#body {
width :400px ;
text-align:center;
}
</pc_only>

を入れ、該当のページに<div id="body">を入れても中央寄せが反映されません。幅指定はできているのですが、左に寄ったままです。
かといって幅指定を消すと、中央寄せになるものの幅いっぱいまで文字が広がってしまいます。
幅を指定しつつパソコン画面の中央に持ってくるにはどうしたらいいのでしょうか？

pc
[編集]

by 9

2016-02-14 19:24
#body のボックスが画面に対し中央寄せになっていないのでは？

body{
text-align:center;
}

とするかDOCTYPE宣言でブラウザを標準モードにしてから、

#body{ }に、margin:0 auto; を追記

でどうでしょうか？
参考スレ
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=791&viewType=thread

pc
[編集]

by 匿名

2016-02-14 22:20
ご回答ありがとうございました。
いただいたアドバイスを参考に編集したところ、中央寄せの幅指定ができました！

ただ、アドバイスの
body{
text-align:center;
}

はよくわからなかったため、
<pc_only>
body {
width :420px ;
line-height:2;
margin:0 auto;
padding: 0;
}
</pc_only>

に修正し、DOCTYPE宣言に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

を入れたところ目的の表示になりました。
ただ宣言を入れると一部のページはレイアウトが崩れてしまったため外しました。なので他の方のパソコンからだとうまく表示されないかもしれませんね…。

でもまあとりあえず目的を達成できたので満足です。
どうもありがとうございました！！

pc
[編集]

by 9

2016-02-14 22:49
解決されたようですが、分かりにくかったようですみません。以下、読み飛ばしていただいても構いませんが、後の方がご覧になったときに出来るだけ誤解のないように追記させていただきます。

親記事のCSSではきちんとID指定したdivをご使用でしたので、そこへbody{～}を追記なさる形でも大丈夫でした。
HEAD内

body{
text-align:center;
}

#body{
width:～以下略～
margin:0 auto;
}

レイアウト
<div id="body">内容</div>

尚、同じbodyでも#がつくと単なる名前ですが、bodyだけの場合はHTMLの中でも特に大切な要素の名前になります。

#body{ }→「body」という名前のIDがついたdiv等の要素への指定。半角英数字を使って任意の名前を使用出来る

body{ }→「body要素」そのものへの指定。HTMLでは<body>～</body>の部分(この要素はナノでは自動で出力されています)

DOCTYPE宣言でレイアウト崩れについて
DOCTYPE宣言は使うものによってブラウザを標準モードというものにシフトさせます。DOCTYPE宣言を書いたことによりレイアウト崩れが起きたのは、これまでブラウザ独自の仕様や補正で偶然上手く表示されていたものが、DOCTYPE宣言により標準モードとなったことで本来表示されるべく形で表示された為に結果として崩れた、という場合もあります。
ナノではパソコン向けにDOCTYPE宣言は出力されませんが、webページを作成する上ではとても重要な宣言ですから出来るだけ書いておくことをお勧めします。

pc
[編集]

[