CSS3で角丸をつくりました。 もちろんIEも対応。 | WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

Web・PC・アプリや日常のことを書いてます。
いまだにWEBビギナーな私が、ここまでできました!をお届する「ここでき!ブログ」


テーマ:
ついに、というかやっとCSS3を使ったサイトを作成しました。

先日、リニューアル中のサイトの中で、枠の角を丸くしてくれないか?とクライアントより依頼され、本アップの日も近いので、どうしようかと。
通常、枠の角丸を表現するには、画像で角丸を作成CSSで背景に設定するというのが定番です。
しかし、CSS3では「border-radius」というプロパティを使えば簡単に角丸が表現できます。
さらに、ドロップシャドウや背景のグラデーションなど、今まで画像でしかできなかった表現がCSSで簡単にできるなんて、便利な世の中になったもんだ。

しかし、ブラウザの化石、IE(インターネットエクスプローラー)がCSS3に対応していないもんだから困った。
次期IE9はCSS3にやっと対応しているようだが、IE6みたいに何年も呪縛に苦しめられるのだろう。

しかし、ネットで調べるとそんなIEでもCSS3が使えるようです。

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」にあるように「PIE.htc」を使えば簡単にIEでもCSS3が使える優れものだそうです。、「PIE.htc」のダウンロードはこちらから


方法はいたって簡単。

まず、角丸にするクラス(またはID)に
border-radius: 10px;←数値はお好みで。

さらにFirefox用
-moz-border-radius: 10px;

そして、Safari,Chrome用
-webkit-border-radius: 10px;

これで、モダンブラウザは角丸になります。
あ、Operaは9だと反応しなかったのですが、10にアップグレードしたら表示されたので、良しとしました。

で、ここからがIE用です。

上記の「PIE.htc」をダウンロードして解凍したファイルをhtmlファイルに入れます。
私はフォルダ名を「ie_css3」して「css」フォルダと同階層に設置しました。

 html/┬css/base.css
    ├ie_css3/PIE.htc

おそらく、CSSフォルダにPIE.htcを入れても使用できると思います。

上記のスタイルシートの最後に
behavior: url(../ie_css3/PIE.htc); ←パスはPIE.htcの設置場所にあわせてください。

これだけ。
簡単だな~。と思ってローカルでプレビューするも反応なし、仕方がないので、一度アップしてみるときちんと角丸になっていてちょっと感激!

$WEB初心者奮闘記「ここまでできました!」


参考までにスタイルシートはこんな感じ。
.box {
border: 1px solid #CC3366;
border-radius: 10px; /* CSS3 */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
behavior: url(../ie_css3/PIE.htc); /* IE */
}


これまで、実験的にローカルでしか使用していなかったCSS3ですが、これを機会に実践投入の機会が増えそうです。

「ここでき!」


※2012/10/13 修正
 ・フォントサイズを大きくしました。
 ・強調色を赤からオレンジに変更しました。

ひでじさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス