ボックス関連の注意
borderやpadding、margin、width、heightに関連するバグです。
覚えておかないとたまに痛い目をみます(^。^;)
※通常は、ボックスの幅を算出するときにパディングやボーダーのサイズは除外される。しかしWinIEではこれらを含めて幅や高さを算出する。
body要素にはborderやwidthを指定しない
body要素にボーダーを設定すると、マージンや子孫要素などを無視し、閲覧領域を囲むようにボーダーが表示されてしまう
floatしたときの注意
floatを使うと、よく思いもしない表示になったりする事があります。
特にWin IE5.0や5.5あたりは…(--,)
というわけで、floatをするときに注意点です。
IEで、フロートを含むボックスのマージンが無視されるなどの問題があるため。
※左フロートでは左マージンが、右フロートでは左マージンと上マージンが無視されます。
floatとmarginを一緒に指定しない
IEで、float: left;に左マージン、float: right;に右マージンをつけると、指定値の約2倍になってしまいます。
display: inline;を付ければ回避できるらしいです。
フロートに後続する通常フローでかつclearしていないブロックボックスにはwidthもheightも指定しない。
※フロートに後続する要素に幅か高さが指定されているとき、その要素の幅はフロートの幅を確保するように短縮される。また、フロートと後続要素の間に無くすことができない隙間ができる。
clearするボックスの上marginは0にし、widthも指定する
※clearプロパティによってフロートとの隣接を抑制した要素に上マージンを指定すると、フロートの下に指定値分の幅の上マージンができてしまう
絶対配置要素のコンテナブロックにはwidthを指定する
※絶対配置された要素が、後続する別の要素のマージンを引き継いでしまう
絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。leftとrightやtopとbottomを同時指定しない
※leftおよびtopプロパティが指定された要素では、rightおよびbottomプロパティの指定が無視される
overflowを使うときは同時にwidthやheightを指定する
幅も高さも明示されていない相対配置要素に overflow: hidden; を指定しても、絶対配置された子孫要素に対してその指定が効かない
CSSバグ辞典
スタイルシートでデザインを作成していて、どうしてもうまくいかない…そんな時はこちらでバグがないか調べてみると良いかもしれません。
案外バグだったりすることもあります。
ブラウザのデフォルトスタイルを決定する
bodyやhのマージンやパディングをひとつずつ設定するのは結構面倒なもの。
最初に一括でブラウザのデフォルトスタイルを決めておくととても楽です。
{
margin:0;
padding:0;
font-size:100%;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:#カラー;
background:transparent;
}
※marginやpaddingを0にして余計な余白を消去する
※fontやcolorの設定は、全頁用のデザインとして設定する
※transparentを設定して、ユーザー独自のスタイルシート上書きする
画像に隙間が出来る（firefoxなど）
firefoxなどモジラ系のブラウザは、ドキュメントタイプをFull Standardモードにすると、なぜか画像の下に隙間が出来ます。
それを回避するには、画像に以下をいれてください。
リストタグの中央寄せ
リストでメニューを横に作成したものの…リスト自体を中央寄せにしたい！
そんなときはこれです。
<ul>
<li><span><a href="a.html">あ</a></span></li>
<li><span><a href="a.html">い</a></span></li>
<li><span><a href="a.html">う</a></span></li>
<li><span><a href="a.html">え</a></span></li>
<li><span><a href="a.html">お</a></span></li>
<li><span><a href="a.html">か</a></span></li>
<li><span><a href="a.html">き</a></span></li>
<li><span><a href="a.html">く</a></span></li>
</ul>
</div>
margin:3px auto 5px auto;
padding:0;
width:760px;
height:65px;
list-style-type:none;
text-align:center;
}
#menu li{
float:left;
padding:0;
}
#menu a{
display:block;
width:95px;
height:20px;
text-align:center;
}
ページ全体の中央寄せ
ページの中味を全てセンタリングしたい場合です。
ちなみにこのブログもこれでセンタリングしています。
私がいつも使う方法を紹介します
<body;>
<div id="main>
ここに800pxのブログを表示したい場合
</div>
</body>
{
text-align:center;
}
#main{
margin:0 auto;
width:800px;
}
RSSで読もう
Web Designing（ウェブデザイニング）
WEB FLASH（ウェブフラッシュ）
WEB FLASH（ウェブフラッシュ）
Web Site expert(ウェブサイトエキスパート)
ＭｄＮ（エムディーエヌ）
Web Creators（ウェブクリエイター）