CSSの最近のブログ記事
とりあえずCSSまわりの改善点、というか、CSS3 working-draft に含まれている角丸ボーダー「border-radius:」への対応を確認してみた。
従来のFirefox2でも、独自拡張の「-moz-border-radius:」プロパティであれば角丸ボーダーは実現していたのだが・・・。
結局、確認した範囲（Windows2000/XP + Firefox3.0β2）では、border-radius:には対応していないようだ。
また、ついでにWindowsXP + IE7, WindowsXP + Safari3.0β でも確認してみたが、同じく border-radius: には非対応のようで、角丸ボーダーを表示させることは出来なかった。
CSS3での角丸ボーダーの指定例：
border-radius:10px;
Firefox(mozilla)での角丸ボーダーの独自拡張：
-moz-border-radius:10px;
以前に問題となっていた blockquoteタグについて、CSSを修正してみた。
blockquote p{
background-color: #f0f0f0;
width: 300px;
height: 8em;
padding: 8px;
overflow: auto;
line-height: 160%;
font-family: monospace;
white-space: nowrap;
}
blockquote p:after{
width: 300px;
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html blockquote p{
height: 8em;
overflow: scroll;
}
/**/
Microsoft謹製のIE用ツールバー（Web開発者向け）です。
CSSレイアウトの検証用に便利。
http://www.fsiki.com/archive/css-doc/float.html
これはつまり、親Block要素（幅・高さ未指定の、背景表示用）内に、左右振り分けの子ブロック要素をFloatを使って配置した場合、親Block要素からは子Block要素の高さが取得できずに背景を正しく表示させることが出来ない、という問題に対する解決方法です。
親要素を ID:container としたとき、CSSに以下を追加すると解決できる、ということです。
※後半部分は、IE用のスターハックと呼ばれるCSS-hackが使われています。
#container {
overflow: hidden;
}
#container:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html #container {
height: 1em;
overflow: visible;
}
/**/
ソース部分のみインデントさせようと思ったのだが、編集画面の「テキストインデント」は、単に「BLOCKQUOTE」タグを使用するものだった。
のみならず、入れ子構造に無理があるのか、レイアウトが壊れた・・・。
仕方が無いのでインデントを解除することにした。
む～ん。
