10.角丸影付き

数年前にあるサイトを制作したときには角丸を表示できるのはFirefoxだけでした。IE等他のブラウザでは単純な枠線でしか表示できなかったのです。日頃はFirefoxしか使っていないので、そのことはすっかり忘れていたのですが、つい最近になってIE9(Microsoft Internet Explorer 9)で角丸が表示できることを知りました。そこで、自分のサイトでも遅ればせながらひと月ほど前に使ってみました。この画面でいうと、左側のメニュー部分がそれです。

IE9だけではなくApple SarariやGoogle Chromeなども角丸は表示できているようです。同じIEでもIE8では表示できませんでした。これはCSSのバージョン3で追加された border-radius というプロパティに対応しているかどうかという違いです。


さて、CSS3には box-shadow というプロパティもあります。それを使うと
この画像に対して
このような効果をつけることができます。

いまあなたのブラウザではこの上の画像はどのように見えていますか?見え方によってお使いのブラウザのレベルがわかります。

見え方画像レベル
四角の枠だけ作者の意図がまったく反映されない
不合格レベルです。
Firefoxの使用をお勧めします。
角は丸くなるが
影は付かない
作者の意図が半分しか反映されない
残念レベルです。
Firefoxの使用をお勧めします。
角丸影付き作者の意図が完全に反映される
合格レベルです。

Firefoxのインストールはとても簡単です。ここにアクセスして下さい。もちろん無料ですし、メールアドレスの登録など一切必要ありません。Webブラウザはいくつでもインストールすることができます。Firefoxをインストールしたからといって、他のブラウザが使えなくなるわけではありませんし、同時にいくつものブラウザを開くこともできます。ブラウザによる機能の比較をしてみるのも面白いですよ。

Firefoxにはいろいろなアドオンを追加してより便利に使うことができます。僕が使っているのは以下の物です。

Download Helperとても便利です。これが無いと泣きます。
Adblock PlusYouTubeのCMをカットしてくれます。
DownThemAll!たまに使います。
Html Validatorhtmlソースの正当性チェックができます。見るだけなら必要ありません。

このページのソースを見ればわかることですが、当該のクラスを紹介します。

.waku2 {/* 文章などに枠を掛ける時用・隙間を空ける・角丸影付き */

border: 1px solid dimgray;

padding:4px;

margin-left: 4em;

margin-top:4px;

margin-bottom:8px;

border-radius: 8px;

box-shadow: 4px 4px 4px rgba(0,0,0,0,4);

}

使うときには <div class="waku2"> とか <p class="waku2"> と書けばいいのです。


最後に、このページの制作時点でのFirefoxの画面を以下に載せておきます。

2013年3月26日 記