クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

HTML

HTML 文字の上に丸印を付けるサンプル

投稿日:2018年1月15日 更新日:

文字の上に強調を表す丸印を付ける機会がありました。
次のような仕上がりですね。

最初は画像にしようと考えていたのですが、文字にして欲しいとの要望だったので文字にする方法を考えました。
色々と考えた中で、一番簡単な方法をご紹介しようと思います。

勿体つけましたが、rubyタグを使えば簡単に実現できました。
サンプルも作っています。

文字にルビとして丸を付けていくイメージです。
簡単ですね!
文字化けの防止に丸は特殊文字の「●」をきっちり作っておけばOKですね。
後はデザインの通りにCSSで装飾してあげるだけです。

サンプルも見てくださいね。

-HTML

執筆者:

関連記事

HTML テキストボックスの入力候補リスト(datalist)

JavaScriptやjQueryを利用しなくてもHTML5だけで動的なことも出来るようになってきました。 例としてHTML5のdatalistタグを利用すれば、関連付けされているテキストボックスに「 …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …


comment

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