BPS株式会社開発ブログ Beyond Perspective Solutions LTD. » CSS

Firebugをクリーンに改造する

baba — Thu, 08 Jul 2010 02:36:33 +0000

ググれば出てくるようなネタではありますが。

Firebugの最大の欠陥は、見た目があれなことです。

開発者の中には、あれが大の苦手の人もたくさんいると思います。

# 私は先週薬局に駆け込んでバルサンしてきました。
# というか良く思うんですが、なんでバルサンとかの製品にイラストを描くんでしょうね？買う人の気持ちを何も分かっていない。

ということで、しっかりと消しておきましょう。

このZIPファイルでプラグインを上書きすれば、すべてOKになります。1.5.4で確認。
clean_fire

インストール済みの場合は、以下

C:\Users\***\AppData\Roaming\Mozilla\Firefox\Profiles\
***.default\extensions\firebug@software.joehewitt.com

未インストールの場合は、XPIファイルをダウンロード→拡張子をZIPにして解凍して、上書きして下さい。

これで再起動すれば、快適な開発ライフを堪能できますね！作業効率倍増です。

快適なHTML/CSSライフを！

Windowsのアイコンキャッシュがたまに殺人的な効力を発揮することがあるので、
C:\Users\***\AppData\Local\IconCache.db
を消したりしておいた方が気休めになります。

HTML/CSS floatを無駄なく解除する方法

junya — Mon, 14 Jun 2010 12:21:37 +0000

現在はHTML、CSSコーディングの知識を深めようと思い勉強中なのですが
最近知った、感心したものをひとつ、ご紹介したいと思います。

私は普段、floatを解除する際はCSSにて

    .clear {
        clear:both;
    }

を用意して置き、

    <div class="float_a"> ～～～ </div>　/*float要素a*/
    <div class="float_b"> ～～～ </div>　/*float要素b*/
    <div class="clear"></div>　/*float解除*/

という手法を取っていましたが、空のdiv要素をコードの中にいくつも配置するのは美しくありません。
もっと良い方法はないかと思い他の社員の方に聞いてみた所、こんな方法もあるよと教えてくださいました。

CSSにて

    /*IE7以外のモダンブラウザ向け*/
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }

     /*IE7およびMacIE5向け*/
    .clearfix{ display:inline-block; }

    /*IE6以前向け*/
    /*Hides from IE-mac\*/
    * html .clearfix{height:1%;}
    .clearfix{display:block;}
    /*End hide from IE-mac*/

そして

    <div class="float_box clearfix"> /*floatの親要素＋clearfix*/
        <div class="float_a"> ～～～ </div>　/*float要素a*/
        <div class="float_b"> ～～～ </div>　/*float要素b*/
    </div>

と記述することにより、親要素が閉じた瞬間にfloatが解除されます。

一度覚えてしまえば何てことはないですし、状況によっては前者の方が良い場合もありますが
選択肢が増えるという事は、それだけきれいにコードが書けるようになるという事です。
たくさんの知識を増やして、常にきれいなコードが書けるよう心がけたいですね。

dojoの細かいTIPS

baba — Sat, 22 Aug 2009 03:10:09 +0000

dojo使いには当たり前かもしれない、ちょっとしたTIPSです。

(1)dojo.byId
dojo.byIdは、HTMLのエレメントを渡すと、そのまま帰ってきます。
つまり、dojo.byId(dojo.byId(’hoge’)); とやっても正常に動作します。

なので、dijit等で「ノードのIDを渡す」と書かれているところに、直接エレメントを渡しても、たいてい上手く動きます。
動的に要素が増えてIDを付けにくい場合などに、ちょっと役立ちます。

(2)dojo.query
dojo.queryは、CSSのセレクタで要素を選択できる便利なものです。
この第2引数にHTMLのエレメントを渡すと、その子要素のみ検索対象になります。

var img = dojo.query('img', hogeNode)[0];

基本かつ必須な機能のはずなのに、なぜか解説サイトにあまり書いていないという。。

(3)dojox.layout.ResizeHandle
ドラッグ＆ドロップはサンプルがたくさんあるのに、リサイズはなぜか少ないですね。
dojoはリサイズも簡単なので、以下にサンプルを載せておきます。

<html>
<head>
	<script type=”text/javascript” src=”dojo/dojo.js”></script>
	<script type=”text/javascript”>
		dojo.require(’dojox.layout.ResizeHandle’);
		dojo.addOnLoad(function() {
		var handle = new dojox.layout.ResizeHandle({
		activeResize:true,
		minWidth:30,
		minHeight:30,
		targetId: ‘box’
		}, dojo.byId(’handle’));
		});
	</script>
	<link rel=”stylesheet” href=”dojox/layout/resources/ResizeHandle.css” />
</head>
<body>
	<div id=”box” style=”position:relative; background:yellow;”>
		<p>リサイズできます</p>
		<div id=”handle”></div>
	</div>
</body>
</html>

↓動作サンプル

リサイズ可能

JavaScriptでCSSのプロパティを削除する(IEでfilterがあるとClearTypeが無効になるバグ対策)

baba — Sat, 22 Aug 2009 02:44:11 +0000

javascriptからCSSを変更したい場合は、

//生
var node = document.getElementById('hoge');
node.style.marginLeft = '10px';

//dojo
dojo.style(dojo.byId('hoge'), 'marginLeft', '10px');

といった感じになります。

しかしこれだと、CSSのプロパティ自体を削除することはできません。

普段はそんな必要も無いのですが、IEにはfilterプロパティの付いた要素のその子要素でフォントのアンチエイリアス(ClearType)が効かなくなるというバグがあるので、filterプロパティ自体を削除したいことがあります。

node.styleで取得できるオブジェクトはCSSStyleDeclarationで、これにはremoveProperty()というメソッドがあるので、

node.style.removeProperty('filter');

とすれば良さそうです。

しかしIEではなぜかこれが未定義です。代わりにremoveAttributeが使えます。

なので、

var node = document.getElementById(’hoge’);
if (node.style.removeProperty) {
	node.style.removeProperty(’filter’);
}
if (node.style.removeAttribute) {
	node.style.removeAttribute(’filter’);
}

のような使い方になります。

—–具体的な使用例—–
dojoでは簡単にフェードインが使えます。
しかし、IEだと、フェードインした要素はフォントがガタガタになります。特にメイリオ等のアンチエイリアス前提フォントだと悲惨です。
以下のようにonEndを設定することで、フェードイン完了後はなめらかになります。

//fadeInを使うのであらかじめ透明度を0にする
dojo.style(dojo.byId(’hoge’), ‘opacity’, ‘0′);

(new dojo.fadeIn({
	node: ‘hoge’, //フェードインさせるノードのID
	duration: 1000, //ミリ秒
	onEnd: function() {
		var node = dojo.byId(’hoge’);
		if (node.style.removeProperty) {
			node.style.removeProperty(’filter’);
		}
		if (node.style.removeAttribute) {
			node.style.removeAttribute(’filter’);
		}
	}
})).play();

上がonEndを設定しない場合、下が設定した場合です。メイリオフォント使用。

dojoで角丸ボタン

baba — Tue, 11 Aug 2009 07:16:09 +0000

dojo toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。
実質的に使えるのは、tundraとsoriaくらいだと思います。

どちらもコントロールが角張っているので、丸くしたくなることがあります。

ダイアログの角丸は、-moz-border-radius / -webkit-border-radius を使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavascriptで要素を書き換えたりしないといけません。

ボタン（高さ固定）は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。

テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。
soria.css を mytheme.css にリネームして、.soria を .mytheme に一括置換(手抜き)してしまいましょう。

そして、角丸実現のために以下のような記述を追加します。

.mytheme .dijitButtonNode .dijitButtonContents {
	background: url(images/button_back.png) repeat-x 0 0;
}
.mytheme .dijitButton .dijitRight {
	background: url(images/button_right.png) no-repeat top right;
}
.mytheme .dijitLeft.dijitButton {
	background: url(images/button_left.png) no-repeat top left;
}

button_leftは左側の丸い画像、button_rightは右側の丸い画像、button_backは中央の矩形部分の画像です。
これらのファイルは自分で作ってimagesに入れておきます。
これだけで丸くなります。

ちゃんとやるときは、soriaテーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。

IE7でmarginが消える

baba — Thu, 25 Jun 2009 14:08:07 +0000

たぶん既出ネタですが、ふと見つけたので一応。
IE7で、marginが消える場合があります。

再現条件は、
・paddingが0以外のブロック要素Aに囲まれている
・Aの最初の子要素(空白・TAB・改行以外)がブロック要素Bである
・Bにheightとmarginが指定してある(たぶんhasLayoutがtrueになるならheight以外でも該当)
こんな感じみたいです。

これらを満たすと、Bのmarginが無視されます。
シンプルな再現HTMLは以下の通りです。

test

こんにちは

ハロー

これを開くと、IE7以外では「こんにちは」と「ハロー」の左端はそろいますが、IE7では「こんにちは」が左に寄ってしまいます。

解決するには、Bを先頭子要素でなくせばいいので、適当なコメントを入れます。

こんにちは

ハロー

やっぱりIE7は地雷ですね。
自動更新でIE8が入るようになったのがせめてもの救いです。

BPS株式会社 開発ブログ Beyond Perspective Solutions LTD. » CSS