mikanママのタグをつかって

便箋風ひな形応用

お元気ですか～～～ ☆
便箋風応用NO.1

background-imageで画像をいれて

background-Attachment:fixedで固定しています

。

このタグは下にあります

。

。

素材提供十五夜様
タグNO.1
NO1 <CENTER style="width:600px;height:300px;border-width:3px;border-color:#000000 ;border-style:double;"><center style="width:600px;height:300px;border-style:dotted;border-color:#a67e4e;border-width:10px;margin:1px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1 StartColorStr=#ffffbe21 EndColorStr=#99a67e4e) "><center style="width:600px;height:300px;border-style:dotted;border-color:#a67e4e;border-width:3px;margin:1px"> <marquee behavior="alternate" width="350">お元気ですか～～～</marquee><center style="width:450px;height:300px;border-style:double;border-color:#a67e4e;border-width:1px;margin:20px;background-color:#000000;background-image:url(http://www.画像jpg); background-repeat:no-repeat;background-Attachment:fixed ;overflow-y:scroll;scrollbar-face-color:#000000;scrollbar-track-color:#000000;scrollbar-arrow-color:#a67e4e;scrollbar-highlight-color:#000000;scrollbar-shadow-color:#a67e4e;scrollbar-3dlight-color:#a67e4e;scrollbar-darkshadow-color:#000000;line-height:1"> 便箋風応用NO.1<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;"> background-imageで画像をいれて<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;"> background-Attachment:fixedで固定しています<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字.<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">このタグは下にあります<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#a67e4e; width: 100%;" >文字。 </center></center></center></center></center>

お元気ですか～～～
便箋風応用NO.2

タグに色分けしている部分に注目してね

。

background-repeat:no-repeat; background-position:center

画像を真ん中に固定

グラデーションは背景とは逆にしてあります

。

。

素材提供十五夜様
タグNO.2
NO2 <CENTER style="width:600px;height:400px;border-width:3px;border-color:#00a0dd;border-style:double;"><center style="width:600px;height:400px;border-style:dotted;border-color:#00a0dd;border-width:10px;margin:1px;filter:progid:DXImageTransform.Microsoft.Gradient( gradientType=1 StartColorStr=#33ffffff EndColorStr=#9900a0dd) "><center style="width:600px;height:400px;border-style:dotted;border-color:#00a0dd;border-width:3px;margin:1px"> <marquee behavior="alternate" width="350">お元気ですか～～～</marquee><center style="width:450px;height:300px;border-style:double;border-color:#00a0dd;border-width:1px;margin:20px;background-color:#ffffff;background-image:url(http://www.画像.gif);background-repeat:no-repeat; background-position:center ;background-Attachment:fixed;filter:progid:DXImageTransform.Microsoft.Gradient( gradientType=1 StartColorStr=#3300a0dd EndColorStr=#66ffffff );overflow-y:scroll;scrollbar-face-color:#ffffff;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#00a0dd;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#00a0dd;scrollbar-3dlight-color:#00a0dd;scrollbar-darkshadow-color:#ffffff;line-height:1"> 便箋風応用NO.2<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;"> タグに色分けしている部分に注目してね <HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。 <HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >画像を真ん中に固定<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;"> グラデーションは背景とは逆にしてあります<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;"> 文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1px;border-color:#00a0dd; width: 100%;" >文字。<HR style="border-style: dashed; height:1;border-color:#00a0dd; width: 100%;" >文字。 </center></center></center></center></center>

便箋風応用NO3

。

マーキーを重ねてみました

。

background-repeat:no-repeat; background-position:bottom rightで

画像を右下に固定です

。

☆

素材提供十五夜様タグNO.3
NO.3 <CENTER style="width:600px;height:400px;border-width:3px;border-color:#ff4500;border-style:double;background-image:url(http://www.画像.jpg);background-repeat:no-repeat; background-position:bottom right;background-Attachment:fixed ;background-color:#ffffff;"><center style="width:600px;height:400px;border-style:dotted;border-color:#55331c;border-width:10px;margin:1px;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#99ff4500 EndColorStr=#33ffffff);"><center style="width:600px;height:400px;border-style:dotted;border-color:#55331c;border-width:3px;margin:1px;z-index:2;"><marquee><marquee behavior="alternate" direction="up" ><marquee behavior="alternate" direction="left" ><img src="http://www.画像.gif"></marquee><marquee behavior="alternate" direction="left" width="350"><img src="http://www.画像.gif"></marquee></marquee ></marquee><div style=" position:relative; top:-160px; right:0px "><center style="width:450px;height:300px;margin:10px;z-index:0;filter:progid:DXImageTransform.Microsoft.Gradient( gradientType=0 StartColorStr=#33ffffff EndColorStr=#33ffffff );overflow-y:scroll;scrollbar-face-color:#ffffff;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#55331c;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#55331c;scrollbar-3dlight-color:#55331c;scrollbar-darkshadow-color:#ffffff;line-height:1"> 便箋風応用NO3 <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1;border-color:#55331c; width: 100%;">マーキーを重ねてみました<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。 <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">画像を右下に固定です <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。 <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。 <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。 <HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;">文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;"> 文字。<HR style="border-style: dashed; height:1px;border-color:#55331c; width: 100%;"> ☆ </center></div></center></center></center>

ジャンル別一覧