スタイルシートデザインガイド
スタイルシートでできるデザインを紹介しています。
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
CSSで実現するさまざまなテクニックでどんなサイトも思いのままに表現しよう！
蛍光ペン効果で文字や文章を強調する
紙に蛍光ペンでマーキングするように、ホームページ上の強調点にも蛍光ペンの効果を出すことができます。長い範囲の文章を目立たせたい場合に有効です。
印刷物などの重要個所に蛍光ペンでマークすることがよくありますが、ホームページ内の文章でも、重要な箇所に蛍光ペンでマークしたような効果を出すことで、強調を実現できます。蛍光ペン効果といっても、単に文字に背景色を加えているだけです。黄色やライムなど、明るい色を背景色に使うと、蛍光ペンでマーキングしたような効果が得られます。
サンプルCSSコード
span.pen1 {
background-color: yellow;
padding: 0.1em 0px;
}
span.pen2 {
background-color: lime;
padding: 0.1em 0px;
}
background-color: yellow;
padding: 0.1em 0px;
}
span.pen2 {
background-color: lime;
padding: 0.1em 0px;
}
ペンの太さを、paddingプロパティで調節できます。paddingプロパティは内側の余白を調節するプロパティです。ここを大きく取れば、それだけ背景色が周囲に広がります。ただし、paddingプロパティの値を大きくして蛍光ペンを太くしすぎると、前後の行にマーキングが重なってしまい、文字の一部が消えてしまうこともあるので注意しましょう。
