色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペンのようなマーカーで塗られたような強調サインです。例えば、こんな色。
ずっと気になっていたので、IT便利帳でも設定してみることにしました。
スポンサーリンク
蛍光ペンマーカーを設定（CSS）
蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。
linear-gradient(transparent 線の太さ, 線の色 0%)
このlinear-gradient属性、グラデーションを使って設定します。
線の太さ
黄色の蛍光ペン(太)
1 2 3 | .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } |
黄色の蛍光ペン(細)
1 2 3 | .marker_yellow_hoso { background: linear-gradient(transparent 60%, #ffff66 60%); } |
蛍光ペン（太）と蛍光ペン(細)の違いは60％と0％で表示している箇所です。100％表示の場合は0％に，40％表示の場合は60％に表記します。
数値が高いほど細くなります。
次は色の設定を変更します。
色の設定
色設定をしてみます。例として黄緑色、水色、ピンクで表記してみました。
黄緑色の蛍光ペン(細)
1 2 3 | .marker_lime { background: linear-gradient(transparent 60%, #66FFCC 60%); } |
水色の蛍光ペン(細)
1 2 3 | .marker_water { background: linear-gradient(transparent 60%, #66ccff 60%); } |
桃色の蛍光ペン(細)
1 2 3 | .marker_pink { background: linear-gradient(transparent 60%, #ff66ff 60%); } |
色の「#66FFCC」の箇所を変更しているだけです。
上のCSSをスタイルシート（Style.css）や（smart.css）などに表記し更新。次に HTMLには
1 | <span class="marker_pink">桃色の蛍光ペン(細)</span> |
と表記すれば、蛍光ペンでマーカーされます。
最後に
文字を強調したい時は、その文字を太くする方法もありますが、このように蛍光ペンでマーカーすると見やすいですね。マーカーされた箇所を見入ってしまいます。
CSSで太字とマーカーを両方とも作っておいて、使い分けしていこうと思います。
他にも色はたくさんあります。皆さんも気に入った蛍光ペン風マーカーを作ってみて下さい。
プラグイン「AddQuickTag」に登録しておくと、連携して便利に使えますよ▼