html5でのマークアップで重要なのはセマンティクスの概念。
section、articleの使い方が重要になってくるのでは。
rssフィードを書くのに近い気がする。
様々なデバイスで最適な形で使用できるように、sectionなどを用いた階層構造をいかに使いやすい構造にするか、というところ。
突発的に忘れ、5秒で思い出したので念のため備忘録。
テキストを回り込みさせないために、なんか昔回り込みさせたくないボックスの高さを100%にするために云々みたいなことしていたような気がするけど、この記述のみでok。
<img src="hoge">
<p>このテキストに回り込んでほしくないわけよほんと。だってかっこわるいじゃんまわりこんだら。そうでしょ、ちょっとそこのあなた！</p>
cssを以下の通り記述。
p {overflow: hidden; }
もしあなたのお客様がIE6が素敵とおっしゃるなら
_zoom:1;
を加えてくだされば。
では、さようなら。
リセットcssがあるんですけど、デフォルトの状態がどんな属性になっているのか理解しているかいなかが作業効率に影響すると思うのですがどうでしょうか。
というわけで、IEのバージョン毎にスタイル属性の内容をまとめたサイトがありました。（IE6 IE7 IE8 IE9）
今まできっちりと見比べたことなかったのですが、あらためて見てみて色々納得できました。
一度目を通すといいかもしれません。
また、Firefoxは
resource://gre/res/html.css（標準準拠）
resource://gre/res/quirk.css（後方互換）
でデフォルトのスタイルシートを確認することができます。
ブラウザのデフォルトスタイルシートを表示するには (Firefox編)
プログラムにも一部CSSソースが組み込まれているようなのですべてではないらしいのですが。
選択したテキスト（要素）の装飾を変えるには「::selection」という疑似要素をCSSで指定します。
::selection {
background:＊＊＊;
color:＊＊＊;
}
これはCSS3をサポートしたブラウザに適用です。
Firefoxの場合は::-moz-selectionという独自拡張CSSが使えます。
::-moz-selection{
background:＊＊＊;
color:＊＊＊;
}
flashを背景にするためのCSSテクニックの一つ。
<div id="fla_css">
ここにswfファイルを配置
<div id="html-layer">
ここにコンテンツを配置
</div>
</div>
HTML上は上記の通り。
CSSは以下の通りです。
div#fla_css {
position:relative;
}
div#fla_css div#html-layer {
display:block;
position:absolute;
top:0px;
left:0px;
background:none;
}
マージンとか上記ソースの通りでなくても問題ありません。
普通ほとんど気にしないでもクリアできているからいいのだけど、Strictで宣言したら、bodyの直下はブロック要素でなくてはならない。
～HTML4.01・XHTML1.0～
body要素は、ブロックかスクリプトが1回以上出現しなければならない。
つまり
<body>
たとえばこんなのは駄目。
</body>
ということ。
つまり
<body>
<img src="***" />
</body>
も駄目。imgはインライン要素だから。
ようは
<body>
<p>たとえばこうすれば良い。</p>
</body>
ちなみに
Transitionalでは、
body要素は、flowが0回以上出現してよい。
line-heightを適切に指定することでブラウザ上での可読性に大きく貢献することは言うまでもなく。
おおざっぱですが、おおよそ1.2〜1.8程度に指定されていることが多いと思います。
ただ、このline-heightを単位指定するかしないかで問題発生の有無がわかれる事象があります。
以下例です。
p要素のline-heoghtをそれぞれ 1.4em、1.4 とし、
文中にp要素（親要素）の子要素としてem（font-size；200％）を用いています。
p要素のフォントサイズは16px
がーっと作業していて、つまずいた理由が以下。
ID名に使用可能な文字種は半角アルファベット（a-z|A-Z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）、コロン（:）、ピリオド（.）のみに制限されています。
class属性には指定できた日本語の平仮名やカタカナ、様々な記号などは使えません。
さらに ID名の書き出しは、半角アルファベットから始めなければならず、XML の仕様において "xml"（xMl, XML, Xml のように大文字・小文字で書くこともできない） からはじまる値は許されません。
id属性に数字始まりは使えない．．．ヒトに聞いてこりゃ赤っ恥だなと思いました。
ある意味気づかなかった自分にあっぱれ。
正常に動作するものとバグのあるものとの比較に関してここ数年でアンテナが鋭くなったと思っていたけど、まだまだだなと痛感。
でもどんなにアンテナ鋭くしてもどんなに頑張ってもやはり、共同作業が必要だ。
ヒトは盲目なり。
Internet Explorerの独自拡張なので、個人的には過去に使ったことがないが、zoomプロパティという要素を拡大して表示することができるプロパティがある。
これをolリストにおいて
li{
zoom : 1;
}
のような指定をすると本来順序リストであるolだと1 2 3．．．とリストに番号が振られるが、これがすべて1になってしまう。
余談ですが、ulとolはきちんと使い分けること。
ul は順不同リスト
ol は順序リスト
posisionプロパティで個人的に忘れがちな点。
親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置。
body直下をcontainerとかにしてcontainerが中央表示の場合、注意。
メモ。
CSSハックIE6以下のみ適用
1.スターハック・・・セレクタの前に「* html 」をつける（半角があります！）
* html #hacks { margin-top: 0px; }
2.アンダースコアハック・・・プロパティの前に「_」をつける
#hacks { _margin-top: 0px; }
IE7のみ適用
*:first-child+html #hacks { margin-top: 0px; }
#hacksの後に記載すること。
IE8とそれ以下のIEに適用
#hacks { margin-top: 0px\9; }
「\9」を追加
