TOP
««
«
9
10
11
12
13
»
»»
11/23

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

テープで繋がったようなデザインの囲み枠、飾り枠

frame11-a

htmlとcssは共通
画像は使用するものを保存してください

▼html/css/img▼

html

<div class="box11">
<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

.box11 {
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80%
}
.u01 {
background:url(f-ue.gif) repeat-x;
height:45px;
margin:0 50px
}
.s01 {
background:url(f-sita.gif) repeat-x;
height:13px;
margin:0 50px
}
.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:45px
}
.box-center {
background-image:url(f-migi.gif), url(f-hidari.gif) , url(f-naka.gif);
background-position:top right, top left, top center;
background-repeat:repeat-y, repeat-y ,repeat;
padding:0 20px
}
.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:13px
}

image

× close

frame11-b

frame11-c

frame11-a (2段以上)

▼html/css/img▼

html

<div class="box11">
<div class="box-top">
<div class="u01"></div>
</div>

<div class="box-center">
ここに文字
</div>

<div class="box-tunagi">
<div class="t01"></div>
</div>

<div class="box-center">
ここに文字
</div>

<div class="box-bottom">
<div class="s01"></div>
</div>
</div>

css

.box11 {
margin:1em 0; /* 中央寄せは0をautoに変更 */
width:80%
}
.u01 {
background:url(f-ue.gif) repeat-x;
height:45px;
margin:0 50px
}
.s01 {
background:url(f-sita.gif) repeat-x;
height:13px;
margin:0 50px
}
.t01 {
background:url(f-tunagi-naka.gif) repeat-x;
height:48px;
margin:0 50px
}
.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:45px
}
.box-center {
background-image:url(f-migi.gif), url(f-hidari.gif) , url(f-naka.gif);
background-position:top right, top left, top center;
background-repeat:repeat-y, repeat-y ,repeat;
padding:0 20px
}
.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:13px
}
.box-tunagi {
background-image:url(f-tunagi-migi.gif), url(f-tunagi-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
height:48px
}

image