2006年03月20日

引っ越しました。

posted by 高速内弁慶 at 20:47| Comment(56) | TrackBack(14) | 日記 | このブログの読者になる | 更新情報をチェックする

2006年01月27日

[CSS]意外に知られていない(かもしれない)ポイント制による優先順位

最近CSSの見直しをして色々新しい発見をするので今日もエントリーします。 ID、class、属性名には個別のポイントが設定されていてその合計値が高いものから優先されていきます。

その件について詳しく書く前に基本のおさらい。 スタイルシートは下に書いてあるものほど優先されます。 普通は外部スタイルの読込を一番最初して、次にHEADの中にスタイルを書き、タグに直書きするので、
タグ内スタイル>HEAD内スタイル>外部スタイル
の順で優先されると思います。(今回はユーザースタイル、ブラウザスタイル、!importantについては一先ず置いておきます。)
今までは一番最後に読込んだスタイルが適用されるって思い込んでたのですが、どうもそうではないらしい。 いや、うすうすは感ずいていたんですよ、なんかID付の属性が優先されてるなぁーって。

はい、ここから本題です。
id 100ポイント
class 10ポイント
属性名 1ポイント
はい、本題終了。

こういう計算でなりたってます。例を書くとこんな感じ。


/*こっちの方が優先されます。*/
#left p.contents a{
  color:#F00;
  font-size:0.8em;
}

/*こっちは無視されます*/
#left p a{
  color:#aaa;
  font-size:2em;
}

以上です。そんだけです。 そろそろムーバブルタイプに引っ越そうかなぁ。

posted by 高速内弁慶 at 20:41| Comment(17) | TrackBack(3) | CSS | このブログの読者になる | 更新情報をチェックする

[CSS]クロスブラウザな半透明フィルタ

IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。
しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。(クロスブラウザってJavaScript以外でも呼んでよかったけ?)

[Internet Explorer対応]


0〜100の数字で制御します。0に近づくほど薄くなります。
MacIEだと確か動きません。


img{
  filter: alpha(opacity=20);
}

[Mozilla / FireFox / Netscape 対応]


0〜1の数字、または0〜100%で制御します。0に近づくほど薄くなります。
こちらは最新版のMozilla FireFox Netscapeで動作します。
-moz-opacityはMozillaが実験的に実装している独自拡張です。いつ廃止されるかわからないので使用は推奨されていません。


img{
  -moz-opacity:0.2;
}

[Safari 対応]


サファリはこれで半透明になるらしいです。Macもってないからよく分かりません。


img{
  opacity:0.2;
}

[Internet Explorer / Mozilla / FireFox / Netscape / Safari 対応]


この3つのCSSを同時に記述するとOpera以外の主要ブラウザで半透明化出来ます。
そうです。Operaでは無理なんです。アハハ・・・。


img{
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
}

結局今回も、非推奨要素だったりOperaだと無理だったりあまり役に立たない内容でした。おしまい。
となりの部屋の住人がうるさくて眠れない。さっきから何度も壁殴ってるのに電話のケンカ声が止まらない。
ひさしぶに大家さんに電話するか。

続きを読む
posted by 高速内弁慶 at 00:02| Comment(44) | TrackBack(4) | CSS | このブログの読者になる | 更新情報をチェックする

2006年01月26日

[CSS]タグにclassは複数設定できるらしい。

知ってる人には当たり前の事かも知れないけど、知らなかったので「へぇ〜」って思った。だからエントリーしてみる。

classは半角スペースで区切る事により複数設定できる、具体的に書くと「class="p1 p2 p3"」とこんな感じ。スタイル内のセレクタをカンマ区切りで複数指定してグループ化はよく使ってるけど、これは使った事なかった。
今の所、特に使う予定はないけど。

posted by 高速内弁慶 at 23:24| Comment(19) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2006年01月23日

[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(後編)

前編の続きです。

bodyの中からイベントハンドラをなくす(Mozilla)

さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。

で、onclickさんがどっかいっています。どこにいったかというと、
document.getElementById("button3").addEventListener("click",test3,false);
この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。
オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。
window.addEventListener("load",setTest3,false);
これでwindowがロードされてから実行されることになります。記述するときに注意してもらいたいのはイベントにonがつかないという事です。onclickならclickになります。

サンプル



ソース


<script type="text/javascript">
<!--
function setTest3(){
	document.getElementById("button3").addEventListener("click",test3,false);
}
function test3(){
	document.getElementById("textarea3").value = document.getElementById("text3").value;
}
window.addEventListener("load",setTest3,false);
//-->
</script>
<form>
	<input id="text3" type="text" value="codeweb" /><br />
	<textarea id="textarea3"></textarea><br />
	<input id="button3" type="button" value="クリック" />
</form>

bodyの中からイベントハンドラをなくす(IE)

サンプルはIEじゃないと動きません。

やっぱりIEで動かないと使いものになりません。IEではaddEventListenerの代わりにattachEventを使います。今度はイベントにonがついてるので注意してください。

サンプル



ソース


<script type="text/javascript">
<!--
function setTest4(){
	document.getElementById("button4").attachEvent("onclick",test4);
}
function test4(){
	document.getElementById("textarea4").value = document.getElementById("text4").value;
}
window.attachEvent("onload",setTest4);
//-->
</script>
<form>
	<input id="text4" type="text" value="codeweb" /><br />
	<textarea id="textarea4"></textarea><br />
	<input id="button4" type="button" value="クリック" />
</form>

結局最後はprototype-js

こうなるとやっぱしクロスブラウザ用の関数を作りたくなるのが人というものです。ではここで専用の関数を作ってみます・・・と言いたい所ですが、わざわざ自分で作らなくても既に世の中には優秀なものが出来ています。
この一連の作業をprototype-jsを使って書くとこうなります。実に簡単でシンプルに出来ます。
Event.observe("button5", "click", test5, false);
ここがイベントハンドラの変わりになっています。button5はオブジェクトのIDですが、ここにはID以外にもwindowのようなオブジェクトを指定することもできます。
ビバ!prototype-js!

サンプル

このブログに載せたら文字コードが違うので動きませんでした。別ページ用意するのがめんどくさいのでソースだけ載せときます。

ソース


<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function setTest5(){
	Event.observe("button5", "click", test5, false);
}
function test5(){
	$("textarea5").value = $F("text5");
}
Event.observe(window, "load", setTest5, false);
//->
</script>
<form>
	<input id="text5" type="text" value="codeweb" /><br />
	<textarea id="textarea5"></textarea><br />
	<input id="button5" type="button" value="クリック" />
</form>

久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。

参考

元原稿とか
posted by 高速内弁慶 at 12:46| Comment(26) | TrackBack(2) | JavaScript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。