角の丸い枠を作成する CSS編

ある一定のまとまった内容を枠で囲んでいるホームページを見かけます。 その中でも 角 が 丸 くなったものを見かけます。どうやって実現しているのでしょう？

ここでは、CSSを使って考えて見ます。 まず、もっとも単純な方法で実現します。これは、CSSのボックスモデルと「角の丸い枠を作成する Table編」の 応用になります。

ここでは、まとまった内容をメニューのようなイメージで考え、見出しとリストで構成されたHTMLを作成します。

<div class="menu">
<h2 class="menu_title">header</h2>
<ul>
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>

この方法は、枠をヘッダー、本体、フッターの3つに分解して考えます。 上記HTMLでヘッダーの役割を果たすのが h2 要素になり、フッターの役割を果たすのが div 要素になります。

borderを付けてイメージを確認します。

この各ボックスに対してヘッダーに枠の上部の画像を指定し、フッターに枠の下部の画像を指定します。 本体部分は、background-colorを使用して枠と同様の色を指定します。

ul要素に background-color を指定しているため外枠の div (menu) が表示されなくなります。 これを避けるため、div (menu)　に padding-bottom を指定しています。

.menu {
    width : 200px;
    padding-bottom: 20px;
    background-image: url(img/custom_corners1f.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
}
.menu_title {
    font-size : medium;
    margin : 0;
    padding : 0px 0px 0px 10px;
    background-image: url(img/custom_corners1h.png);
    background-repeat: no-repeat;
}
ul {
    margin : 0;
    padding : 10px 0px 10px 0px;
    background-color: #FFCC99;
}
li {
    list-style-type : none;
    list-style-position : inside;
}