文字の上に強調を表す丸印を付ける機会がありました。
次のような仕上がりですね。
最初は画像にしようと考えていたのですが、文字にして欲しいとの要望だったので文字にする方法を考えました。
色々と考えた中で、一番簡単な方法をご紹介しようと思います。
勿体つけましたが、rubyタグを使えば簡単に実現できました。
サンプルも作っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p> このサイトは <ruby> ク<rt>●</rt> ル<rt>●</rt> ー<rt>●</rt> デ<rt>●</rt> ザ<rt>●</rt> イ<rt>●</rt> ン<rt>●</rt> </ruby> です。 </p> |
文字にルビとして丸を付けていくイメージです。
簡単ですね！
文字化けの防止に丸は特殊文字の「●」をきっちり作っておけばOKですね。
後はデザインの通りにCSSで装飾してあげるだけです。
サンプルも見てくださいね。
