ひなこの楽天web制作研究所

ちょっと最近、更新滞ってました。

今まで、やってきたspanタグの枠の設定、背景色の設定を使ってちょっとしたお遊びです。

ボタンのふり

こんな風に作ってみるとボタンのふりができます。

楽天ではフォームタグが使えないので、ボタンを設置できないのですが、普通のリンクに、こういう枠と背景色をつけると、ちょっとボタンっぽくておもしろくないですか？

もっとも、WindowsXPの人やMacの人はformタグのボタン表示がこのCSSとは異なると思うので、それっぽくするのはまたいずれ。

で、これを利用して、ボタンっぽくリンクを張った例としてはこんなのがあります。

web拍手とかいうのを作ってみました。ご存じじゃない方のために、ちょっと説明すると。掲示板などで発言するのがちょっと敷居が高いな～という場合に、でもこのページ気に入ったよ！という意思表示のために、クリックすると拍手音がするというプログラムです。で、そのページで簡単なメッセージを送れるというものです。


とりあえずためにに押してみる？

そんな妖しいモンじゃないので。

普通のリンクだと面白くないなってときに、使うのも面白いかなとか。

で、肝心のこのソースです。

<a href="URL" target="_blank"
style="text-decoration:none;color:black;">
&kt;span style="border-top: 1px solid #F6F6F6;border-bottom: 1px solid #919191;border-left: 1px solid #B3B3B3;border-right: 1px solid #B3B3B3;margin: 5px;padding: 2px 20px;background: #DCDCDC;font-size:12px;">ボタンのラベル</span></a>


じつはこっそり登場した新しい記述

text-decoration:none;

がありまして、これは本来aタグ（リンクを表す）の装飾（下線）を消す（none）表示なんですが、たぶん楽天で設定しているCSSのほうが優先になっているのか、ききません。無効です。あら。


今日はこの辺で～。