カツキの小遣い稼ぎブログ2

楽天買い回りシミュレーターの計算結果が

買い物通常ポイント1000

といった感じでくっついて表示されて見にくかったのを改善しました。
ファンブログにはCSSを編集するページが用意されているのですが
そこを編集してもうまいこといかず
結局htmlの中に直書きしてしまいました。
（レスポンスとかに影響があるのでしょうか？）

初めに試したのはoutputに対してpaddingを付けるというものです。
こんな感じ。

[CSS]

output#normalpoint {
　padding:10em;
}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
[HTML]

買い物通常ポイント<output id="normalpoint"></output></br>

これはoutputの前の文字列から指定した文字数分（10文字分）空白を開けるというものですが
前の文字列がプロポーショナルフォント（文字によって幅が異なる）の為
文字列の内容によって微妙にずれてしまいました。
その為別の方法を探した所
inline-blockというものを使うと良いということが分かりました。

[CSS]

span {
　display: inline-block;
　width: 16em;
}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
[HTML]

<span>買い物通常ポイント</span><output id="normalpoint"></output></br>

これはspanタグで囲ったテキストを1つのブロックとして
幅を指定できるみたいです。
（正確には違うかもしれませんが）

これでOKと思いスマホ版のHTMLにも反映させたところ
どうもspanタグが記事の「NEW」マークでも使われているみたいで
「NEW」マークの幅も広くなってしまいました。


これはいかんということで
シミュレーターの方のspanタグにIDを付けて正常な表示になりました。

[CSS]

span#PAD {
　display: inline-block;
　width: 16em;
}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
[HTML]

<span id="PAD">買い物通常ポイント</span><output id="normalpoint"></output></br>

スマホ版は左寄せにして完成。
ようやくそれっぽくなりました。



良かったら使ってみてください。



昨日はプロ野球の楽天イーグルスとJリーグのヴィッセル神戸W勝利ということで
本日ポイント3倍（＋2%）やってますね。
下記バナーでは2倍となっていますがリンク先では3倍になっています。
本日限定なので今日楽天市場で買い物する予定のある方は忘れずに
エントリーしましょう。