http://www10.plala.or.jp/palm84/css_memo_mame.html
めっちゃゃ基本で、どえりゃー初歩的な注意点とか。。
う〜ん、とりあえずアレですよねー(何が)。ハックとかinvalidな技使う前にvalidな知識つけないと、ってかんじです?(怒涛の滝汗)
気まぐれに追記していく予定。ってかすぐ忘れるもんで。
あるあるかも。これ忘れてドタバタしたし何度も(汗)
a要素だけでなく、記述順序もきっちり考えとかないと。
IE6(IE7も)の後方互換モードで margin:auto;
が効かない
IE対策として、width は、margin,padding,border などをきっちり考えて指定するべしですなぁ。でもIEの後方互換モードだと・・・あれれ?
URLを指定してスクリーンショットが取れます。便利です。
line-height:1
にすると上側がかすれたり、上付みたいで下側が空いてしまう、和文が斜体にできないとか、注意しといた方がいいかも。
全称セレクタは便利かも。
IPAフォント系とかLinuxでメジャーなフォントを指定してるサイトはほとんど見ません(してもらっても困るだけですけど)。OSデフォルトのフォントを指定するのは無意味どころか迷惑な場合もあるかと。フォント別のCSSを用意するとかなら面白いと思います。
position や overflow 属性など、ちょっとややこしくてバギーっぽい属性をなるべく使わないってやり方もあるかなぁ。
なんかこれ使えたらカッコイイってな風に適当に使ってる場合もあるんじゃないでせうか。(オレノコトカー)
FirefoxやOperaに比べなんでIEはこうもややこしいのかなぁ。
大したもんじゃないけど一例として(あっと、作りかけです。)
後方互換モードの注意点など。はてなダイアリーとかもこれなので。
互換モードだと width を指定していない要素でバグ(?)が出ることが多いように思います。
バグが出やすいのは、複数列構成のいわゆるblogスタイルとか position や float 属性を使ってる時じゃないかなと思ったり。今ははやり(というか最近はワイド画面が多いからかな)なんでおさえとかなあかんってなかんじですが、こういう流行ってまた変わってくるんじゃないかなぁとも考えたり。
後方互換モードだと、IE同様に width の計算がおかしいようです(Win版だけかな)。でもOperaでは width を指定しなくても問題が出ることはほとんどないと思われるので、最悪、どうしてもIE用に width 指定が必要な場合はIEハックを使うのがいいかとしかないかなぁ。
この件は標準モードなら問題ないと思います。
ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクトただし、Mozillaのスタイルを使用する場合は注意が必要です。 Mozillaのスタイルではli要素のマーカーがリスト要素のpadding領域上に配置されます。 そのため、overflow: hidden;をリスト要素に指定するとマーカーが消えてしまいます。 普段はあまり問題にならないと思いますが、頭の片隅に置いておいてください。
web制作管理@2ch掲示板のまとめサイト。
最終更新日:2010.5.5