《 12:17 公開/更新》
強調時の装飾が太字だけ……というのはちょっと寂しいので、蛍光ペンのようなマーカーを使って紙に線を引いたような「マーキング効果」を出してみると、目立つ強調になって良いかも知れません。使いすぎるとうるさく感じてしまうでしょうけども。(^_^;)
蛍光ペン効果(マーキング表示効果)を出すには、次のように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;
というわけで、蛍光ペンでマーキングしたような表示効果を出すスタイルシートの書き方でした。ぜひ活用してみて下さい。
()
(前の記事) « リンクを装飾するhover疑似クラスは記述順に注意
前後のスタイルシート TIPS
< 旧 / 新 >
(次の記事) 空白文字を使わずに文字間隔を広げる(調整する)CSSの書き方 »
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)