- ベストアンサー
cssで作った箱を中央寄せにする方法
リンク先をみていただければわかりますが、箱がくっついています。 箱aと箱bを中央寄せにしたいのですがどのようにすればよろしいですか？ http://www.geocities.jp/kadenkoujiya1242/test2.htm
- takuya12421242
- お礼率96% (494/514)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
cssで作った箱を並べた時に出来る隙間 ( http://okwave.jp/qa/q7851489.html )の続きですね。 その前に、もっともっと大事なことがあります。スタイルシートでプレゼンテーション(表現)を指定するということは、HTMLでは文書構造をマークアップするということと組み合わせて成り立つのです。 従来はHTMLの貧弱なプレゼンテーションを利用してプレゼンテーションを行ってきたため、肝心要のHTMが文書構造を示せなくなったことからの反省です。 →2.3.5 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 ) →2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) →スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) これらは必ず読んでおくこと。その上で・・ 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」を読むと、tyuuou,main-box,side-boxというclass名はおかしいことが理解できると思います。特にDOCTYPEを<!DOCTYPE html>と書かれていることはHTML5を意識されているようですが、それならなおさらです。なぜならHTML5は「HTML4.01をより文書構造化する」が一つの重要な改善点だからです。 HTML５では、基本的に <body> <header> 文書のヘッダ </header> <section> 本文 <div class="contentTable"> 本文の目次が入るなら </div> </section> <footer> </footer> </body> になります。HTML5の新しい要素に対応していないブラウザがたくさんある現状ではHTML4.01で <body> <div class="header"> 文書のヘッダ </div> <div class="section"> 本文 <div class="contentTable"> 本文の目次が入るなら </div> </div> <div class="footer"> </div> </body> となるはずです。 ・・・前置きが長くなりましたが、ここまでは今から学び始める上にとっても重要ですからしっかり理解してください。 HTMLは、スタイルシートでデザインを指定する前にしっかり作りこんでいく必要があります。たぶん、あなた自身にはどこに何を配置しようかと言うイメージがあるはずです。それを頭において、デザインは無視してHTMLを作成すること。あなたのイメージは文書の内容や構造から来る必然でもあるからです。 そのうえで、内容をセンター配置したければ、スタイルシートは html,body{margin:0;padding:0;}/* ウインドウとの隙間を消しておく */ div.header,div.section,div.footer{ width:100%; /* ディスプレイの巾いっぱい */ min-width:640px; /* ディスプレイが小さいときは640pxまでは付き合う */ max-width:980px; /* 広いときは980px(paddingを含めると1000px まで */ margin:0 auto;/* 常に中央に配置 */ border:solid 1px gray; padding:10px; } div.header{min-height:200px;background-color:rgb(255,200,200);} div.section{min-height:400px;background-color:rgb(255,255,200);position:relative;} div.footer{min-height:100px;background-color:rgb(200,255,200)} div.section div.contentTable{ /* section内のcontentTable */ position:absolute; top:0;left:0; width:20%;height:100%; } などのように、右じゃなく左に置きたければ、right:0;ですね。
その他の回答 (1)
- nory45
- ベストアンサー率25% (1/4)
<div class="test"> <div class="main-box"> テキスト テキスト </div> <div class="side-box"> テキスト テキスト </div> <div class="end"> テキスト テキスト </div> </div> css .test{width:1200px;margin:0 auto 0 auto;clear:both;} これで中央寄せになると思います。
お礼
回答ありがとうございました！
お礼
回答ありがとうございました！