《2007/4/22 日曜日 16:28:32 公開》
蛍光ペン効果を作る [テキスト, 色]
強調時の装飾が太字だけ…というのはちょっと寂しいので、蛍光ペンのようなマーカーを使って紙に線を引いたような効果を出してみると、目立つ強調になって良いかも知れません。まあ、あまり使いすぎるとうるさく感じてしまうのですが。(^_^;)
蛍光ペン効果を出すには、次のように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へのコメントはお気軽に! [コメントはまだありません。]
| « リンクを装飾するhover疑似クラスは記述順が重要 |
前後のCSS TIPS < 旧 / 新 > | 字下げ(インデント)する » |
このCSS TIPSへのトラックバックURLは以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。
コメントはまだありません。