<html>
<head>
<style type="text/css">
#box { text-align: center;}
#campas { text-align: left; margin-left: auto; margin-right: auto; border: 3px solid #cccccc; width: 500px;}
#lbox { position:relative; margin: 10px; width: 210px; left: 10px; border: 3px solid #cccccc; float: left; }
#rbox { position:relative; margin: 10px; width: 210px; right: 10px; border: 3px solid #cccccc; float: right; }
</style>
</head>
<body>
<div id="box">
<div id="campas">
<div id="lbox">
left
</div>
<div id="rbox">
right
</div>
<br style="clear: both;" />
</div>
</div>
</body>
</html>
////////////////////CSSレイアウト(FireFox-IE対藹??)////////////////////////
text-alingは本来インライン鐔??素を中央觸??えにする。
divはブロック鐔??素なので、中央觸??えにするとき縺?margin-right:auto;縺?margin-left:auto;を使用する。
body {text-align:center;}をレイアウトのために使用するのは適切でない。
余計なところまでセンタリングされてしまうことにもなる。
しかしながら他の鐔??素であればレイアウトのためでも現藹??的には許される。#box { text-align: center;}
2重にセンタリングをIEバグのために鐔??う。
- センタリングしたい要素縺?margin-left: auto; margin-right: auto;として觸??準準拠でセンタリン繧?
- その親でもIEバグ対策とし縺?text-align: center;を指定
- しかしその藹??の中では臀??計なところもセンタリングされるので再縺?text-align: left;として戻す
IEバグについて詳し縺?は、
http://www.mozilla.gr.jp/standards/webtips0004.html
回り込み解除はスタイルシートで次に来る要素縺?clear:bothとしておいてもいいのですが、 1箇所だけのために藹??部ファイルに書縺?のも面倒。<br style="clear: both;">=<br clear="all">
単位の省略はしない
float要素は藹??要素とみなされず親鐔??素を突き抜けてしまう 親鐔??素縺?overflow:auto;を指定するか、親鐔??素のうしろ縺?:afterで鐔??えない要素を追加し,clear:bothする
////////////////////CSSレイアウト////////////////////////
コンテンツを<DIV>で軆??列し、CSSでレイアウトを整える。
position: relativeの鐔??素の藹??縺?position: absoluteの鐔??素を入れることで的確な臀??置を指定することもできる。
CSSのネストを行うとスタイルを有効にさせるところを細かく設藹??できる。
#p1{ xxx }
#p1 h1 { xxx }
<div id=p1><h1>xxxxx</h1>xxxxxxx</div>
画蜒?の配置を以臀??のようにして鐔??うことも可能。
#p1 h1 { background: url(h1.gif); width: 200px; height: 90px; }
#p1 h1 span { display: none; }
<div id=p1><h1><span>代替テキスト</span></h1></div>
同じidを複数の場所で指定しない、複数で利用する場合縺?classを使用する。
このブログ縺?CSSでレイアウトを整形しているのだが、Firefoxで崩れるとは知らなかった。標準的縺?CSSを使用しているつもりだったのだがIE特有のものだったためだ。2004年縺?らいはこれで大丈夫だったのだが。。い縺?つかCSSレイアウトのコツをまとめたのだが、い縺?らか縺?out of age？勘所ははずしていないと思うが、しかし細かいところで全然違うなぁ。継承の考え方が違うのか？→単位(px)を省略しないようにする縺?OK