ksk.の備忘録

移転のお知らせ

2010-02-25T19:23:00.000+09:00

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

height:100%を指定する

2009-10-20T10:10:00.000+09:00

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

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

html,body{
height: 100%;
}

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

HTML・CSSを検証

2009-09-09T11:18:00.000+09:00

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

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

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

2009-09-09T11:13:00.000+09:00

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で指定した背景が消えるバグ

2009-09-09T10:55:00.001+09:00

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

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

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

Mac版Safariでブラウザチェック

2009-09-09T10:47:00.001+09:00

BrowsrCamp

このサイトを使えばWinでMac版のSafariのブラウザチェックができます。

サイトのURL、画面サイズ、保存形式を入力するとスクリーンショットが表示されます。
無料版なので少しサーバーが重いですが、僕にとってはとても重宝してます。

Firefox3とFirefox2を共存＆同時起動させる方法

2009-09-09T10:42:00.001+09:00

ブラウザチェックの為に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を別々にできそうですね！

バッチファイルで複数のブラウザを同時起動

2009-09-09T10:38:00.001+09:00

僕のパソコンに複数の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

あとは実行するだけで、指定したブラウザが同時起動します。

IE5.5/6で小さい高さを指定した時に指定した高さにならないバグ

2009-09-05T18:33:00.002+09:00

フロートのクリア用に

.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;
}

IE6でマージンが2倍になるバグ

2009-09-05T18:32:00.001+09:00

.boxLeft {
float: left;
width: 200px;
margin-left: 30px;
}

IE6ではこの場合フロートした要素のマージンが2倍になってしまいます。
display:inline;を加えるとバグを回避できます。

例：

.boxLeft {
float: left;
width: 200px;
margin-left: 30px;
display: inline;
}

IE5.5以前を回避して違うプロパティを指定

2009-09-04T18:18:00.001+09:00

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以前のみプロパティが無しになります。