HTML/JS/CSS のデバグをする

最近の HTML は、何かと XHTML やら CSS やら JavaScript で苦労することが多いのですが、そんな時にとても役に立つのが、 FireFox の extension である FireBug です。
Firebug :: Firefox Add-ons
これをインストールすると、 JavaScript にブレイクポイントを設定してデバグしたり、 CSS の div box を詳細に視覚化してくれたり、めちゃくちゃ便利です。
おすすめ。

Mac の safari で同様の事をするにはSafari の Mac で firebug のような機能を使うにはを参照。

Safari のフォーカス時のハイライトを CSS で無効化するには

Safari は自動的に独自の highlight 機能でページ上でフォーカスされているコントロールに水色のボーダーを付けてくれる。これがたまに邪魔なときがある。
これを CSS で無効化するには以下の定義を追加すればよい。

:focus
{
	outline: 0;
}

IE6 でアンカー上に CSS で指定した背景が消えるのを防ぐ

CSS を使って a タグに背景を指定して、 hover で画像を切り替えるような事をよくするんだけど、 IE6 上だと何かチカチカしてスムーズに切り替えを行ってくれない。
これをどうしたらうまい事切り替えてくれるのかを調べたときのメモ。

解決策は驚くほど簡単なんだけどね。

透過 PNG を IE6 で扱う

最近知ったんだけど、 PNG 画像の Transparent 部分って IE6 ではきちんと透明に表示されないらしい。
これをどうにか FF とか他のブラウザでも表示されるようにしながら対応する方法。

基本的なやり方は CSS で background と filter を使って、以下のようにすれば表示はされるようだ。

background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
width: 160px;
height: 120px;

でもこれだけじゃ当然 FireFox では表示されない。じゃーどうするか。

Auto Scaled Font with JavaScript

任意のテキストを、指定した幅に改行無しで一行に表示させたい時に、 JavaScript でフォントのサイズを変化させて実現する例。

HTML

<span id="scaled" style = "white-space: pre;">ここに動的に変化するテキスト</span>

JavaScript

Prototype.js 使ってます。

function fitFont()
{
    var fs = 40; // 標準フォント
    var fw = 300; // max width
    Element.setStyle($("scaled"), {"font-size": fs + "px"});

    while( true )
    {
        if( Element.getWidth($("scaled")) > fw && fs > 1)
        {
            fs -= 1;
            Element.setStyle($("scaled"), {"font-size": fs + "px"});
        }
        else
        {
            return;
        }
    }
}

Flash と JavaScript の連携

Flash から JavaScript の関数を呼んだり、 JavaScript から Flash の関数を呼んだりしたいことがかなりあって、どんな方法があるのか調べたときのメモ。
ただ単に呼び出す方法が分かっても、JavaScript と Flash のロードし終わるタイミングなんかもあって色々と厄介だったのでその辺の回避方法もついでに書いておく。

HTML で画像サイズの比率固定したまま高さ幅制限

動的な HTML で様々なイメージサイズが想定されるイメージの width と height の比率は固定したまま、一定の高さと幅のスペースに収めたいときがある。
例えば AxB サイズの画像の幅と高さを固定したまま、 300x200 のスペースに収めたいという感じ。
高さが幅より高いときもあれば幅が高さより広い場合もある。
そんな時は css の max-width と max-height を使うと便利。

ただこれは IE6 では対応していないので、じゃーどうしようか。

Flash Player の z-index

Flash Player の上に css の z-index で何かをかぶせたいときは、 Flash Player に param タグで wmode っていうパラメータを指定してやらないと駄目らしい。

<object type="application/x-shockwave-flash" data="hoge.swf">
<param name="movie" value="hoge.swf" />
<param name="wmode" value="transparent">
</object>

あとは z-index で調整する。

Style Sheet(CSS) で Scroll bar

HTML で、限られたスペースに、可能な限りのドキュメントを入力してスクロールバーで制御したい場合があります。 iframe や textarea でも行えますが、スタイルシートで overflow を使用してスクロールバーを出すこともできます。
例えば幅 400x40 のスクロールバーつきエリアを作成するには以下のようにします。

<div style="overflow: auto; width: 400px; height: 40px">
    ここに入力したいドキュメントを書く。
</div>