丸い枠線 |
〆 おしゃれな丸い枠線を設定します
1.まず三種類の枠線を作成します。
下図のような丸い枠をを作ります。 Fireworks などで作ります。



2.次に作成した丸い枠をスライスツールで横に三分割します。
Fireworks, Illustrator などのスライスツールで分割します。
top001.gif
middle001.gif

bottom001.gif

3.最後に作った上部(top)と下部(bottom)の画像をhtmlファイルに設定し、
真ん中(middle)の画像をcssファイルへ設定します。
@sample.css
.boxpink { margin: 0px 0px 0px 2px; background: url("middle001.gif) repeat-y; width: 520px; } .boxcontents { padding: 0px 10px; } .column-img{ display: block; } @sample.html <pre class="code01"> <div class="boxpink"> <img src="top001.gif" alt=""" class="column-img" /> <p class="boxcontents"> 更新履歴 2006.11.10 追加 </p> <img src="bottom001.gif" alt="" class="column-img" /> </div> |
4.仕上がりはこんなの
|
丸い枠線 の素材 |
〆 おしゃれな丸い枠線ですが素材を綺麗に作るのが偉く大変なのでこれを使ってください。
1.白背景で5種類作りました。
ここからまとめて ダウンロード
165px



280px



450px



520px



560px



リキッドレイアウト用の丸い枠線 の素材 |
〆 前のやり方だとサイズ固定ですが、リキッドレイアウトには、上中下の3分割より
9分割の方が使いやすいです。
1.白背景の例です
ここから枠画像をまとめて
白枠をダウンロード
ピンク枠をダウンロード
2.仕上がりはこんなの
|
3.HTMLとCSSへのこのように記述します。
@sample.css
table.round{
border-collapse: collapse;
display: block;
}
.round_td1,.round_td2,.round_td3,.round_td4,.round_td6{ height: 7px; }
.round_td7,.round_td8,.round_td9{ height: 10px; }
.round_td4,.round_td5,.round_td6{ height: 100px; }
.round_td1,.round_td4,.round_td7{ width: 10px; }
.round_td3,.round_td6,.round_td9{ width: 12px; }
.round_td2,.round_td5,.round_td8{ /* width:300px; ここにサイズを入れてもよいです*/}
td.round_td1{ background:url('box_white_round_01.png') repeat-y; }
td.round_td2{ background:url('box_white_round_02.png') repeat-x; }
td.round_td3{ background:url('box_white_round_03.png') repeat-y; }
td.round_td4{ background:url('box_white_round_04.png') repeat-y; }
td.round_td5{ background-color:#ffffff; }
td.round_td6{ background:url('box_white_round_06.png') repeat-y; }
td.round_td7{ background:url('box_white_round_07.png') repeat-y; }
td.round_td8{ background:url('box_white_round_08.png') repeat-x; }
td.round_td9{ background:url('box_white_round_09.png') repeat-y; }
@sample.html
<table class="round">
<tr><td class="round_td1"></td>
<td class="round_td2" style="width:300px"></td>
<td class="round_td3"></td></tr>
<tr><td class="round_td4"></td>
<td class="round_td5"><p>中身を記述します</p></td>
<td class="round_td6"></td></tr>
<tr><td class="round_td7"></td>
<td class="round_td8"></td>
<td class="round_td9"></td></tr>
</table>
|