自動作成
顔アイコン(32×32)
各種素材
各種ドット絵素材
その他
枠（旧table)素材
1 11
いろいろ
透過処理（画像部分）はしてないです。
<div class="normal001">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal001{
box-sizing:border-box;
position:relative;
margin:0 20px 0 20px;
padding:20px 0;
background-image:url(n001_02.png),url(n001_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
background-color:white;
}
div.normal001::before{
content:"";
position:absolute;
width:calc(100% + 40px);
height:20px;
left:-20px;
top:0px;
background-image:url(n001_01.png),url(n001_03.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
}
div.normal001 .waku_content{
background-color:transparent;
background-image:url(n001_04.png),url(n001_05.png),url(n001_09.png);
background-repeat:repeat-y,repeat-y,repeat;
background-position:left,right;
margin:0 -20px;
}
div.normal001 .waku_content::before{
content:"";
position:absolute;
width:calc(100% + 40px);
height:20px;
left:-20px;
bottom:0;
background-image:url(n001_06.png),url(n001_08.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
div.normal001 .waku_content2{
box-sizing:normal;
padding:10px 30px;
min-height:100px;
}
ダウンロードしました。
内容
<div class="normal002">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal002{
box-sizing:border-box;
position:relative;
margin:20px 9px 0 9px;
padding:9px 0;
background-image:
url(n002_02.png),url(n002_02.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
}
div.normal002::before{
content:"";
position:absolute;
width:100%;
height:25px;
left:-9px;
top:-16px;
background-image:url(n002_01.png),url(n002_07.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,top center;
}
div.normal002::after{
content:"";
position:absolute;
width:9px;
height:9px;
right:-9px;
top:0;
background-image:url(n002_03.png);
}
div.normal002 .waku_content{
background-image:
url(n002_04.png),url(n002_04.png);
background-repeat:repeat-y,repeat-y,no-repeat;
background-position:left,right,top;
margin:0 -9px;
padding:0 9px;
}
div.normal002 .waku_content::before{
content:"";
position:absolute;
width:calc(100% + 18px);
height:9px;
left:-9px;
bottom:0;
background-image:url(n002_05.png),url(n002_06.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
div.normal002 .waku_content2{
box-sizing:border-box;
padding:10px;
background-color:#888;
color:white;
min-height:100px;
}
ダウンロードしました。
内容
<div class="normal003">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal003{
box-sizing:border-box;
position:relative;
margin:115px 40px 25px;
background-color:#88642f;
}
div.normal003::before{
content:"";
position:absolute;
top:-115px; left:0px;
width:100%;
height:calc(100% + 140px);
background-image:
url(n003_02.png),url(n003_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom 0px left 0;
}
div.normal003::after{
content:"";
top:-115px; left:-34px;
position:absolute;
width:calc(100% + 68px);
height:calc(100% + 140px);
background-image:url(n003_01.png),url(n003_03.png),
url(n003_05.png),url(n003_07.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left ,bottom right;
}
div.normal003 .waku_content{
background-image:
url(n003_04.png),url(n003_04.png);
background-repeat:repeat-y,repeat-y,no-repeat;
background-position:left,right;
}
div.normal003 .waku_content2{
box-sizing:border-box;
color:white;
padding:30px 30px 100px;
min-height:200px;
}
ダウンロードしました。
別カラーも付属
<div class="normal004">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal004{
position:relative;
padding:14px;
}
div.normal004::before{
content:"";
position:absolute;
width:30px;
height:26px;
left:calc(50% - 15px);
top:0px;
background:url(n004_02.png);
}
div.normal004 .waku_content{
background:url(n004_01.png);
padding:14px;
border:solid 1px black;
border-radius:10px;
}
div.normal004 .waku_content2{
background-color:white;
padding:10px;
border:solid 1px black;
border-radius:10px;
min-height:100px;
}
ダウンロードしました。
new。
<div class="normal005">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal005{
background-image:
url(n005_02.png),url(n005_03.png),url(n005_05.png),url(n005_06.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top center,bottom center,top 50% left 20px,top 50% right 20px;
padding:30px 46px;
}
div.normal005 .waku_content{
position:relative;
background-image:
url(n005_01.png),url(n005_01.png),url(n005_04.png),url(n005_04.png);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat,no-repeat,no-repeat;
background-position:top left,bottom left,top left,top right;
padding:16px 18px;
}
div.normal005 .waku_content::before{
content:"";
width:calc(100% + 90px);
height:42px;
position:absolute;
top:-15px; left:-45px;
background:
url(n005_07.png),url(n005_08.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
}
div.normal005 .waku_content::after{
content:"";
width:calc(100% + 90px);
height:42px;
position:absolute;
bottom:-15px; left:-45px;
background:
url(n005_09.png),url(n005_10.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
}
div.normal005 .waku_content2{
box-sizing:border-box;
min-height:100px;
padding:10px;
background-color:white;
}
ダウンロードしました。
内容
<div class="normal006">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal006{
position:relative;
background-color:white;
padding:30px 40px;
background-clip:content-box;
}
div.normal006::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n006_01.png),url(n006_03.png),
url(n006_06.png),url(n006_08.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal006::after{
content:"";
position:absolute;
top:0px;
left:63px;
display:block;
width:calc(100% - 126px);
height:100%;
background-image:url(n006_02.png),url(n006_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,right bottom;
}
div.normal006 .waku_content{
display:block;
position:relative;
top:21px;
left:-40px;
margin-bottom:42px;
width:calc(100% + 80px);
background-image:url(n006_04.png),url(n006_05.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal006 .waku_content2{
box-sizing:border-box;
padding:10px 70px;
min-height:155px;
}
ダウンロードしました。
切れ目が目立つので目立たせない場合は、サイズ固定などで解決できます。
<div class="normal007">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal007{
position:relative;
background-color:#efe2bb;
padding:30px 20px;
background-clip:content-box;
}
div.normal007::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n007_01.gif),url(n007_03.gif),
url(n007_06.png),url(n007_08.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal007::after{
content:"";
position:absolute;
top:0px;
left:99px;
display:block;
width:calc(100% - 187px);
height:100%;
background-image:url(n007_02.png),url(n007_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.normal007 .waku_content{
box-sizing:border-box;
display:block;
position:relative;
top:32px;
left:-20px;
width:calc(100% + 40px);
margin-bottom:66px;
background-image:url(n007_04.png),url(n007_05.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal007 .waku_content2{
box-sizing:border-box;
padding:20px 80px;
min-height:228px;
}
ダウンロードしました。
シンプルにするか迷ったが動いてるのでこちらに。
<div class="normal008">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal008{
box-sizing:border-box;
position:relative;
padding:24px 16px 2px 16px;
background-color:white;
background-clip:content-box;
background-image:url(n008_09.png);
background-repeat:repeat-x;
background-position:bottom left;
}
div.normal008::before{
content:"";
position:absolute;
top:14px; left:17px;
display:block;
width:calc(100% - 34px);
height:calc(100% - 14px);
background-image:url(n008_02.gif),url(n008_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.normal008::after{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n008_01.gif),url(n008_03.gif),
url(n008_05.png),url(n008_07.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal008 .waku_content{
box-sizing:border-box;
display:block;
position:relative;
top:0;
left:-12px;
padding:0 12px 0 12px;
width:calc(100% + 24px);
margin-bottom:10px;
background-image:url(n008_04.png),url(n008_04.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal008 .waku_content2{
box-sizing:border-box;
margin:0 1px;
border-top:solid 1px black;
min-height:150px;
padding:10px;
background-image:url(n008_08.png);
background-repeat:repeat-x;
background-position:top left;
}
ダウンロードしました。
よく見ると動いてます。
<div class="normal009">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal009{
box-sizing:border-box;
position:relative;
padding:31px 33px 30px 33px;
color:white;
background-color:#006633;
background-clip:content-box;
}
div.normal009::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n009_01.gif),url(n009_03.gif),
url(n009_06.gif),url(n009_08.gif);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal009::after{
content:"";
position:absolute;
top:0px;
left:43px;
display:block;
width:calc(100% - 86px);
height:100%;
background-image:url(n009_02.gif),url(n009_07.gif);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.normal009 .waku_content{
box-sizing:border-box;
display:block;
position:relative;
top:10px;
left:-33px;
width:calc(100% + 66px);
margin-bottom:20px;
background-image:url(n009_04.gif),url(n009_05.gif);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal009 .waku_content2{
box-sizing:border-box;
min-height:150px;
padding:0px 45px;
}
ダウンロードしました。
内容
<div class="normal010">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal010{
box-sizing:border-box;
position:relative;
background-color:white;
padding:26px 15px 25px;
background-clip:content-box;
background-image:url(n010_06.png),url(n010_06.png),
url(n010_07.png),url(n010_07.png);
background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top 26px left 0px,bottom 25px left 0px,top 0px left 15px,top 0px right 15px;
}
div.normal010::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n010_01.png),url(n010_01.png),url(n010_02.png),url(n010_03.png),
url(n010_04.png),url(n010_05.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 0px left 20%,top 0px right 20%,top 15px left 2px,top 15px right 2px,bottom 15px left 2px,bottom 15px right 2px;
}
div.normal010 .waku_content2{
box-sizing:border-box;
min-height:150px;
padding:30px;
}
ダウンロードしました。
1 11
