border-radius とハートブレイク・カフェ(それと旧ブラウザ対応)

Article
06/28/2011

前々々回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店「ハートブイレク・カフェ」のページを作成しております。

そのページで使用している HTML5 や CSS3 といったイマドキの (表現は 80’ 年代風ですが) Web 技術について紹介しております。

今回は border-radius についてです。

border-radius とは?

border-radius は描画されるボックスの角を丸める、いわゆる角丸 (かどまる) を実現するための機能で、CSS3 でサポートされました。

border-radius の要素は、ボックスの四隅を一度に指定する border-radius と、個別に指定するための border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-top-left-radius がありなかなか使い勝手が良いものです。

(border-radius の指定して角を丸くした h1 要素)

/*フード、ドリンクメニューのバー*/
.menu-title
{
    font-family: 'Lobster', Tahoma, Arial, Helvetica, sans-serif;
    font-size: 30px;
    background-color: #461c0e;
    color:White;
    text-align : center;
    cursor:pointer;

    /*角丸の指定*/
    border-top-left-radius: 10em;
    border-bottom-right-radius: 5em;
    border-bottom-left-radius: 2em;
}

(実際の StyleSheet の指定)

HTML5、CSS3 がぼちぼち話題になり始め、仕様もあまり明確でなかった少し前までは、border-radius を使用するには、各 Web ブラウザーの拡張機能を使用する必要があり、以下のような記述をしていましたが、

Firefox： -moz- border-radius

Safari、Google Chrome： -webkit- border-radius

( かつて使用されていたブラウザーごとの border-radius の指定 )

現在は、メジャーな Web ブラウザーであれば、共通した border-radius の記述で同じく角丸を実現することができます。

なので、もし、他人の書いたスタイルシートで、border-radius の前に、 -moz や –webkit の記述を見つけたら古 (いにしえ) の記述方法を使用しているか、バージョンが少し前のブラウザーを考慮している (※) のだな、と思っていただければと思います。

※両 Web ブラウザーの頻繁なバージョンアップを見るや、あまりそうゆうことはないのかも知れませんが。。

旧ブラウザーへの対応

HTML5 や CSS3 の新機能はすばらしく、その登場は喜ばしいものでありますが、残念な点が 1 つだけあります。

それは Internet Explorer 6 のような古い Web ブラウザーでは動作しないということです。

では、古い Web ブラウザーに対して、HTML5 や CSS3 で行うような機能の実装は無理かというと、それは必ずしも真ではありません。

古い Web ブラウザーには、当時の HTML、JavaScript の機能不足を補うための、独自の (勝手な、ともいう) 機能拡張がされていることが多く、それを使用して同様の機能を実装することが可能である場合があります。

さらに、そういった旧ブラウザーの持っている、やんちゃな独自機能を裏側に秘匿し、あたかも HTML5 や CSS3 が動作しているがごとく振る舞わせる、なんとも頓智の利いたライブラリーがいくつかのコミュニティから提供されています。

たとえば、以下は CSS3 PIE (https://css3pie.com/) を使用して border-radius を指定し、Expression Web 4 の Super-Preview の機能を使用して、IE9 と IE6 のレンダリングを比較した例です。

/* CSS3 PIE の使用 */
.oval
{
    /*旧ブラウザー対応 PIE.htc の読み込み*/
    behavior: url(css/PIE.htc);
    /*角丸指定*/
    border-radius:10px;
    border-style: solid;
    border-color: Green;
    padding: 20px;
    width: 150px;
    text-align: center;
    background-color: #99FF33;
}

( CSS3 PIE を使用したスタイルの指定 )

(Super-Preview を使用して IE9(左) と IE6(右) の描画を並べて表示したところ )

( Super-Preview を使用してIE9 と IE6 の描画を重ねて表示したところ )

描画結果を重ねてみると、微妙にズレはあるものの、ボックスの四隅が丸くなっていることが確認できます。

CSS3 PIE は、render-radius の他にも、box-shadow や linear-gradient の機能も提供します。

CSS3 PIE の使用は非常に簡単で、ダウンロードしたファイル PIE.htc を仮想ディレクトリに配置し、behavior: url でファイルまでのパスを指定するだけです。

ただし、現在はまだ Bata 段階らしく、以下のような上下左右個別の border-radius 指定は、IE6 では、意図したような描画にならないようです。

/* CSS3 PIE の使用 */
.leaf
{
    /*旧ブラウザー対応 PIE.htc の読み込み*/
    behavior: url(css/PIE.htc);
    /*左上と右下の角丸を個別に指定*/
    border-top-left-radius: 1em;
    border-bottom-right-radius: 1em;
    border-style: solid;
    border-color: Green;
    padding: 20px;
    width: 150px;
    text-align: center;
    background-color: #99FF33;
}

( 右上と左下に個別に border-radius を指定 )

( Super-Preview を使用してIE9 と IE6 の描画を比較。IE6 の描画では角が丸まっていない )

旧ブラウザの HTML5 対応

これから HTML5 のタグを記述していくうえで、いろいろと問題になってくるのが HTML5 タグを認識しない古い Web ブラウザへの対応です。

HTML5 で記述された Web コンテンツは、IE8 などの古い Web ブラウザーでは無視されてしまい表示されません。

では、こういった古い Web ブラウザーに対しては、HTML5 タグを使用できないかというと、必ずしもそうではありません。

具体的にどうするのか……っていうのは、なんか記事を別けたほうがよさそうなので、次回の記事に書きますね。

備考 :

なんと、偶然にも同日「MSDN 10 行でスバリ!!」でも border-radius のネタが公開されましたので、こちらも合わせてご覧くださいまし。

10行でズバリ!! [HTML5 と IE9] CSS3 を利用する (1) Border-radius
https://code.msdn.microsoft.com/InternetExplorer-10line-df33ce10

Clicky

border-radius とハートブレイク・カフェ(それと旧ブラウザ対応)

Additional resources