- ベストアンサー
ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。 このサイトはサイトのサイズが横８００ｐｘだと思うのですが、１２００ｐｘで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。 私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、ＣＳＳの設定はどうやるのでしょうか？ 練習用にＨＴＭＬとＣＳＳのソースを作りましたので、これでやり方を示していただけると幸いです。 ＨＴＭＬ、ＣＳＳ内容がメニューとコンテンツの（参考サイトのページ３分割ではなく）２分割です。マージンのやり方なので問題はないと思います。 なるべく間違いがないように骨組みは（マージン以外）作ったつもりですが、間違えていたらご容赦ください。 どうぞ、よろしくお願いいたします。 ■練習用ＨＴＭＬ <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには？</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Ｍａｉｎで全体を覆いますよね？使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>ＨＴＭＬ、ＣＳＳが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■ＨＴＭＬ終了 ■練習用ＣＳＳ（いらないものは消して、いるものは追加してください。ｈ１、ｈ２は分かりやすくなるように入れています。） body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■ＣＳＳ終了
- Phoenix001
- お礼率100% (81/81)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
最初に申し上げておきますが、参考にされたサイトが： > 左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れない という状態で表示されているのはIEのみです。IE以外のFirefox等のモダン・ブラウザで見た場合は、この様な「ウィンドウ全体幅に対しての中央寄せ」ではなく、「ウィンドウの左端にぴったりくっついた左寄せ」になります。CSSの指定がIE以外の環境を考慮していないと思われる為です。 そして、世の中には、 > マージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページ という状態がIEのみならず主要なモダン・ブラウザで閲覧した場合に同様の表示結果を返せるコンテンツはごまんとありますよ。この様な中央寄せの手法はもう随分前からポピュラーであり簡単に実現できるものです。 全体をセンタリングする回答としてはNo.1の方の通りですが、 > ｂｏｄｙのｔｅｘｔ－ａｌｉｇｎ： ｃｅｎｔｅｒは何も指定していない（ｈ１、ｈ２のタグがついていない）文章まで全て中央揃えになってしまいますよね。 というのも事実ですから、これを回避するには、div#mainに更に"text-align: left;"を指定してやれば、このコンテナ内のインライン要素は全て左寄せに戻ります。 ちなみに、本来のCSSの仕様に準拠していれば、div#mainで左右marginをautoとするだけでセンタリングになるので、bodyに対する"text-align: center;"が不要となり上記の様な二度手間を踏まなくても良いのですが、IEが後方互換モードではこの左右marginのauto値の解釈を無視してしまう（IEでも標準準拠モードであれば有効です）為、この様な二段構えのプロパティ設定になります。 ＃この後方互換・標準準拠については説明すると長くなるので省略しますが、CSSでのレイアウトの解釈を左右する非常に重要な部分ですので、今の内に把握しておいて下さい。 ＃下記のサイトなどは、一覧比較ができる為、非常にわかりやすいです。 ＃http://2xup.org/log/2007/07/27-2111 ただ、質問者様のCSSには、今回の直接のご質問以外の部分にも、かなり問題があります。 以下、問題点のある部分を抜粋しました。※の部分で間違い等についてコメントしています。 ---------------------------------------------------------------------- body { background-color: white※セミコロンが抜けてますので、続くcolorとmarginの指定が無効になります。 color: black; margin-left : auto ; margin-right : auto ; }※プロパティの書き方をそろえた方が記述ミスも少なくなります。プロパティ毎に改行するならする、しないならしない、という様に。 div#main { float: middle;※floatプロパティに"middle"という値はありません。left（左に浮かせる）、right（右に浮かせる）、none（浮かせない（初期値））です。各プロパティにどんな値が用意されているか、きちんと仕様を確かめながら指定しましょう。 width: 800px;※(A) } div#menu { float: left; width: 9em;※(B) background-color: white; margin-right: 1em;※(C) padding: 0.4em; } div#content { float: left; width: 80%;※(D) } (A)～(D）はこのコンテンツの全体幅・カラムの割合・カラムとカラムの余白を決めている部分ですが、この各々の「幅」を決める単位が、ばらばらの為、正確な計算ができていません。 全体幅に当たる(A)をpxで固定値とするなら、その子要素である(B)～(D)は同じpxによる固定値か、%による相対値でなければ計算が合いません。前者の場合は(B)～(D)の合計が(A)以下、つまり800px以下でなければなりませんし、後者の場合は親要素である(A)を100%と考えますから、同様に(B)～(D)の合計は(A)以下、つまり100%以下でなければなりません。 ですが、現在の指定は(B)(C)がem、(D)が%とになっている為、計算を合わせる事ができません。この為、IEでは”たまたま”うまくいっている様に見えているかもしれませんが、他の環境でみると、(D)のコンテナは(B)のコンテナの下に落っこちてしまい、2カラムになっていません。このあたりもきちんと理屈を知って計算を合わせて行く必要があります。 ---------------------------------------------------------------------- 以下は、上記の諸々の点を含めた修正版です。質問者様のコンテンツのDOCTYPE等がわかりませんので、参考にされたサイトと同じ（HTML 4.01 Transitional・システム識別子なし。これだとほぼ全てのブラウザで後方互換モードになります。）、と解釈して下記のサンプルで検証済みです。 ---------------------------------------------------------------------- 修正版【HTML】 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには？</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main"> <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>左カラム リンクリスト</h2> <ul> <li>アイテム</li> <li>アイテム</li> </ul> </div> <div id="content"> <p>右カラム 本文コンテンツ</p> ～以下、省略～ </div> </div> </body> </html> ---------------------------------------------------------------------- 修正版【CSS】 ---------------------------------------------------------------------- body { background-color: white; color: black; text-align: center; margin: 0; } h1 {（省略）} h2 {（省略）} p {（省略）} div#main { width: 800px; margin: 0 auto; text-align: left; } div#menu { float: left; width: 120px; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 {（省略）} div#menu ul {（省略）} div#menu li {（省略）} div#content { float: right; width: 640px; } div#content h2 {（省略）} ---------------------------------------------------------------------- 不明点等ありましたら補足して下さい。
その他の回答 (2)
- king_777
- ベストアンサー率0% (0/1)
もう一人の回答者様の解答の中にもありますが、h1やテキストを左に揃えるには、それを囲っているもの、今回の場合div#mainにtext-align: left;を指定することで<div id="main">~</div>の間にあるものを左揃えにすることが出来ます。 body { background-color: white color: black; text-align: center; } div#main { width: 800px; text-align: left; margin: 0 auto; } といった感じです。 h1やpのようなブロック要素には、h1のみ、pのみなどの場合は例えば h1 { text-align: left; } や h1,p { text-align: left; } とすることも可能です。 何でもdivなどで囲うと更新・修正の時にわかりにくくなるのでそういったところも考慮に入れるとよいと思いますよ。 またこのようなcssを使うサイトの場合、ｃｓｓの指定がどのブラウザでも極力同じように反映されるようにリセットする記述もすると文字や幅の計算も楽になります。このあたりは「リセット css」のような感じで検索してみて下さい。
お礼
今回は、これにて回答を締め切らせていただきます。 ｋｉｎｇ＿７７７さんは次点とさせていただきます。 これからより自分の技術を向上させて行きたいと思います。 また、機会がありましたらよろしくお願いいたします。 本当にありがとうございました。
補足
ｋｉｎｇ＿７７７さん、再回答ありがとうございます。 ＣＳＳは分からないことだらけなので、ヒントをいただけるのは凄く助かります。 ブラウザに左右されない方法についてはもっと詳しく調べて行きたいと思います。 また、何かありましたらよろしくお願いいたします。
- king_777
- ベストアンサー率0% (0/1)
自分でしたら変更するところは cssの body { background-color: white color: black; text-align: center; } div#main { width: 800px; margin: 0 auto; } とこの二箇所を書き換えます。
お礼
補足をお礼の場と勘違いしてしまい、お礼を付けないままであることに気がついたので、今更ですがお礼を付けさせていただきます。 king_777さん、回答ありがとうございます。 駆け出しの自分は、こんな所で躓いていたのですね。 king_777さんのお陰で、更に勉強することができました。 本当にありがとうございました。
補足
ｋｉｎｇ＿７７７さん、速攻の解答ありがとうございます。 マージンがしっかり出来ますし、ウィンドウを小さくするとマージンからなくなっていくサイトになりました。 ただ、ｂｏｄｙの ｔｅｘｔ－ａｌｉｇｎ： ｃｅｎｔｅｒ は何も指定していない（ｈ１、ｈ２のタグがついていない）文章まで全て中央揃えになってしまいますよね。 これを回避するにはどうしたら良いのでしょうか？ どこかでやり方を見た気がするのですが、思い出せないのでこの補足にて質問いたします。
お礼
今回は、これにて回答を締め切らせていただきます。 詳細に回答してくださった、ａｂｒｉｌｌさんを良回答といたします。 また、機会がありましたらよろしくお願いいたします。本当にありがとうございました。
補足
ａｂｒｉｌｌさん、おそらく大変な時間がかかったであろう、詳細な説明と修正、ありがとうございました。 「質問の参考サイト」のブラウザ対応の種類は盲点でした。私はＩＥと（ＩＥ準拠の）ＣｈｒｏｍｅとＬｕｎａｓｃａｐｅしか使ったことがありませんので。 ブラウザの種類も気をつけてサイトを作るようにしますね。 私は余白ある中央そろえのサイトを見たのは初めてでした。何気なく見ていたから気づかなかったのでしょうか。 お恥ずかしい限りです。 分かりやすく中央そろえについて説明してくださってありがとうございます。 ブラウザの表示の違いについてわざわざ調査をされた個人の方が居るのには驚きました。 とても参考になります。ありがとうございます。 ＣＳＳは実は質問の３時間前からやり始めました。ホームページ作成は普段、ＨＴＭＬしか使ったことがなかったのです。 ミスを少なくする方法も考えなくてはいけないのですね。改行についてはとても参考になりました。 数値については混ぜて使用出来ると思い込んでいました。 ＣＳＳも「言語」なんですね。理屈を練ってあわせていくことの大切さを教えられました。 読んでいて色々質問したいことが出たのですが、自分が掲げたテーマから逸脱しそうなので、自分でもっと調べて、学習して、それでも分からなかったら新規に質問することにいたします。 月並みな言葉しか言えませんが、本当にありがとうございました。