- ベストアンサー
CSSの設定
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>センタリングDOCTYPE宣言あり</title> <style type="text/css"> <!-- #box { background: #66CCCC; width:150px; height:150px; margin:0 auto; background-color: #006699; } --> </style> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <div id="box"></div> </body> </html> 通常はこうなる
その他の回答 (6)
- think49
- ベストアンサー率59% (285/482)
>> #6 sh_hiroseさんへ > margin:0 auto;、text-align:center;でセンタリングを行っているので間違ってはいません 「間違っている」ではなく「別の切り口から」のつもりで書きました。 誤解させてしまったのでしたら、すみません。
- sh_hirose
- ベストアンサー率66% (56/84)
よくやる方法 CSS html, body { height: 100%; } body { margin:0px; padding:0px; /* ここに両端の背景色を指定 */ background-color: #FF0000; /* margin: 0 auto が効かないブラウザ用 */ text-align: center; } #CONTENTS { padding:0px; /* ここにコンテンツ部分の背景色を指定 */ background-color: #FFFFFF; /* コンテンツ部分の幅指定 */ width: 80%; /* コンテンツ部分の高さ指定 */ height: auto !important; height: 100%; min-height: 100%; /* センタリング */ margin: 0 auto; /* bodyのtext-align: center;の打ち消し用 */ text-align: left; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample</title> <link rel="StyleSheet" type="text/css" href="sample.css"> </head> <body> <div id="CONTENTS"> コンテンツ部分 </div> </body> </html> think49さんより引用 >センタリングの捉え方によると思うのですけど、皆さんの紹介している方法は「コンテンツブロックの幅固定」です。 Divのコンテンツブロックの幅固定を確かに行っていますが、 margin:0 auto;、text-align:center;でセンタリングを行っているので間違ってはいません。
- think49
- ベストアンサー率59% (285/482)
センタリングの捉え方によると思うのですけど、皆さんの紹介している方法は「コンテンツブロックの幅固定」です。 反対に「余白の幅固定」も有りかな、と思います。 <style type="text/css"> body{ margin: 0px 5em; } </style> こうすると、ウインドウサイズに応じてコンテンツブロックが可変になるのでリキッドレイアウトっぽくなったり。
- salonpath
- ベストアンサー率48% (194/399)
rukukuさんの方法はIEの5.5以前（もしくは後方互換モード）での古いブラウザと古いWeb制作に合わせたセンタリングの方法です。 IE6~IE8もFirefoxもOperaもSafariもmargin:0 auto;でセンタリングできますし、それで中央配置にならない場合はhtmlに問題があります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>センタリング</title> <style type="text/css"> <!-- #box { background: #66CCCC; width:150px; height:150px; margin:0 auto; background-color: #006699; } --> </style> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <div id="box"></div> </body> </html>
- rukuku
- ベストアンサー率42% (401/933)
こんばんは Internet ExplorerとFirefoxでは方法が異なります。 http://oshiete1.goo.ne.jp/qa3317591.html http://oshiete.nikkeibp.co.jp/kotaeru.php3?qid=2133818 ＃１のsalonpathさんの回答は、Firefoxには効きますが、Internet Explorerには効きません。 Internet Explorerに効かせるには、 body {text-align: center;} です。…この設定はFirefoxにはのdivやpには効きません。 これですと、中のテキストなども中央揃えになってしまうので、 div {text-align: left;} で左揃えに戻します。
- salonpath
- ベストアンサー率48% (194/399)
中央配置 widthを指定してmarginの左右をauto
関連するQ&A
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- CSSでの背景色設定とIE6.0での表示について
お世話になります。 全くの初心者ですが、Golive7.0の体験版を使ってHP作りに挑戦しています。 過去ログで調べてもわからなかったので教えて下さい。 使用OS : Windows XP (1) HTMLで表示する文章を作り、CSSファイルで、divブロック（class=contents）内の背景や文字色などは設定できましたが、ページ全体のbodyに適用させる背景色は反映されません。 body { background-color: #E7FAEE; } HTMLソースの方に直接上記の設定を指定すると反映されました。 参考にしている入門書にはCSS内で記述するように書かれていますが、何か忘れていることなどがありますでしょうか？ CSSファイルのリンク設定はちゃんと反映されています。 (2) divブロック（contents）を画面の真ん中に配置するよう、 .contents { text-align: center; width: 600px; margin:auto; } と設定しましたが、IE6.0では画面の左端に寄っています。 ネットスケープ7.1ではきちんと中央に表示されます。 入門書には、『HTMLソースに<div class="contents">を入れないとIE5.xでは幅が固定されません』とあり、そこも記述してあります。 サーバーに上げてもプレビューと同じく反映されていませんでした。 5.xバージョンではないのに反映されないのはなぜでしょうか？ 以上、どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでよく作られる背景の作り方を教えてください。
お世話になります。ＣＳＳ初心者の者です。 もしかしたら基本的な質問だと思いますが初心者の私には分からなかったのでどうか詳しい方教えてください。 現在ウェブサイトを作成しているのですがいろんなサイトでよく見るような中央揃えで伝えたい情報を載せて、左右には背景色なり背景画像なりが表示されるような背景はどうやって作るのですか？ 調べたところＣＳＳを使っているというのは分かったのですが肝心のＣＳＳソースというものが分かりませんでした。 疑問になっているのは ・ブラウザサイズに関係なく中央にメインの情報ページを置くにはどうしたらいいのか？ ・中央部分の両端にドロップシャドウのような効果を出すには？ といったようなことです。 参考までにこういうような効果を出したいというサイトを載せておきます。正直困っています、どうかよろしくお願いします。 http://www.msgallery.jp/ http://www.uc-company.co.jp/ http://www.nkk-sys.com/index.html
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで背景画像設定
ページ自体はテーブルで位置を特定しています。 中央に750ピクセルのテーブルを配置しその中にコンテンツを入れています。 さて、背景画像を固定にしたいと思っています。 場所なのですが、ブラウザサイズに左右されない下部分・中心から375右の位置が右端になるようにしたいんです。 いわゆる「中央に750ピクセルのテーブルを配置しその下部分に画像を配置」した状態で、なおかつ固定としたいんです。 このような言い回しでわかっていただけたでしょうか? CSSで右下に配置ってのはやったことがあるのですが、「中央から375ピクセルの位置が右端」なんてことが可能なのでしょうか? 方法があれば教えてください。
- ベストアンサー
- HTML
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
- perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 ｍ（＿ ＿）ｍ 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
- CSSにてコンテンツを中央へ寄せるには
どうも、こんにちは。 普段、1024x768 の画面でデザインをしております。 BODY { margin: 30px; } と記述すると私のモニターではちょうど中心に来るので良かったのですが、昨今の大画面モニターで見ると偉く左寄りで不恰好なことに気づき、どの大きさの画面で見ても中央に寄るように変更したいと思い、調べたのですが <body> <center> <table> コンテンツ </table> </center> </body> のように<center>を使ってやる方法はわかったのですが、現在ページ数が多数なため、全てのページにこれをいちいち入れるのは…と思い、できればCSSにて一気に反映できればと思っているのですが、色々とBODYタグ以下に入れて試したのですが、思うようになりません。 どなたかCSSによってコンテンツを中央に持ってくる方法をご存知の方いらっしゃれば、是非ご教授願います。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSでのレイアウトについて
CSSやHTMLのテンプレートをカスタマイズ中です。 分からないことだらけですが構成としては BODYと#maincontで分かれていまして、 画面中央に四角いコンテンツ。 サイドに背景画像が表示されるようにしたいです。 BODY部分に背景画像のbackground指示を入れると 画面一面中央コンテンツ上にも背景画像が表示されてしまいます。 画像がかぶっている中央コンテンツの文章や 外枠は画像の上から表示されて読めます。 一枚構成になっているような状態だと思うのです。 枠外背景にのみ画像を表示する方法を教えてください。 画像なしの状態では閲覧に問題はないです。 下記CSSを一部抜粋します。 どなたかご親切な方。 分かりやすくお願いします。 BODY{ font-size:～～; font-family:～～～; color:#～～～; border-top:5px #000000; solid; background-image: url(～～～); background-repeat: repeat; } #maincont{ width:600px; margin:auto; padding:30px border-left:3px #～～～ dotted; border-right:3px #～～～ dotted; }
- ベストアンサー
- その他（インターネット・Webサービス）
- cssについて教えてください。
１ページづつシリーズ分けしたページが計５ページある商品紹介のコンテンツエリアをcssでコーティングしたいのですが、背景だけが違っていてその他の仕様はすべて同じときにｃｓｓはどう書いたらいいのでしょうか？ 全部同じ仕様なので1つcssを作ってすべてに適用させればいいと思っていたのですが、背景だけ違うので各ページ別々のcssを作ったほうがいいのでしょうか？
- ベストアンサー
- CSS
