自動作成
顔アイコン(32×32)
各種素材
各種ドット絵素材
その他
枠（旧table)素材
1 11
シンプル
内容
<div class="simple001">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple001{
padding:10px;
position:relative;
}
div.simple001::before{
content:"";
box-sizing:border-box;
position:absolute;
top:0; left:0;
width:100%;
height:100%;
background-image:url(s001_01.png),url(s001_02.png),
url(s001_03.png),url(s001_04.png),
url(s001_05.png),url(s001_06.png),
url(s001_07.png),url(s001_08.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top left,top right,left bottom,right bottom,top,bottom,left,right;
}
div.simple001 .waku_content2{
box-sizing:border-box;
background-color:white;
min-height:150px;
padding:10px;
}
ダウンロードしました。
内側の透過処理対応はしてないです。
<div class="simple002">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple002{
background-image:
url(s002_01.png),url(s002_02.png),
url(s002_03.png),url(s002_04.png),
url(s002_05.png),url(s002_06.png),
url(s002_07.png),url(s002_08.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
background-position:top left,top right,left bottom,right bottom,top,bottom,left,right;
padding:4px;
border-radius:6px;
}
div.simple002 .waku_content2{
box-sizing:border-box;
background-image:url(s002_09.png);
padding:10px;
min-height:100px;
}
ダウンロードしました。
画像は未使用です。
<div class="simple003">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple003{
box-sizing:border-box;
position:relative;
background-color:#d1c9af;
border-radius:40px 0;
padding:4px 4px;
}
div.simple003::before{
content:"＋";
color:#d1c9af;
position:absolute;
left:15px; top:15px;
}
div.simple003::after{
content:"＋";
color:#d1c9af;
position:absolute;
right:15px; bottom:10px
}
div.simple003 .waku_content{
box-sizing:border-box;
background-color:#ede9dd;
border-radius:40px 0;
border:solid 2px white;
min-height:100px;
padding:20px;
}
画像は使用していません。
ダウンロードしました。
内容
<div class="simple004">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple004{
position:relative;
margin:0px 17px;
padding:17px 0 17px 0;
background-image:
url(s004_05.png),url(s004_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top 3px left 0,bottom 3px right 0;
}
div.simple004::before{
content:"";
box-sizing:border-box;
position:absolute;
width:calc(100% + 34px);
height:100%;
left:-17px;
top:0;
background-image:url(s004_01.png),url(s004_02.png),
url(s004_03.png),url(s004_04.png);
background-repeat:no-repeat,no-repeat;
background-position:top 3px left 3px,top 3px right 3px,bottom 3px left 3px,bottom 3px right 3px;
}
div.simple004 .waku_content{
background-image:
url(s004_07.png),url(s004_08.png);
background-color:transparent;
background-repeat:repeat-y,repeat-y;
background-position:left 3px top 0px,right 3px bottom 0px;
margin:0 -17px;
padding:0px 17px;
}
div.simple004 .waku_content2{
box-sizing:border-box;
padding:8px;
background-color:white;
min-height:100px;
}
ダウンロードしました。
画像は１つだけです。
<div class="simple005">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple005{
padding:15px;
position:relative;
}
div.simple005::before{
content:"";
box-sizing:border-box;
display:block;
width:100%;
height:31px;
position:absolute;
top:0px;
left:0px;
background-image:
url(s005_01.png),url(s005_01.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
}
div.simple005::after{
display:block;
box-sizing:border-box;
content:"";
width:100%;
height:31px;
position:absolute;
bottom:3px;
right:0;
background-image:
url(s005_01.png),url(s005_01.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
}
div.simple005 .waku_content{
border:solid 2px black;
background-color:#b3d0f8;
padding:6px;
}
div.simple005 .waku_content2{
box-sizing:border-box;
min-height:100px;
padding:10px;
background-color:white;
}
ダウンロードしました。
内容
<div class="simple006">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple006{
position:relative;
background-image:
url(s006_01.png),url(s006_02.png),
url(s006_03.png),url(s006_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 5px left 5px,top 5px right 5px,left 5px bottom 5px,right 5px bottom 5px;
padding:15px;
}
div.simple006::before{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:5px; left:17px;
width:calc(100% - 34px);
height:calc(100% - 10px);
background-image:url(s006_05.png),url(s006_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.simple006::after{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:20px; left:0;
width:100%;
height:calc(100% - 40px);;
background-image:url(s006_07.png),url(s006_08.png);
background-repeat:repeat-y,repeat-y;
background-position:top 0 left 5px,top 0 right 5px;
}
div.simple006 .waku_content{
box-sizing:border-box;
background-color:white;
padding:10px;
min-height:100px;
}
ダウンロードしました。
内容
<div class="simple007">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple007{
position:relative;
background-image:
url(s007_01.png),url(s007_03.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right;
padding:16px 16px 0;
}
div.simple007::before{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:0; left:16px;
width:calc(100% - 32px);
height:100%;
background-image:url(s007_02.png);
background-repeat:repeat-x;
background-position:top left;
border-bottom:solid 1px black;
}
div.simple007::after{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:16px; left:10px;
width:calc(100% - 20px);
height:calc(100% - 16px);
background-image:url(s007_04.png),url(s007_04.png);
background-repeat:repeat-y,repeat-y;
background-position:left,right;
border-bottom:solid 1px black;
}
div.simple007 .waku_content{
background-color:white;
padding:10px;
min-height:100px;
box-sizing:border-box;
}
ダウンロードしました。
内容
<div class="simple008">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple008{
position:relative;
background-image:
url(s008_01.png),url(s008_03.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,bottom left;
padding:16px 0 16px;
}
div.simple008::before{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:16px; left:0;
height:calc(100% - 32px);
width:100%;
background-image:url(s008_02.png);
background-repeat:repeat-y;
background-position:top left;
border-right:solid 1px black;
}
div.simple008::after{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:10px; left:16px;
height:calc(100% - 20px);
width:calc(100% - 16px);
background-image:url(s008_04.png),url(s008_04.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
border-right:solid 1px black;
}
div.simple008 .waku_content{
box-sizing:border-box;
background-color:white;
padding:10px 10px 10px 25px;
min-height:100px;
}
ダウンロードしました。
複雑な形状だったので、内側の透過処理対応（画像部分）はしてないです。
<div class="simple009">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple009{
position:relative;
background-image:
url(s009_01.png),url(s009_03.png),
url(s009_06.png),url(s009_08.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,left bottom,right bottom;
padding:13px 21px;
}
div.simple009::before{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:0; left:21px;
width:calc(100% - 42px);
height:100%;
background-image:url(s009_02.png),url(s009_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.simple009::after{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
top:21px; left:0;
width:100%;
height:calc(100% - 42px);
background-image:url(s009_04.png),url(s009_05.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.simple009 .waku_content{
box-sizing:border-box;
background-color:white;
padding:10px 5px;
min-height:100px;
}
ダウンロードしました。
複雑な形状だったので、内側の透過処理対応（画像部分）はしてないです。
<div class="simple010">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple010{
position:relative;
background-image:
url(s010_01.png),url(s010_02.png),
url(s010_03.png),url(s010_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,left bottom,right bottom;
padding:16px;
}
div.simple010::before{
box-sizing:border-box;
content:"";
position:absolute;
display:block;
top:0; left:17px;
width:calc(100% - 34px);
height:100%;
background-image:url(s010_05.png),url(s010_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.simple010::after{
box-sizing:border-box;
content:"";
position:absolute;
top:17px; left:0;
width:100%;
height:calc(100% - 34px);
background-image:url(s010_07.png),url(s010_08.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.simple010 .waku_content{
background-color:#ccb98f;
padding:10px 5px;
min-height:100px;
box-sizing:border-box;
}
ダウンロードしました。
1 11
