TOP 
Web
丸い枠線 |
〆 おしゃれな丸い枠線を設定します
１．まず三種類の枠線を作成します。
下図のような丸い枠をを作ります。 Fireworks などで作ります。
２．次に作成した丸い枠をスライスツールで横に三分割します。
Fireworks, Illustrator などのスライスツールで分割します。
top001.gifmiddle001.gif
bottom001.gif
３．最後に作った上部(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> |
４．仕上がりはこんなの
|
Maru Waku
丸い枠線 の素材 |
〆 おしゃれな丸い枠線ですが素材を綺麗に作るのが偉く大変なのでこれを使ってください。
１．白背景で５種類作りました。
ここからまとめて ダウンロード
165px
280px
450px
520px
560px
リキッドレイアウト用の丸い枠線 の素材 |
〆 前のやり方だとサイズ固定ですが、リキッドレイアウトには、上中下の3分割より
9分割の方が使いやすいです。
１．白背景の例です
ここから枠画像をまとめて
白枠をダウンロード
ピンク枠をダウンロード
２．仕上がりはこんなの
|
３．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>
|
The link to this site is free. /
Last Updated : 28.May.2012