2012/05/11更新

[HTML] HTML要素を丸っと表現するCSS

今日はCSS3のborder-radiusを学び、丸っとしたHTML要素を作成することが出来ました。その内容をブログに残したいと思います。

CSS3のborder-radiusとは

border-radiusは、DIVなどの枠の角を丸くする事の出来る技術要素です。こんな感じで指定すると、丸っとしたDIVが表示されます。

http://www.yoheim.net/labo/html5/borderRadius.html

<style>
  .border-radius {
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    /*色指定などは省略*/
}
</style>
<div class="border-radius">border-radius sample #1</div>

border-radiusに角の丸くするための、半径を指定する事で、丸っとします。現在は、ベンダープレフィックス(-webkit-, -moz-, など)が必要ですが、将来的には不要になるかと思います。

CSS3を使う理由

上記のような丸っとした表現は、今迄も透過PNGなどを利用して実現可能でした。同じ要件をCSS3で行う上でのメリットは2点あるように思います。

1つ目は、CSSを利用する事で通信量が削減出来、その結果ユーザーの待機時間が短くなる可能性がある事です。特にスマートフォンで3G回線のような弱い通信状況の場合には、大切な事かもしれません。

2つ目は、様々な画面の大きさに適応しやすい点です。画像だと大きな画面ではぼけてしまい、そのための対策をCSSで記載するなど大変ですが、CSS3では、簡単に奇麗に表現する事も可能です。

でもデメリットもあります。例えばCSS3に対応していないブラウザには、期待した表現が出来ないとか。

どんな人に見てもらいたいかで、CSS3を使うかを考えてもいいですね。なお、スマートフォン向けならCSS3を積極的に使っても良さそうな感じがします♪(´ε｀ )

border-radiusの活用例

border-radiusを使うことで、タブレイアウトで雰囲気の緩やかな画面をCSSのみで表現出来ます。例えばこんな感じ。

http://www.yoheim.net/labo/html5/borderRadius.html

角の一部を丸っとさせるような表現も可能です。

最後に

CSS3は他にもアニメーションやグラデーションなど楽しい技術要素がいっぱいです。もっと学んで行きたいなぁ♪(´ε｀ )