WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

2012/08/27

CSS3で角丸を表現したい!

投稿者: qam
カテゴリー: マークアップ >CSS

今日は、ちょっと使う機会が増えてきたCSS3についてです。

やっぱり、角丸ってついつい使いたくなるのですが、
なんせコーディングがめんどくさい!(笑)

CSS3だと簡単に表現できるのに、IEがなかなか対応してくれない。。
そこで便利なのが、「border-radius.htc」です。

とって言っても、そんなの知ってるよ~って方が多そうですが・・・;

使い方は簡単です!

まずは、こちらからファイルをダウンロードして・・・
角丸にしたいdivのCSSの1行加えるだけ!

こんな感じです↓↓

-moz-border-radius   : 4px;
-webkit-border-radius : 4px;
border-radius : 4px;
behavior : url(border-radius.htc);

これは、IEの独自拡張子プロパティのbehaviorを使って実装しているそうです。

今回は角丸ですが、他にも影をつけたりできるhtcファイルもあったり・・・。
探してみるともっと便利なものがあるかも?

また何か見つけたら、記事にしたいと思います。
みなさんも探してみてくださいね~。

追記:
紹介したhtcですが、どうやら印刷には対応していないようです。
印刷について配慮しながらの実装がよいかもしれません・・・。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ