![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
こんにちは
現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。
今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。
ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。
text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。
No.4ベストアンサー
- 回答日時:
そうですね。
皆さんが言われるように、IEのバージョン(古いバージョン)によっては、margin:0px auto;
だけではセンタリングしない事は経験済みです。よって
<body>
<div style="text-align:center">
<div style="width:600px; margin:0px auto;">内容</div>
</div>
</body>
でいかがですか。
No.3
- 回答日時:
> あの大企業のソニーでさえ text-align: center を使用しているのですか
> だめですよね?
なぜ「だめ」と判断されるのでしょうか。
IEではスタイルシートの反映にバグがあり、ブロック要素のセンタリングで、左右marginでの反映がされないため、text-alignが使われます。
text-alignはスタイルシートプロパティであり、非推奨といわれる「属性」ではないですから、使用になんら問題はありません。
ま、ブロック要素のセンタリングにtext-alignを使いたくないというのであれば、doctype宣言で標準モードを選べば、使わずに済みます。
参考URL:http://www.tagindex.com/html_tag/page/doctype.html
ご回答ありがとうございます。
Internet Explorerにはバグがあるんですね。
標準モードにするには HTML 4.01 Strictで切り替えられるようですね。
No.2
- 回答日時:
sonyサイトのHTMLソースとスタイルシートは見てみましたか?
<body>
<div class="contents" id="contents">
<div id="wrapper">…
スタイルシート
#wrapper {
width: 760px;
text-align: left;
margin:20px auto 0 auto; ←この部分がセンタリング指示
}
センタリングしたい要素にmargin: 0 auto;を指定します。
bodyにあるtext-align: center;
は、IE6のバグによりmargin:0 auto;
でのセンタリングができないので、敢えて使われているものです。
No.1
- 回答日時:
例示してあるソニーのサイトが使っているCSSを確認しましたが、
body ブロック内に text-align:center を記載していました。
http://www.sony.co.jp/top/2006/css/index.css
CSSのアドレス確認については、例示されたサイトのソースと
ここに挙げたアドレスを見比べて探してみてください。
私が今までに見たCSSの例でも、CSSの最初に全体の設定を記述し、
部分的に変えたいところをIDやCLASSで指定するのが
メンテナンス時にわかりやすくて良いと思います。
あの大企業のソニーでさえ text-align: center を使用しているのですか
予想していませんでした。(^_^;)
だめですよね?ちゃんとしたCSSで中央配置をご存知でしたら
ご回答お願いします。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
<h1>タグの後の行間を詰めたい。
-
macとwindowsのレイアウト崩れ...
-
Formタグのブロックの高さについて
-
html,css 全体的に真ん中寄せに...
-
バーコードのサイズは拡大縮小...
-
敬語
-
ワードで、横書きの数字を縦書...
-
テーブルを画面にの幅いっぱい...
-
エクセルでサイズに合ったもの...
-
Excelの列や行の幅を表示...
-
表の中でのフォーム
-
スーパーの袋の「折込幅」って...
-
Excel セルの幅が合わない
-
ホームページビルダーの表とセ...
-
エクセル 画面表示拡大率によ...
-
ホームページ・ビルダーで罫線...
-
<tbody>は何のためにあるんでし...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
macとwindowsのレイアウト崩れ...
-
INPUT TEXT内の文字位置を指定...
-
text-alignの解除の方法
-
ホームページビルダー 空白の...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
<legend>で表示されるタイトル...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
コードを書いて下さい( ; ; )...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
文字を内側にも色の付いた枠で...
-
テキストボックスの文字を右揃...
-
Dreamweaverで画面サイズを一定...
おすすめ情報