丸角：3パーツ構成で丸角メニュー

ここでは3パーツでの構成でメニュー部分のタイトルなどに使う丸角を作ります。3パーツでの構成なので横幅を可変（%指定）タイプにしてもデザインがくずれないのが特徴です。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
今回は3パーツ作りますが左右の丸角の部分は左右反転するだけで使えるので新規ファイルは２つになります。

左右に使う丸角の場合：ここでの大きさは目安にしてください。
幅：6px　高さ：20px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

全体の背景部分：ここでの大きさは目安にしてください。
幅：1px　高さ：20px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

6×20ピクセルの丸角の画像を作る

図1→ 図2→ 図3→ 図4
上が一連の作成の流れとなります。
（図1）まず塗りつぶしツールを使いいったんすべてを薄い青で塗りつぶします。

（図2）そして6×6ピクセルでの丸角を作る要領で鉛筆ツールを使い白で塗りつぶしていきます。ここでは背景色を白と過程しています。

（図3）そして薄い青の部分の周り1ピクセルを濃い青で塗りつぶします。これが外枠になります。

（図4）最後に外枠と中枠の間の1ピクセルを白で塗りつぶします。こうすることでちょっぴり立体感なり凝った感じなりさせます。
ついでに左右反対にさせ左右両方の丸角を作成しておきます。

これで丸角部分は完成となります。

1×20ピクセルの背景画像を作る

上の画像のように鉛筆ツールで1ピクセルずつ塗りつぶしていきます。
一番上の1ピクセルが外枠となり薄い青の部分が背景色となります。それぞれ丸角部分の外枠中枠などと関連します。色も丸角と同じ色を使う必要があります。
これだけで完成となります。

CSSで3パーツを配置する

3パーツを配置するために3要素を作ります。
class="main"が全体を囲みます。その中にclass="sample"とp要素を入れています。

htmlです。

<div class="main"><div class="sample"><p>丸角</p></div></div>

cssです。

.main{
width:30%;
height:20px;
font-size:12px;
background:url("1×20pxの背景色のパス") repeat-x;
}

.main p{
margin:0;
padding:2px 0 0 0;
text-align:center;
background:url("左の丸角のパス") no-repeat top left;
}

.main .sample{
background:url("右の丸角のパス") no-repeat top right;
}

結果

解説

1×20ピクセルの画像はrepeat-xを使い横に繰り返し表示させます。
そしてそれぞれの丸角を左右に配置すれば横幅可変に対応したメニューのタイトル部分などに使える丸角メニューの完成です。

高さは20pxとなっていますが文字の大きさなどによって変更する必要があります。

幅を固定するならひとつの画像でもいいのですが幅を可変タイプにする場合は3パーツ必要なのが特徴です。

▲トップ