主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

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>

実際どのようになるかというと、このように入力したドキュメントの長さに応じて、必要なスクロールバーを自動的に表示してくれます。当然 textarea とは違いタグも書けまし、 iframe みたいに別の HTML を作成する必要もありません。

ページ: 1 |
フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank2, rank3, rank7, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google