<< スキン編集 デバッグ講座:タグ... ブログダイエット:テーブル表示... >>
 

★飛び出す付箋紙

はじめに

どこでも貼れる飛び出す付箋です。
ブログにも付箋紙をペタっと貼ってみたい。
そんなちょっとした遊び感覚で作ってみました。
良かったら、以下のリンクをクリックして試して下さいね。
a0031863_9412668.gif


難易度:★☆
(位置の調整が難しいけど、簡単にできるから頑張ってね)

ちょっとしたポイントのところに貼ると効果的かもしれませんね。
ぽっとの陽だまり研究室






HTML編集

付箋紙を貼りたい場所の下の方に以下のHTMLタグを追加します。投稿欄などに入れると効果的ではないでしょうか。
位置調整は基準位置から上にずらす量をtopで、左にずらすのをleftで指定しています。
少し試して感覚を掴んで頂けると分かると思います。

HTML編集



<div class="baseline">
<p class="sticky" style="top:-20em;left:400px;">←付箋の内容をここに記入</p>
</div>




style="top:-20em;left:400px;" のところに、style="top:-20em;left:400px;width:250px;"と指定すると、付箋の幅が250pxに変更できます。
また、ボーダの色を変えるなどいろいろと自分オリジナルの付箋ができますよ。
 

CSS編集

CSS編集部分に以下のコードを張り付けておきます。

CSS編集




/*基準位置*/
.baseline{  position:absolute;}

/*付箋紙 potto*/
.sticky{
    width:150px;
    margin: 0;
    padding:0;
    position:absolute;

    border-top:1px #eeeeee solid;
    border-right:12px #FF66FF solid;
    border-bottom:1px #aaaaaa solid;
    border-left:1px #eeeeee solid ;

    background-color:#ffffff;

    font-size:10pt;
    line-height:1.4em;
    color:#000000;
}






←基準位置


←右側のボーダを太くして付箋のようにしています。





難易度:★☆


今日のポイント
  • position:absoluteで基準位置を指定し、その位置からのずれをtopとleftで指定しています。この方法はレイアウトなどの指定によく利用されます。

  • 付箋のバックグランドのイメージを指定するともっと多様な付箋が作れます。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-08-27 09:42 | │├付箋紙
<< スキン編集 デバッグ講座:タグ... ブログダイエット:テーブル表示... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。