自動作成
顔アイコン(32×32)
各種素材
各種ドット絵素材
その他
枠（旧table)素材
1 11
いろいろ
内容
<div class="normal011">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal011{
box-sizing:border-box;
position:relative;
padding:18px;
background-color:white;
background-clip:content-box;
}
div.normal011::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n011_01.png),url(n011_02.png),
url(n011_03.png),url(n011_04.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal011::after{
content:"";
position:absolute;
top:5px;
left:25px;
width:calc(100% - 50px);
height:calc(100% - 10px);
background-image:url(n011_05.png),url(n011_05.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.normal011 .waku_content{
box-sizing:border-box;
position:relative;
display:block;
top:7px;
left:-13px;
width:calc(100% + 26px);
margin-bottom:14px;
background-image:url(n011_06.png),url(n011_06.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal011 .waku_content2{
box-sizing:border-box;
min-height:150px;
padding:0px 20px;
}
ダウンロードしました。
内容
<div class="normal012">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal012{
position:relative;
padding-top:153px;
background-image:url(n012_01.png),url(n012_03.png);
background-repeat:no-repeat,no-repeat;
background-position:top 23px left 0,top 0 right 1px;
}
div.normal012::before{
content:"";
position:absolute;
top:0px;
left:99px;
width:calc(100% - 214px);
height:calc(100% - 10px);
background-image:url(n012_02.png);
background-repeat:repeat-x;
background-position:top 104px left 0;
}
div.normal012 .waku_content2{
box-sizing:border-box;
width:calc(100% - 17px);
min-height:100px;
padding:10px;
border:solid 1px black; border-top:none;
background-color:white;
background-image:url(n012_04.png);
background-repeat:repeat-x;
background-position:bottom left;
}
ダウンロードしました。
内容
<div class="normal013">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal013{
box-sizing:border-box;
position:relative;
padding:58px;
background-color:#99ccff;
background-image:url(n013_01.png),url(n013_01.png),url(n013_01.png),url(n013_01.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top 4px left 4px,top 4px right 4px,bottom 4px left 4px,bottom 4px right 4px;
}
div.normal013 .waku_content::before{
content:"";
position:absolute;
top:0;
left:45px;
display:block;
width:calc(100% - 90px);
height:100%;
background-image:url(n013_03.png),url(n013_02.png),url(n013_02.png);
background-repeat:no-repeat,repeat-x,repeat-x;
background-position:bottom center,top,bottom;
}
div.normal013 .waku_content::after{
content:"";
position:absolute;
top:45px;
left:0;
display:block;
width:100%;
height:calc(100% - 90px);
background-image:url(n013_02.png),url(n013_02.png);
background-repeat:repeat-y,repeat-y;
background-position:left,right;
}
div.normal013 .waku_content2{
min-height:150px;
}
ダウンロードしました。
右上付近と右下付近切れ目が場合によっては目立つので、その縦横幅を避けるかその他の方法で対処できます。
<div class="normal014">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.normal014{
position:relative;
background-color:#f1f2b7;
padding:115px 20px;
background-clip:content-box;
}
div.normal014::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(n014_01.png),url(n014_03.png),
url(n014_06.png),url(n014_08.png);
background-repeat:no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.normal014::after{
content:"";
position:absolute;
top:0px;
left:137px;
display:block;
width:calc(100% - 274px);
height:100%;
background-image:url(n014_02.png),url(n014_07.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.normal014 .waku_content{
box-sizing:border-box;
display:block;
position:relative;
top:20px;
left:-20px;
width:calc(100% + 40px);
margin-bottom:40px;
background-image:url(n014_04.png),url(n014_05.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.normal014 .waku_content2{
box-sizing:border-box;
padding:0px 140px;
min-height:210px;
}
ダウンロードしました。
1 11
