自動作成
顔アイコン(32×32)
各種素材
各種ドット絵素材
その他
枠（旧table)素材
1
コミカル
内容
<div class="comical001">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical001{
background-color:white;
position:relative;
margin:41px 41px 0;
padding:16px 0 18px;
background-image:url(c001_02.png),url(c001_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top,bottom;
}
div.comical001::before{
content:"";
position:absolute;
left:-41px;
top:-35px;
display:block;
width:calc(100% + 82px);
height:51px;
background-image:url(c001_01.png),url(c001_03.png),url(c001_09.png);
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:top left,top right,top center;
}
div.comical001::after{
content:"";
position:absolute;
left:-41px;
bottom:0;
display:block;
width:calc(100% + 82px);
height:28px;
background-image:url(c001_06.png),url(c001_08.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
div.comical001 .waku_content{
box-sizing:border-box;
position:relative;
width:calc(100% + 82px);
left:-41px;
background-image:url(c001_04.png),url(c001_05.png);
background-repeat:repeat-y,repeat-y;
background-position:left,right;
padding:0 41px;
}
div.comical001 .waku_content2{
box-sizing:border-box;
width:100%;
min-height:150px;
padding:10px;
}
ダウンロードしました。
内容
<div class="comical002">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical002{
position:relative;
background-color:white;
margin:58px 32px 0;
padding:30px 0px 33px;
background-image:url(c002_03.png),url(c002_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom;
}
div.comical002::before{
content:"";
position:absolute;
left:-32px;
top:-58px;
display:block;
width:calc(100% + 64px);
height:88px;
background-image:url(c002_01.png),url(c002_04.png),url(c002_02.png);
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:bottom left,bottom right,bottom center;
}
div.comical002::after{
content:"";
position:absolute;
left:-32px;
bottom:0;
display:block;
width:calc(100% + 64px);
height:33px;
background-image:url(c002_06.png),url(c002_08.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
div.comical002 .waku_content{
box-sizing:border-box;
position:relative;
min-height:150px;
left:-16px;
width:calc(100% + 32px);
background-image:url(c002_05.png),url(c002_05.png);
background-repeat:repeat-y,repeat-y;
background-position:top -1px left 0px,top -1px right 0px;
padding:10px 41px;
}
ダウンロードしました。
背景色は指定してないです。
<div class="comical003">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical003{
box-sizing:border-box;
margin:0;
padding:50px 0 0;
background-image:url(c003_01.png),url(c003_02.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top 50px right 0px;
}
div.comical003 .waku_content{
box-sizing:border-box;
min-height:300px;
padding:85px 75px;
background-image:url(c003_03.png),url(c003_04.png);
background-repeat:no-repeat,no-repeat;
background-position:bottom left,bottom right;
}
ダウンロードしました。
ＧＩＦアニメが多いため、ＧＩＦにしています。
<div class="comical004">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical004{
position:relative;
margin:50px 50px 35px;
}
div.comical004::before{
content:"";
box-sizing:border-box;
position:absolute;
display:block;
left:-50px;
width:calc(100% + 100px);
height:100%;
background-image:url(c004_04.gif),url(c004_05.gif);
background-repeat:repeat-y,repeat-y;
backgrond-color:red;
background-position:top 10px left -5px,top 10px right -5px;
}
div.comical004::after{
content:"";
position:absolute;
z-indenx:1;
top:-40px;
display:block;
width:100%;
height:calc(100% + 70px);
background-image:url(c004_02.gif),url(c004_07.gif);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.comical004 .waku_content{
content:"";
display:block;
width:100%;
height:100%;
}
div.comical004 .waku_content::before{
content:"";
width:calc(100% + 110px);
height:calc(100% + 70px);
position:absolute;
z-index:2;
left:-55px;
top:-40px;
background-image:url(c004_01.gif),url(c004_03.gif),url(c004_06.gif),url(c004_08.gif);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.comical004 .waku_content2{
box-sizing:border-box;
position:relative;
left:-4px;
width:calc(100% + 8px);
background-color:white;
min-height:200px;
padding:30px;
}
ダウンロードしました。
内容
<div class="comical005">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical005{
position:relative;
padding-top:30px;
}
div.comical005::before{
content:"";
position:absolute;
left:0; top:0;
width:100%;
height:100%;
background-image:url(c005_01.png),url(c005_02.png),url(c005_02.png);
background-repeat:no-repeat;
background-position:top center,top 60% left 30px,top 60% right 30px;
}
div.comical005 .waku_content{
box-sizing:border-box;
border-radius:40px;
border:solid 5px white;
padding:10px;
background-color:#aaeeee;
}
div.comical005 .waku_content2{
box-sizing:border-box;
min-height:200px;
border-radius:40px;
padding:60px 15px 10px;
background-color:white;
}
ダウンロードしました。
内容
<div class="comical006">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical006{
position:relative;
padding-top:100px;
padding-bottom:6px;
}
div.comical006::before{
content:"";
box-sizing:border-box;
width:100%;
height:calc(100% + 6px);
top:0;
left:0;
z-index:2;
position:absolute;
background-image:url(c006_01.png),url(c006_03.png),url(c006_04.png);
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:top 95px left 0,top 95px right 0,top center;
}
div.comical006::after{
content:"";
z-index:1;
position:absolute;
width:calc(100% - 40px);
height:calc(100% - 190px);
top:95px;
left:20px;
background-image:url(c006_02.png);
background-repeat:repeat-x;
background-postion:top left;
}
div.comical006 .waku_content{
margin:29px 5px 0;
background-color:white;
background-image:url(c006_06.png),url(c006_05.png);
background-repeat:no-repeat,repeat-x;
background-position:bottom center,bottom left;
border:solid 1px black;
}
div.comical006 .waku_content::before{
content:"";
box-sizing:border-box;
width:calc(100% - 20px);
height:100%;
top:0;
left:10px;
position:absolute;
background-image:url(c006_07.png),url(c006_09.png),url(c006_08.png);
background-repeat:no-repeat,no-repeat,repeat-x;
background-position:bottom left,bottom right,bottom left;
}
div.comical006 .waku_content2{
box-sizing:border-box;
padding:10px 10px 140px;
min-height:200px;
}
ダウンロードしました。
内容
<div class="comical007">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical007{
box-sizing:border-box;
position:relative;
padding:100px 32px 20px;
background-color:white;
background-clip:content-box;
}
div.comical007::before{
content:"";
box-sizing:border-box;
position:absolute;
width:calc(100% - 228px);
height:100%;
left:114px;
top:0;
background-image:url(c007_07.png),url(c007_08.png);
background-repeat:repeat-x,repeat-x;
background-position:top 80px left 0,bottom 6px left 0;
}
div.comical007::after{
content:"";
box-sizing:border-box;
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-image:url(c007_01.png),url(c007_02.png),
url(c007_03.png),url(c007_04.png),url(c007_09.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,top center;
}
div.comical007 .waku_content{
position:relative;
width:calc(100% + 64px);
left:-32px;
background-image:url(c007_05.png),url(c007_06.png);
background-repeat:repeat-y,repeat-y;
background-position:bottom left,bottom right;
}
div.comical007 .waku_content2{
box-sizing:border-box;
padding:40px 65px;
min-height:200px;
}
ダウンロードしました。
内容
<div class="comical008">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.comical008{
box-sizing:border-box;
position:relative;
padding:210px 32px 80px;
}
div.comical008::before{
content:"";
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-image:url(c008_01.png),url(c008_02.png);
background-repeat:no-repeat,no-repeat;
background-position:top center,bottom center;
}
div.comical008 .waku_content2{
min-height:350px;
padding:20px;
background-color:white;
border:solid 1px #aaa;
border-radius:20px;
}
ダウンロードしました。
1
