"CSS Tips Factory" : Presented by Nishishi via WordPress.

蛍光ペン効果を作る [テキスト, ]

強調時の装飾が太字だけ…というのはちょっと寂しいので、蛍光ペンのようなマーカーを使って紙に線を引いたような効果を出してみると、目立つ強調になって良いかも知れません。まあ、あまり使いすぎるとうるさく感じてしまうのですが。(^_^;)

蛍光ペン効果を出すには、次のようにHTMLとスタイルシートを書くだけです。

<strong style="background-color: yellow;">ここが強調箇所</strong>

見ての通り、背景色に明るい色を使っているだけです。上記の場合は黄色(yellow)。これで、なんとなく蛍光ペンっぽく見えます。

多少、文字の高さよりも太い方がマーキングっぽく見えるので、paddingプロパティ(内側の余白)を使って、ちょっと太めにしておくと良いでしょう。

<strong style="background-color: yellow; padding:0.2em 0px;">ここが強調箇所</strong>

上記の場合は、上下に0.2文字分の空間を確保しています。
実際に表示させてみると、以下のような感じ。

例えば、黄色の蛍光ペンでマーキングするとこんな感じ。背景色を変えれば、緑色(ライム色)とかも可能です。

まあ、こんな感じで。目立つ強調を作る定番スタイルと言えるでしょうねー。私は個人的にあまり使ってないのだけど。(^_^;;;

「強調」なので、HTML(XHTML)の要素には、strongまたはem要素を使うのが良いでしょう。まあ、span要素でも良いのですが。で、strong要素を使うと、たいていの場合は「太字」になってしまいます。そのままでも構わないのですが、太字を解除したい場合は、以下のスタイルを加えればOKです。

font-weight: normal;

em要素を使うと、たいてい「斜体」で表示されますから、斜体を解除したい場合は…

font-style: normal;

とします。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。