CSS3で丸角の四角を作る

 皆さんこんにちは、KUJIRAです。ホームページを作っていると、見栄えを気にしすぎてついつい時間を忘れてしまいます。

 特に四角いボックスを作るときなんかは、角が丸くなっている方がかっこいいので、ムキになって画像作りに励んでしまいます。しかし、これがまた時間が掛かる。最初は仕方がないのでやっていたのですが、絵を描くのが苦手な人間です根本的に無理があります。(笑)

 次に使っていたのがJavaScriptだったんですけど、これもなかなか最初の導入時に敷居が高かったりして手が出ない。

 それで色々探した結果、最終的にCSSでやる事にしました。「・・・えっCSSでできるの?」と思う人も居るかもしれませんが、時代と言うのは刻々と進んでいるもので、気づいたらCSS3が結構完成されつつあるみたいです。ブラウザでも導入しているものも多いみたいですよ。

 そこでこれから確実に主流になっていくであろう、CSS3をつかって丸角の四角を作る方法を記述します。以下に例を書きます。

example.css

/*border-radius.html*/
.example1-1{
 width:300px;
 height:300px;
 border:3px solid #FF00FF;
 background-color:#FFAAFF;
 border-radius:5px 20px 40px 60px / 15px 20px 140px 30px;
 -moz-border-radius:5px 20px 40px 60px / 15px 20px 140px 30px; /*Firefox対応させる場合*/
 -webkit-border-radius:5px 20px 40px 60px / 15px 20px 140px 30px; /*Safari対応させる場合*/
}

border-radius.html

<html>
 <head>
  <link rel=”stylesheet” href=”../css/example.css” type=”text/css”>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  <title>border-radius</title>
 </head>
 <body>
  <div class=”example1-1″>
  </div>
 </body>
</html>

 実行結果はこちら

 どうですか?ブラウザによっては表示されないものもあるかもしれませんが、新しいものであれば比較的に対応していると思います。

 ポイントはこれです。
  → border-radius:5px 20px 40px 60px / 15px 20px 140px 30px;

 これはボーダーの角を丸くする際の円の半径の値を設定しています。「/」で区切られている所から左が水平方向の半径、右が垂直方向の半径となります。

 これを適用すれば誰でも簡単に丸角の四角が作れますね。CSS3をもっと勉強しないといけないと思ったKUJIRAでした。

コメント