ksk.の備忘録

ブラウザ画面全体にdivをぴったり敷きたい時に横幅の指定を width: 100%; とすると有効になりますが、 高さの指定を height: 100%; としても有効にならない場合があります。 理由は高さの指定は親要素の高さに依存するからです。 解決策として html,body{ height: 100%; }   と指定するとheight: 100%; が有効になり、画面ぴったりに敷けます。 後日紹介する中央にdivを配置する方法と一緒に使用すれば画面中央にロゴを表示したりする事ができます。

W3C CSS 検証サービス CSS文書の文法をチェックします。 Another HTML-lint gateway The W3C Markup Validation Service HTML文書の文法をチェックします。

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で指定した背景画像が表示されないバグがあります。 スクロールバーを動かすと表示されたり消えたりする厄介なバグです。 原因はfloatプロパティを指定した要素の子要素に背景を指定すると起こる場合があります。 対処法はwidthを指定すれば回避できます。

BrowsrCamp このサイトを使えばWinでMac版のSafariのブラウザチェックができます。 サイトのURL、画面サイズ、保存形式を入力するとスクリーンショットが表示されます。 無料版なので少しサーバーが重いですが、僕にとってはとても重宝してます。

ブラウザチェックの為にFirefox3と2を共存＆同時に起動したい。 そんな時は難しいことを考えずに、FirefoxのPortable Editionを使いましょう。 Firefox3はインストール済みということで話を進めていきます。 ・SourceForge Firefox2.0.0.18 Firefox_Portable_2.0.0.18_ja.paf.exeが日本語版です。 これを好きなところにインストールした後に /Firefox Portable/App/Firefox/firefox.exeへのショートカットを作ります。 例： C:\Program Files\Mozilla Firefox2.0.0.18 Portable\ ショートカットを実行すると、どのプロファイルを使うかと聞かれるので新しく作ります。 僕は「Firefox2.0.0.18」というプロファイル名で作りました。作ったあとは起動せずに終了。 次にショートカットを右クリック→プロパティを押して、｢リンク先｣の最後に 「 -no-remote -P 作ったプロファイル名」を加えます。一文字目の半角スペースを忘れずに。 例： "C:\Program Files\Mozilla Firefox2.0.0.18 Portable\App\Firefox\firefox.exe" -no-remote -P Firefox2.0.0.18 これでFirefox3とFirefox2が同時に起動できます。 ちなみに Firefox3のPortable Edition もあります。 3と3の同時起動もできると思うので、 ネットサーフ用のFirefoxとWeb検証用のFirefoxを別々にできそうですね！

僕のパソコンに複数のIEを共存させる Multiple IE というソフトがインストールされています。 このソフトをインストールすることによってInternet Explorer3.0/4.01/5.01/5.5/6.0が使えるようになります。 (+Internet Explorer7がインストール) そこでブラウザチェックをする時にいちいちショートカットを複数クリックするのは面倒だということで、一つのバッチファイルで複数のブラウザを同時に起動する方法を紹介します。 以下のテキストのファイルのパスを自分好みに変えてテキストエディタで保存、拡張子を「.bat」で保存。 @ECHO OFF start "" "C:\Program Files\Opera\opera.exe" start "" "C:\Program Files\Internet Explorer\iexplore.exe" start "" "C:\Program Files\MultipleIEs\IE6\iexplore.exe" start "" "C:\Program Files\MultipleIEs\IE55\IEXPLORE.EXE" exit あとは実行するだけで、指定したブラウザが同時起動します。

フロートのクリア用に .clearBox{ both: clear; width: 1px; height: 1px; } のような要素を用意しても、IE5.5/6では高さが1pxになりません。 その場合IE6では”overflow: hidden;” IE5.5では”font-size:0;”と”overflow: hidden;”を追加すると回避できます。 例： .clearBox　{ both: clear; width: 1px; height: 1px; overflow: hidden; font-size: 0px; }

.boxLeft { float: left; width: 200px; margin-left: 30px; } IE6ではこの場合フロートした要素のマージンが2倍になってしまいます。 display:inline;を加えるとバグを回避できます。 例： .boxLeft { float: left; width: 200px; margin-left: 30px; display: inline; }

Tantek Box Model Hackと言うらしいです。 IE5.5以前とそれ以外のブラウザで違うプロパティを指定したいときに使えます。 セレクタ { プロパティ: 値; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ プロパティ: 値; } 例： #mainTopInfolist li { height: 40px; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ height: 30px; } IE5.5以前はheightが40px それ以外のブラウザではheightが30px IE5.5以前のpadding、borderを含めた数値がheight、widthになるバグを回避する時に使えます。 もちろんですが、height: 40px;を指定しなければIE5.5以前のみプロパティが無しになります。