[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
今回の改装にあたり作成したこのテンプレート、記事の入るボックスとサイドにあるプラグインの入るボックスに角丸を実装しています。
面倒なこと抜き、とにかく楽にボックス要素に角丸を実装したい！しかもそれなりにクロスブラウザも考慮しなきゃ、と悩んだ挙句にCSSとIEにはJavaScriptを用いるという方法を採る事にしました。今回はCSSでの角丸の実装について書いておきたいと思います。
CSS3のプロパティにborder-radiusというのがあります。これがボックス要素に角丸な効果を実装するプロパティなのですが、記述するCSSは以下のような感じになります。
div {
border-radius: 10px;
-webkit-border-radius: 10px;/* Google Chrome、Safari用 */
-moz-border-radius: 10px;/* Firefox用 */
}
実際に適用させるとこんな感じになります。FirefoxやSafariなどで見ると黒いボックスの角が丸くなっているのが解ると思います。これは簡単で良いです。ただし現段階ではFirefoxなどのMozilla系、Google ChromeやSafariなどのwebkit系のブラウザ共にブラウザ独自の拡張プロパティによる対応のようです。簡単で良いですよね。今までは画像を用いたりCSSで細かくポジショニングしたりととにかく面倒な作業をしなければならなかった訳ですから。このプロパティ、特定の角だけ丸くしたりすることも可能なようです。調べてみると面白いですよ。←不親切
これで万事OKとなれば万々歳なのですが、あろうことか最大のシェアを誇るIEがこのプロパティに対応していません。IE8でさえNGです。こういう時にこの世からIEを抹殺したいという非常に強い殺意のようなものを感じます。
いっそIEは切り捨てるという選択肢もありますが、このブログを訪れてくださる方々の使っているブラウザの約7割がIEらしいのでそれもちょっと切ない…。そこでJavaScriptを用いる手段になる訳ですが、その記事はまた後日。
