HTML/CSS豆知識 - CSSめも

Tweet はてなブックマーク TOPSY

めっちゃゃ基本で、どえりゃー初歩的な注意点とか。。

う〜ん、とりあえずアレですよねー(何が)。ハックとかinvalidな技使う前にvalidな知識つけないと、ってかんじです?(怒涛の滝汗)

気まぐれに追記していく予定。ってかすぐ忘れるもんで。

基本らしい

宣言順序に注意

あるあるかも。これ忘れてドタバタしたし何度も(汗)

a要素だけでなく、記述順序もきっちり考えとかないと。

文書型宣言とブラウザでの表示

IE6(IE7も)の後方互換モードで margin:auto; が効かない

IE対策として、width は、margin,padding,border などをきっちり考えて指定するべしですなぁ。でもIEの後方互換モードだと・・・あれれ?

様々なブラウザでの表示確認

URLを指定してスクリーンショットが取れます。便利です。

いろいろ

line-height:1 にすると上側がかすれたり、上付みたいで下側が空いてしまう、和文が斜体にできないとか、注意しといた方がいいかも。

全称セレクタは便利かも。

IPAフォント系とかLinuxでメジャーなフォントを指定してるサイトはほとんど見ません(してもらっても困るだけですけど)。OSデフォルトのフォントを指定するのは無意味どころか迷惑な場合もあるかと。フォント別のCSSを用意するとかなら面白いと思います。

ブラウザのバグ?

positionoverflow 属性など、ちょっとややこしくてバギーっぽい属性をなるべく使わないってやり方もあるかなぁ。

なんかこれ使えたらカッコイイってな風に適当に使ってる場合もあるんじゃないでせうか。(オレノコトカー)

IE7の互換モード及びIE6対策

FirefoxやOperaに比べなんでIEはこうもややこしいのかなぁ。

IE7/IE6 の標準モードと後方互換モード

大したもんじゃないけど一例として(あっと、作りかけです。)

後方互換モードの注意点など。はてなダイアリーとかもこれなので。

互換モードだと width を指定していない要素でバグ(?)が出ることが多いように思います。

バグが出やすいのは、複数列構成のいわゆるblogスタイルとか positionfloat 属性を使ってる時じゃないかなと思ったり。今ははやり(というか最近はワイド画面が多いからかな)なんでおさえとかなあかんってなかんじですが、こういう流行ってまた変わってくるんじゃないかなぁとも考えたり。

Opera9

後方互換モードだと、IE同様に width の計算がおかしいようです(Win版だけかな)。でもOperaでは width を指定しなくても問題が出ることはほとんどないと思われるので、最悪、どうしてもIE用に width 指定が必要な場合はIEハックを使うのがいいかとしかないかなぁ。

この件は標準モードなら問題ないと思います。

Mozilla/Firefox

ただし、Mozillaのスタイルを使用する場合は注意が必要です。 Mozillaのスタイルではli要素のマーカーがリスト要素のpadding領域上に配置されます。 そのため、overflow: hidden;をリスト要素に指定するとマーカーが消えてしまいます。 普段はあまり問題にならないと思いますが、頭の片隅に置いておいてください。

ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクト

CSSバグリスト@CSSバグ辞典スレッド

web制作管理@2ch掲示板のまとめサイト。

備考

最終更新日:2010.5.5


Valid HTML 4.01! Valid CSS!