Posted by poundhound on
過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。
過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。
まずdl要素のline-heightプロパティで行の高さを指定します。dd要素のmargin-topプロパティにdl要素で指定したline-heightプロパティと同じ値のネガティブマージンを与えればOKです。
Posted by poundhound on
Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。
Posted by poundhound on
当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。
なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。
結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。
統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。
Posted by poundhound on
CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。
CSSStickyで紹介されている(X)HTMLとCSSだと全体を包むdivがありません。よくあるサイトのデザインとして全体を包んだdivの左右にドロップシャドウをつけた画像を縦軸にリーピートさせるものがあります。今回は このCSSStickyFooterを少々改造して全体を包むコンテナを含んだワイヤーフレームに対応させてみました。
Posted by poundhound on
ネタもとはここらへんです。CSS Browser Support
| Selector | IE8 | IE7 | IE6 | FF3.5 | FF3.0 | FF2.0 | Chrome | Op9.0 | Mac Saf4 |
Mac Saf3.2 |
|---|---|---|---|---|---|---|---|---|---|---|
| * | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| .class | ○ | ○ | △ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| #id | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E F | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E > F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E + F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E ~ F | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E[attr] | △ | △ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| E[attr=val] | ○ | ○ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
| E[attr~=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| E[attr|=val] | ○ | △ | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| E[attr^=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| E[attr$=val] | ○ | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| E[attr*=val] | ○ | × | × | ○ | ○ | △ | ○ | ○ | ○ | ○ |
| :first-child | ○ | △ | × | ○ | ○ | △ | ○ | △ | ○ | ○ |
| :link | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :visited | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :lang() | ○ | × | × | ○ | ○ | ○ | ○ | △ | ○ | ○ |
| :before | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::before | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :after | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::after | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :first-letter | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::first-letter | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :first-line | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| ::first-line | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :root | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :last-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :only-child | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :nth-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-last-child() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :first-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :last-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :only-of-type | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :nth-last-of-type() | × | × | × | ○ | × | × | ○ | × | ○ | ○ |
| :empty | × | × | × | ○ | ○ | △ | ○ | × | ○ | ○ |
| :not() | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :target | × | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ |
| :enabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :disabled | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| :checked | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
