CSSで作る楽天のRで目立たせよう!

スポンサーリンク


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

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

<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,’MS Pゴシック’,’ヒラギノ角ゴ 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;” />

表示結果

楽天


楽天で探す

楽天で探す

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


関連コンテンツ

スポンサーリンク

「CSSで作る楽天のRで目立たせよう!」への2件のフィードバック

  1. CSSだけで、赤マルと白抜きフォントを作るっていうのは
    デザインの勉強として面白いと思うんだけど、
    企業ロゴっていうのは、サイズとか色とか、細かな規定が決まっていて、
    提供されたものを指定通りに使わなきゃいけないことになっているのね。

    楽天にもロゴルールっていうのがあります。これ、把握してる?
    http://corp.rakuten.co.jp/brand/rules/logo/

    F&Qにも、”ロゴは、加工・修正せずそのまま使用するようにしてください”とあります。
    http://corp.rakuten.co.jp/brand/faq/

    似たような色、デザインでそれらしく自作したものを
    企業広告に添えるのは、まずいんじゃないかな?と私は考えてます。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください