新規作成日 2019-04-16
最終更新日
文章の強調したい箇所を何らかの装飾で視点を集めることで、文章を斜め読みしたときにより多くの情報を読み取ることができます。単調な文章や理解しにくい難しい内容の場合で、要点を装飾して強調することで、読みやすく、理解しやすくなります。
蛍光ペンで線を引いたような装飾は、やさしく強調するので、適切な量であれば、デザインがうるさくならない特徴を持っています。Webサイトが、ギラッとしたデザインだと、文章を読んでいても疲れます。あまり単調にならないように気を使ったうるさくないデザインは、誰もが目指すゴールの1つです。蛍光ペンで線を引いたような装飾は、有効な文字装飾の１つです。
cssデザインで蛍光ペン風の文字強調を表現する
蛍光ペンで線を引いたような装飾は、背景、つまり、background で表現します。 背景とグラデーションと透過度を組み合わせて、蛍光ペンで線を引いたような装飾を表現します。
/* 黄色の蛍光ペン */
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}transparent 60% が、蛍光ペンの太さを表しています。
使用する場合には、spanタグやstrongタグで、強調する範囲を指定して、クラス指定します。
<p><span class="marker_yellow">蛍光ペンの文字装飾</span>で文字を強調する。</p>蛍光ペンの文字装飾で文字を強調する。
cssに、色の設定を変えて、数種類のクラスを設定しておきましょう。
/* 黄緑色の蛍光ペン(細) */
.marker_lime {
background: linear-gradient(transparent 60%, #66FFCC 60%);
}
/* 水色の蛍光ペン(細) */
.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}
/* 桃色の蛍光ペン(細) */
.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}参考にしたサイト
