にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

蛍光ペンでマーキングした表示効果を作るCSS [テキスト,]

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

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

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

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

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

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

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

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

このように、目立つ強調を作るスタイルになります。
上記ではstrong要素を使いましたが、他の要素に対してももちろん適用可能です。

目的が「強調」であれば、HTMLの要素にはstrong要素を使うのが良いでしょう。ニュアンスやアクセントを示す「強勢」が目的ならem要素を使うのも良いでしょう。まあ、(さしたる意味もないデザインだけの目的などなら)span要素でも良いとは思いますが。

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

font-weight: normal;

なお、em要素を使うとたいていは「斜体」で表示されますから、斜体を解除したい場合には、以下のスタイルを加えます。

font-style: normal;

というわけで、蛍光ペンでマーキングしたような表示効果を出すスタイルシートの書き方でした。ぜひ活用してみて下さい。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---