- ベストアンサー
ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 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）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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さんのお陰で、更に勉強することができました。 本当にありがとうございました。
補足
ｋｉｎｇ＿７７７さん、速攻の解答ありがとうございます。 マージンがしっかり出来ますし、ウィンドウを小さくするとマージンからなくなっていくサイトになりました。 ただ、ｂｏｄｙの ｔｅｘｔ－ａｌｉｇｎ： ｃｅｎｔｅｒ は何も指定していない（ｈ１、ｈ２のタグがついていない）文章まで全て中央揃えになってしまいますよね。 これを回避するにはどうしたら良いのでしょうか？ どこかでやり方を見た気がするのですが、思い出せないのでこの補足にて質問いたします。
関連するQ&A
- 購入して5年たらずしか経過していないのにCPUが不対応という事でWindows11にアップロードできません。
- 機種はFMVF77C2KGです上位モデルと思いますし5年で買い替えるのは早すぎると思います。
- どうしたら良いかメーカーの責任としてお答え下さい。
お礼
今回は、これにて回答を締め切らせていただきます。 詳細に回答してくださった、ａｂｒｉｌｌさんを良回答といたします。 また、機会がありましたらよろしくお願いいたします。本当にありがとうございました。
補足
ａｂｒｉｌｌさん、おそらく大変な時間がかかったであろう、詳細な説明と修正、ありがとうございました。 「質問の参考サイト」のブラウザ対応の種類は盲点でした。私はＩＥと（ＩＥ準拠の）ＣｈｒｏｍｅとＬｕｎａｓｃａｐｅしか使ったことがありませんので。 ブラウザの種類も気をつけてサイトを作るようにしますね。 私は余白ある中央そろえのサイトを見たのは初めてでした。何気なく見ていたから気づかなかったのでしょうか。 お恥ずかしい限りです。 分かりやすく中央そろえについて説明してくださってありがとうございます。 ブラウザの表示の違いについてわざわざ調査をされた個人の方が居るのには驚きました。 とても参考になります。ありがとうございます。 ＣＳＳは実は質問の３時間前からやり始めました。ホームページ作成は普段、ＨＴＭＬしか使ったことがなかったのです。 ミスを少なくする方法も考えなくてはいけないのですね。改行についてはとても参考になりました。 数値については混ぜて使用出来ると思い込んでいました。 ＣＳＳも「言語」なんですね。理屈を練ってあわせていくことの大切さを教えられました。 読んでいて色々質問したいことが出たのですが、自分が掲げたテーマから逸脱しそうなので、自分でもっと調べて、学習して、それでも分からなかったら新規に質問することにいたします。 月並みな言葉しか言えませんが、本当にありがとうございました。