1日1tech

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

CSS Tips: float した要素を内包する要素の背景を最後まで表示する方法

仕事で調べ物をしていて、見つけたのでメモ。
float を使ってレイアウトする際、背景画像の表示が思った通りにならず、途中できれてしまう事を解決する方法。

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
http://www.fsiki.com/archive/css-doc/float.html

非常に丁寧に整理して、解説してくださってます。
モダンブラウザなら、css の疑似要素 after と content の指定でなんとかなるようですね。
スポンサーサイト
  1. 2008/12/09(火) 12:23:42|
  2. tips|
  3. トラックバック:0|
  4. コメント:0

CSS Tips:ユニバーサルセレクタの指定は重い?

Emotional Web さんのエントリー「*{ margin : 0 }はもう古い!?」によると、
何故*セレクタを使った手法が時代遅れなのか?それが気になるところですが、主な理由として挙げられているのは下記のようなもの。

* レンダリングが遅くなる(重くなる)。大きなページは特に。
* 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)

とな。うう~ついこの間のお仕事でも、深く考えずに
*{margin:0; padding:0; font-style:normal;}
ってしてましたよ。個人的にブラウザ毎にCSS用意してってのは好きではない(効率が悪い)ので、いつもこのおまじないを唱えるようにしていたのですが...反省。

確かに ul,li とかで階層を表現する場合とか、フォームのボタンとか、デフォルトのスタイルが解除されていたら、いちいち指定しないといけなかったし、これからはよく考えて使おう、ということで。
  1. 2007/02/20(火) 23:03:06|
  2. net|
  3. トラックバック:0|
  4. コメント:0

JavaScript で CSS を動的にいじる(透明度の設定)

CSS で半透明の設定って、MSIE しかできないと思ってたら、Mozilla でもできるんですね。不勉強でした。。。
css で透明度50%にする指定なら、こんな感じで指定すると半透明で表示されます。Opera も ver 9 以降ならいけるみたいです。

opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);


で、JavaScript で動的に CSS のプロパティ値を変更する時、MSIE ではうまくいくのに、MozillaFirefox ではうまくいかないな~と思ったら、こんな事ではまってました。

document.getElementById(hoge).style.filter = "alpha(opacity=50)"; document.getElementById(hoge).style.MozOpacity = 0.5; document.getElementById(hoge).style.opacity = 0.5;

表記違うし。大文字小文字で区別されるし。
気がつくまで1時間は悩みました orz
※10/11 追記:はてブで間違い指摘してくださってたので修正しました。ありがとうございます。

その他、JavaScript で CSS プロパティをいじるためのメモは追記で 【“JavaScript で CSS を動的にいじる(透明度の設定)”の続きを読む】
  1. 2006/08/21(月) 21:12:08|
  2. develop|
  3. トラックバック:0|
  4. コメント:2
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。