Javascriptでブラウザのサイズを取得して、あらかじめ数種類(デモでは7種類)設定したBody要素のclass名に書き換えて、リキッドレイアウトを実現させるテクニックがA List Apartさんで紹介されています。
A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique
デモページを見て参考にするしかなさそうですが、非常に簡単に実装できます。
普段あまり意識せず使っていたclearfixで、適用したボックスの下にマージン(スペース)ができていたことに気づきました。
調べてみると、clearfixにもいろいろな見解や方法があるんですne...
私が使っていたものは、少し古いことも分かりました。
当面、対象としたいブラウザや、どのくらいまでスペースを許すかなどケースバイケースで使い分けていこうかと思います。
ボックスの内容を半透明にする場合、スタイルシートを以下のようにすることがありますが
.semitra-box {
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
}
IE６やIE7では、filter:alphaが効かない事があります。
半透明にしたいボックスに高さ(height)または幅(width)を指定してあげると反映されます。
IE6や5.5でfloatしたボックスがおかしい(倍になる)件。
今までアンダーラインハックとかして無理くり調整していましたが、display: inline;入れると解消できるそうです。
なんでやねん。
どちらも納得いかない回避方法ですが、こっちの方が楽だし問題も起きにくそうなので覚えておこうかと。
フルスクリーンFlashでwidthとheightを100%にした際に、IE以外のFirefoxなどのブラウザで高さが100%にならないバグ。
これは、親コンテナの高さを 100% に設定することで回避できます。
<style>
html, body { height: 100%; }
</style>
doctype を削除することでも解消するらしいので詳しくはAdobeで...
高さ100% の Flash のバグについて
近日公開予定の簡易ニュース更新システム(ブログのようなもの)の管理画面を綺麗にデザインしたいと思い、Niceformsを使用することにしました。
いつか使えるなとブックマークしておいたのですが、英語が苦手なので詳細は読まず(読めず)、どなたか日本語で解説してくれている方がいないか探してみたところ、なんでもダウンロードしたjsファイルとcssファイルへのリンクコード（下記）をヘッダーに入れるだけでフォームが左の画像のように綺麗にデザインしたものに変わるとのこと。
Webサイトをセンター合わせのデザインにする場合、例えば
<div id="container">コンテンツ</div>
のをセンタリングする場合、スタイルシートは
#container {
margin-left: auto;
margin-right: auto;
width: 760px;
}
などとすれば、IE7、Firefox、Operaなどは問題なくセンターリングされますが、IE6ではブラウザのバグによりセンタリングされません。
忘れないようにメモ
スタイルシートで2段カラムや3段カラムのレイアウトをおこなう際、親ボックスの中の子ボックスをfloatしますが、そうすると親ボックスに指定してあるはずの背景画像が表示されなかったりすることがあります。
散々なやんで色々調べた結果、clearfixハックの存在を知り、この問題を解消することができました。
他の部分でも、floatを使うことがありますが、brや空のdivにclearを指定したりしなくて済むので、それ以降なにかと使うことが多くなりました。大変便利なテクニックですね！
