移転のお知らせ

本日より以下に移転しました。
http://www.kurobuchi.jp/memo/

height:100%を指定する

ブラウザ画面全体にdivをぴったり敷きたい時に横幅の指定を width: 100%; とすると有効になりますが、
高さの指定を height: 100%; としても有効にならない場合があります。

理由は高さの指定は親要素の高さに依存するからです。
解決策として

html,body{
height: 100%;
}
 
と指定するとheight: 100%; が有効になり、画面ぴったりに敷けます。
後日紹介する中央にdivを配置する方法と一緒に使用すれば画面中央にロゴを表示したりする事ができます。

HTML・CSSを検証

W3C CSS 検証サービス
CSS文書の文法をチェックします。

Another HTML-lint gateway
The W3C Markup Validation Service
HTML文書の文法をチェックします。

IE7でサイズの大きな文字が切れる

IE7で表示した時にフォントサイズの大きな文字の下の方が切れることがあります。
恐らくdivタグの中にdivタグを入れるとこの現象がおこると思われます(未確認)
僕は以下の状況で文字が切れました。

#cBox {
      height: 50px;
      width: 200px;
{

#cName {
      font-size: 32px;
      margin-top: 20px;
}


解決方法としてはline-heightで文字の高さを指定すると解決します。

例：

#cBox {
      height: 50px;
      width: 200px;
{

#cName {
      font-size: 32px;
      margin-top: 20px;
      line-height: 40px;
}



あとはレイアウトを見ながらline-heightを微調整してください。

IE6で指定した背景が消えるバグ

IE6で指定した背景画像が表示されないバグがあります。
スクロールバーを動かすと表示されたり消えたりする厄介なバグです。

原因はfloatプロパティを指定した要素の子要素に背景を指定すると起こる場合があります。

対処法はwidthを指定すれば回避できます。