スポンサーリンク
だからどうした？と言われると困るんですが、楽天の
Ｒ
をスタイルシートだけで作ってみました。
←このＲです。
<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>
.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要素でないと左右の余白がおかしくなります。
block要素で使用
<p class=”rakuten” style=”float:left;margin-right:0.5em;”>R</p>
<p><a href=””>楽天</a></p>
<br style=”clear:left;” />
表示結果
R
|
R |
R |
表示がおかしいなどのご指摘はコメントいただけると助かります。
関連コンテンツ
スポンサーリンク
CSSだけで、赤マルと白抜きフォントを作るっていうのは
デザインの勉強として面白いと思うんだけど、
企業ロゴっていうのは、サイズとか色とか、細かな規定が決まっていて、
提供されたものを指定通りに使わなきゃいけないことになっているのね。
楽天にもロゴルールっていうのがあります。これ、把握してる？
http://corp.rakuten.co.jp/brand/rules/logo/
F&Qにも、”ロゴは、加工・修正せずそのまま使用するようにしてください”とあります。
http://corp.rakuten.co.jp/brand/faq/
似たような色、デザインでそれらしく自作したものを
企業広告に添えるのは、まずいんじゃないかな？と私は考えてます。
文中利用の禁止っていうのもありますよ～。
http://corp.rakuten.co.jp/brand/rules/logo/usage_in_text.html