- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
この様な場所で聞くより仕様書をまず見る癖をつけましょう。正確な知識が得られます。その上でわからないことを聞くと効率的です。 ★8. ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html ) ごらんのように、この様な場所で答えるにはあまりにも複雑です。
- inuchokin
- ベストアンサー率55% (5/9)
widthは要素の幅、marginは要素の余白です。 width: 100px; margin-left: 100px; と指定されていれば、左から100px余白を取った（スペースの開いた）ところに幅が100pxの要素を置く。ということです 「CSS margin」 「CSS width」などで検索すればわかるでしょう。 また、widthを絶対値で指定（%などではなく、pxなど）し、marginの左右（もしくは全方向）にautoを指定すれば、 左右中央揃えが実現できます。 width: 500px; margin: auto; しかし、heightを指定しても上下中央揃えはできませんよ
関連するQ&A
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- width、marginの同時使用
タイトル通りなのですが、 ボックスの大きさを例えば700pxとして、更にそのボックスの余白を マージンで指定する、と言う事は出来ないのでしょうか？ 自分で作ってみたのは良いのですが、 .sample1の方の効果が出ません。divの所は効果があるのですが… ちなみに外部ファイル呼び出しの方法で設定しました。 作ってみたもの↓ div{background-colo:#ffffff; width:700px; text-align:left; font-color:#282828; font-size:14px;} .1sample{ margin: 10px; padding: 20px;} 何か気付いた事があればご回答お願いします。
- ベストアンサー
- CSS
- ホームページ margin
#test1 { width: 443px; height:58px; position: top; margin: -1px 538px 8px ; } #test2 { width: 289px; height:59px; position: top; margin: -1px 1238px 8px ; } （画像はヘッダー部分です。） この二つはどちらも上下のmarginは同じ数値にしてあるのになぜ赤はこんなにも下にさがるのでしょうか？ 赤を青の場所に持ってきたいのですがどうすればいいでしょうか？
- ベストアンサー
- CSS
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
- CSSのmarginとpadding
テーブルの指定で以下のように指定しています。 この場合、 1.760pxのテーブルで右1pxの線をしていますが、この場合、中に入れる画像（その他のピクセルサイズ指定）は759pxまでにしなければいけませんか？ 2.marginでなく、paddiingで指定した場合も教えてください。 table.top { border-style : solid ; border-width : 0 1px 0 0; border-color : #333333; margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 760px; }
- ベストアンサー
- HTML
- jCarouselLiteでwidth: 100%
jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。
- 締切済み
- JavaScript
- 【css】marginについて質問です。
現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> <div id=container> </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。
- 締切済み
- デザイナー・クリエイティブ職
- cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 （この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
- スタイルシートのwidthについて
<style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか？ hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか？ ブラウザはIE6で見ました。
- ベストアンサー
- HTML
- max-margin-leftのようなもの
max-margin-leftというプロパティをCSSに追加したいのですが いえ、無理なら同じような効果が得られるだけでももちろんokですよ？ やりたいこと margin:0px auto;のように左右中央にコンテンツを表示する方法がありますが、もうちょっと左よりにしたい！ だけど、margin:0px auto 0px 120px ;にしたらウィンドウ幅が狭まったときも左に120pxもあまっちゃう！もったいない！ 左も消費できればいいのに。と。 こんな感じの動作↓ max-margin-left:120px;max-width:600px;margin-right:auto; 同じような動作をするならどんなのでもかまいません。 よろしくお願いします。 マージンを%指定すればいいじゃん→%指定は避けたいです。
- 締切済み
- JavaScript
