広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。
カテゴリー： スタイルシート

CSSで作る楽天のＲで目立たせよう！

だからどうした？と言われると困るんですが、楽天の

をスタイルシートだけで作ってみました。

<style type="text/css">
.rakuten{
 padding:0.1em 0.15em 0.2em 0.15em;
 width:1em;
 height:1em;
 line-height:1em;
 text-align:center;
 color:#ffffff;
 background:#bd0000;
 font-weight:bold;
 font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
 border-radius:1.3em;
 -webkit-border-radius:1.3em;
 -moz-border-radius:1.3em;
} </style>

block要素でないと左右の余白がおかしくなります。

inline要素で使用

<p><span class="rakuten">R</span>&nbsp;<a href="">楽天</a></p>

表示結果

 楽天

block要素で使用

<p class="rakuten" style="float:left;margin-right:0.5em;">R</p>
<p><a href="">楽天</a></p>
<br style="clear:left;" />

表示結果

楽天


楽天で探す

楽天で探す

表示がおかしいなどのご指摘はコメントいただけると助かります。

新ブログ「Big Bang」で続きを読む →