king_777のプロフィール
- ベストアンサー数
- 0
- ベストアンサー率
- 0%
- お礼率
- 100%
- 登録日2009/06/17
- ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 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
- HTML
- 回答数3
- ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 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
- HTML
- 回答数3