TOP
««
«
14
15
16
17
18
»
»»
16/23

フリー素材｜囲み枠、飾り枠-16

苺の囲み枠、飾り枠

frame16-a

▼html/css/img▼

html

<div class="box16">
<div class="box-top">
<div class="u01"></div>
</div>
<div class="box-center">
ここに文字
</div>
<div class="box-bottom">
<div class="s01"></div>
</div>
</div>

css

.box16{
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80% /* 幅 */
}
.u01{
background:url(f-ue.gif) repeat-x;
height:35px;
margin:0 19px
}
.s01{
background:url(f-sita.gif) repeat-x;
height:35px;
margin:0 19px
}
.box-top{
background-image:url(f-kado1.gif), url(f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:35px
}
.box-center{
background-image:url(f-migi.gif), url(f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
padding:10px 29px
}
.box-bottom{
background-image:url(f-kado3.gif), url(f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:35px
}

image

× close

frame16-b

frame16-b～dまでhtmlとcssは共通
画像は使用するものを保存してください

▼html/css/img▼

html

<div class="box16">
<div class="box-top">
<div class="u01"></div>
</div>
<div class="box-center">
ここに文字
</div>
<div class="box-bottom">
<div class="s01"></div>
</div>
</div>

css

.box16{
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80% /* 幅 */
}
.u01{
background:url(f-ue.gif) repeat-x;
height:37px;
margin:0 21px
}
.s01{
background:url(f-sita.gif) repeat-x;
height:37px;
margin:0 21px
}
.box-top{
background-image:url(f-kado1.gif), url(f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:37px
}
.box-center{
background-image:url(f-migi.gif), url(f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
padding:10px 31px
}
.box-bottom{
background-image:url(f-kado3.gif), url(f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:37px
}

image

【frame16-b】

【frame16-c】

【frame16-d】

× close

frame16-c

frame16-d

frame16-e

frame16-e、fhtmlとcssは共通
画像は使用するものを保存してください

▼html/css/img▼

html

<div class="box16">
<div class="box-top">
<div class="u01"></div>
</div>
<div class="box-center">
<div class="box-inner">
ここに文字
</div>
</div>
<div class="box-bottom">
<div class="s01"></div>
</div>
</div>

css

.box16{
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80% /* 幅 */
}
.u01{
background:url(f-ue.gif) repeat-x;
height:37px;
margin:0 21px
}
.s01{
background:url(f-sita.gif) repeat-x;
height:37px;
margin:0 21px
}
.box-top{
background-image:url(f-kado1.gif), url(f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:37px
}
.box-center{
background-image:url(f-migi.gif), url(f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
padding:0 21px
}
.box-inner{
background:#fff;
padding:10px
}
.box-bottom{
background-image:url(f-kado3.gif), url(f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:37px
}

image

【frame16-e】