- ベストアンサー
ブラウザの中央に配置したい（長文）
CSS初心者です。 きちんと学んだことがなく、WWW上のリファレンスを参照しながらのサイト作成なので、変な質問だったらごめんなさい。 以下のようなHTML記述で、 <html> <head> <link href="css1.css" rel="stylesheet" type="text/css"> </head> <body> <div id="textbox"> <h2>あああ</h2> <h3>いいい</h3> <p>ううう</p> </div> </body> </html> 外部CSSファイルで次のように指定しています。 @charset "Shift_JIS"; #textbox{ margin-left: auto; margin-right: auto; float: center; width : 640px; align: center; } Firefoxで表示確認しながら作成し、一応希望通りにdivがブラウザの横幅に関係なく中央配置になるようになったのですが、IE6.0で確認してみたらfloat: centerがきいていないようで全て左寄せになってしまっていました。 textboxだけでなく、どのdivもそうなってしまいます。 また、フォントのサイズなどは指定どおりになっても、マージン・パディングもFirefoxの表示とはかなり違ってしまいます。 上記の記述で問題があればその点を教えていただければ助かります。 （説明の足りないことがあったらご教示ください） また、今後はブラウザ毎にCSSの指定を変えたほうがいいのでしょうか…。そこまで技術がないので、できるだけ応用のきくCSS記述を覚えていければと思っています。 よろしくお願いします。
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは！ このソースをそのまま書いているとすれば、問題になっているのは、width : 640px; の前に全角のスペースが入っているためと思います。 スペースが入っているためwidthではなく□widthと判断して（□＝スペース）幅の６４０が利かなくなっています。 それからNo1さんの指摘の通りfloatにcenterはありません。align: center;もありません。 ６４０px幅のボックスを中心にしたければ、 margin-left: auto; margin-right: auto; だけでOK。 ６４０px幅のボックス内のものもセンターにしたければ、 text-align: center;を追加 ただ中心にしたいだけでしたら、 text-align: center;だけでOKです。 アドバイスとして #textbox{ background-color: #FF0000; margin-left: auto; margin-right: auto; width : 640px; text-align: center; } このようにbackground-color: #FF0000;などを入れて一時的にボックスの背景に色を付けますとボックスがどうなっているのか確認しやすくなりますよ。
その他の回答 (2)
- m035
- ベストアンサー率44% (38/86)
CSSはよく分かりませんが、 <center> <h2>あああ</h2> <h3>いいい</h3> <p>ううう</p> </center> のように<center></center>タグでくくれば中央にどのブラウザでも配置できると思います。 これだと、CSSが無効になっている人も中央に表示されるはず。 それとも、CSSでなければ駄目なのでしょうか？
お礼
ご回答ありがとうございました。 仰るとおりcenterでも中央配置はできるのですが、友人と共同で管理しているのでできるだけhtmlはスッキリさせておきたくて、デザイン関係はすべて外部ファイルで管理したいのです。 でも、ありがとうございました。今後の参考にさせていただきます。
- sweetsixteen
- ベストアンサー率28% (7/25)
こんにちは。 以下の内容でいかがでしょうか？ @charset "Shift_JIS"; #textbox{ margin-left: auto; margin-right: auto; text-align: center; width : 640px; } 修正内容は以下の通りです。 ・「float」を「text-align」に変更 (float属性ではcenterは指定できなかったような…) ・最終行の「align: center;」を削除 (「align」という属性ありましたっけ？) お役に立てれば幸いです。 頑張って下さいね。
お礼
ご丁寧な回答、ありがとうございました。 ご指摘のように修正してみたのですが、textboxの中を変えただけでは中央配置にすることはできませんでした… ただ、text-alignが有効、というアドバイスをうけていろいろ試してみたところ、 #body{ text-align: center; } を加えることで、中央配置が実現しました。（Firefoxでも表示は中央にできました） text-alignはテキストの配置に使うものでボックスには使わないと勝手に思い込んでいたので、こちらで教えていただけて大変勉強になりました。ありがとうございました。
お礼
ご丁寧な回答、ありがとうございました。 > width : 640px; の前に全角のスペースが入っているため すみません、こちらに関しては私のタイプミスですファイルのほうではスペースはいれていません。 No１さんにもお答えしましたが、textboxの中を変えただけでは中央配置にすることはできず、 bodyに text-align: center;を加えることで、中央配置にすることができました。 しかしそれも、No１さんやyayopixさんのアドバイスがあったからだと思っています。詳しく教えていただいて大変勉強になりました。ありがとうございました。