角丸ボックスを作る

HTML CSS

角丸ボックスを作ってみましょう(。・ω・。)ﾉ
CSS3で簡単に作れるみたいですが、画像を用いて作ってみます。

まずは角丸部分が欲しいので、グラフィックスソフト（自分はFireworksを使いました）で角丸長方形を描いて、スライス機能を使って4箇所、角丸をスライスし、スライスを書き出して保存します。
色や大きさや名前などは任意で。

メモ帳を開いて、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>角丸ボックスを作る</title>
</head>
<body>
<div id="roundtable">
　　　　<div class="topcorner">
　　　　　　　　<img src="hidariue.gif" alt="" width="13" height="13" class="corner" />
　　　　</div>
　　　　<p>こんな感じに角丸ボックスが出来上がります！</p>
　　　　<div class="bottomcorner">
　　　　　　　　<img src="hidarisita.gif" alt="" width="13" height="13" class="corner" />
　　　　</div>
</div>
</body>
</html>
名前を付けて保存をします。名前は「index.html」にします。
新規作成をして、ファイルをもう一つ作ります。
下記の通りに入力して、名前を付けて保存をします。名前は「style.css」にします。

@charset "UTF-8";

p{
　　　　color:#ffffff;
　　　　margin:0px 10px;
}

/* 全体のレイアウトの設定 */
#roundtable{
　　　　width:500px;
　　　　background:#999999;
　　　　padding:0px;
　　　　margin:0px;
}

/* 角のスタイル設定 */
.topcorner{
　　　　background:#999999 url(migiue.gif) no-repeat top right;
}
.bottomcorner{
　　　　background:#999999 url(migisita.gif) no-repeat top right;
}
.corner{
　　　　width:15px;
　　　　height:15px;
　　　　border:none;
　　　　display:block;
}

これで幅500pxの角丸ボックスが出来ます！
角丸の周りがちょっと変だと感じたら、最初からやり直してみると良いかもしれません。