Firebug Liteを実際に使ってみる - CSS編

いくつかのCSSを定義したサンプルページを作成し、動作を確認する。

HTMLファイル - css.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>CSS Test</title>
<script type="text/javascript" src="./firebug-lite-compressed.js"></script>
<style type="text/css">
<!--
h1
{
    color: #ff0000;
}

p#lead
{
    border: #444444 1px solid;
}

input.imeOn
{
    ime-mode: active;
}
-->
</style>
</head>

<body>

<h1>CSS Test</h1>

<p id="lead">
    テスト
</p>

<p>
    <input type="text" class="imeOn"><br>
    <input type="text">
</p>

</body>

</html>

IEでブラウズ

IEでCSSを編集・追加したところ

Safariでブラウズ。CSS欄には何も表示されない

SafariでCSSを編集・追加したところ

Operaでブラウズ。Safari同様CSS欄には何も表示されない

OperaでCSSを編集・追加したところ

SafariとOperaでは、直接HTMLに書いてあるスタイルシートを読みこむことができないようだ。IEの独自拡張であるime-modeを消しても、この結果は変わらなかった。現在のところ、SafariとOperaでCSS動作の確認をおこなう場合はCSSファイルとして外部化したほうがよさそうだ。

HTMLファイル - css2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>CSS Test</title>
<script type="text/javascript" src="./firebug-lite-compressed.js"></script>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>CSS Test</h1>

<p id="lead">
    テスト
</p>

<p>
    <input type="text" class="imeOn"><br>
    <input type="text">
</p>

</body>

</html>

CSSファイル - style.css

h1
{
    color: #ff0000;
}

p#lead
{
    border: #444444 1px solid;
}

input.imeOn
{
    ime-mode: active;
}

IEでブラウズ。CSSをHTMLに直接埋め込んでいる場合と変わらない

Safariでブラウズ。ime-modeは表示されない。またRunCSSがうまく動作しないようだ

Operaでブラウズ。ime-modeは表示されない。RunCSSは動作する

Firebugのように既存CSSの値を直接書きかえることはできないものの、CSSプロパティを動的に変更できるのは大変魅力的だ。borderやfloat、margin/paddingの微調整をおこなう場合はぜひ活用したい。