HTML5が正式勧告されるであろう2010年にあわせて、CSS3も正式に勧告されるみたい。それを受けてWebブラウザ各社も実装に向けて頑張っているようです。スタイルシートの標準仕様としているCSS2.1は、正式勧告されていなく草案の状態で、W3CがCSS2.1を推奨しているということらしいですね。これにはちょっと驚きました。
当ブログでも、いち早くCSS3に慣れ親しんでおこうと徐々に取り入れています。以前に紹介した、ボックスにドロップシャドウ効果をつけるbox-shadowプロパティも画像に対して所々で使っています。新しいプロパティに対応していないWebブラウザで見ても、大きく見た目が左右されないのでわからないかもしれませんね。そこで、今回も未対応ブラウザであっても大きく見た目を損なわないborder-radiusプロパティを使ってみます。
まず、当ブログへアクセスしていただいている読者のWebブラウザシェアを調べてみました。
主に扱うコンテンツがMac寄りなこともあってか、Safariを利用してアクセスいただいている方が多いようですね。私もSafari(WebKit)をデフォルトWebブラウザとして使っているので見た目にそれほど違いがないだろうと安心しました。
かなり前置きが長くなりました。border-radiusプロパティは、角丸ボックスを作るのに適したプロパティです。言葉では、わかりにくいので実例を示してみます。
坊ちゃん – bottyan
親譲（おやゆず）りの無鉄砲（むてっぽう）で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰（こし）を抜（ぬ）かした事がある。なぜそんな無闇（むやみ）をしたと聞く人があるかも知れぬ。別段深い理由でもない。
これまでいくつかのセレクタを作って苦労していたのが、こんな風に簡単に角丸ボックスを作れちゃいます。これを文章中のアクセントとして使用していくつもりです。
.radius {
-webkit-border-radius: 7px;
background-color: #e3e3e3;
font-size: 0.9em;
display: block;
margin: 0 auto;
padding: 10px 15px;
width: 80%;
}
.radius h2 {
font-size: 1.5em;
font-style: italic;
margin: 10px 0 0 0;
padding: 0;
}