HTML, CSS

http://hp.vector.co.jp/authors/VA022006/css/generate.html

javascript:document.body.style['-webkit-transform']='rotate(2deg)';

これを Safari や Chrome のアドレスバーにコピーアンドペーストして return/enter キーを押してみよう。

tableのtdの角を丸める系

iPad のページ http://www.apple.com/ipad/pricing/ を見ていて角が丸まっていることに気づいた。見てみると -webkit-border-bottom-right-radius とか -moz-border-radius-bottomright が使われている

#main table .round_br { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }

:first-child :last-child

これは便利。

:first-line, :first-letter

最初の行、最初の文字、というのもある。書籍のように最初の文字を大きくするということもできる。

属性セレクタ

hoge > img:first-child[class="nantoka-photo"] { }

a[href^="http://"] { /* 外部 non-SSL リンク */ }

隣接兄弟セレクタ

HOGE + FUGA { }

HOGE の次に並列的に FUGA があったらその FUGA に対して適用される。