Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

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

| 2件のコメント

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

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

<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;” />

表示結果

楽天


楽天で探す

楽天で探す

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

2件のコメント

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

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

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

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

  2. 文中利用の禁止っていうのもありますよ~。
    http://corp.rakuten.co.jp/brand/rules/logo/usage_in_text.html

コメントを残す

Top