文字にマーカーを引く
CSSCSSでマーカーを引いたデザインにする方法を解説します。重要な部分などを目立たせるために役に立ちます。
文字全体にマーカーを引く
文字全体にマーカーを引く場合には、スタイルでbackgroundを指定します。ちなみにHTMLはspanタグでもいいですが、より意味を持ったタグにするためにHTML5で実装されたmkタグを使いましょう。
- CSS
- COPY
.mk_y{ background: #ffffc0; }
.mk_b{ background: #e3f3ff; }
.mk_r{ background: #ffe3e3; }
.mk_g{ background: #e8ffe8; }- HTML
- COPY
<mk class="mk_y">黄色のマーカー</mk><br>
<mk class="mk_b">青のマーカー</mk><br>
<mk class="mk_r">赤のマーカー</mk><br>
<mk class="mk_g">緑のマーカー</mk><br>文字の下半分にマーカーを引く
文字の下半分にマーカーを引く場合は、CSSのグラデーションを応用して使います。グラデーションで上半分を白、下半分をマーカーの色になるように設定します。
- CSS
- COPY
.mk_y_half{ background: #ffffc0;background: -moz-linear-gradient(top, #fff 50%, #ffffc0 50%);background: -webkit-linear-gradient(top, #fff 50%, #ffffc0 50%);background: linear-gradient(to bottom, #fff 50%, #ffffc0 50%); }
.mk_b_half{ background: #e3f3ff;background: -moz-linear-gradient(top, #fff 50%, #e3f3ff 50%);background: -webkit-linear-gradient(top, #fff 50%, #e3f3ff 50%);background: linear-gradient(to bottom, #fff 50%, #e3f3ff 50%); }
.mk_r_half{ background: #ffe3e3;background: -moz-linear-gradient(top, #fff 50%, #ffe3e3 50%);background: -webkit-linear-gradient(top, #fff 50%, #ffe3e3 50%);background: linear-gradient(to bottom, #fff 50%, #ffe3e3 50%); }
.mk_g_half{ background: #e8ffe8;background: -moz-linear-gradient(top, #fff 50%, #e8ffe8 50%);background: -webkit-linear-gradient(top, #fff 50%, #e8ffe8 50%);background: linear-gradient(to bottom, #fff 50%, #e8ffe8 50%); }- HTML
- COPY
<mk class="mk_y_half">黄色のマーカー</mk><br>
<mk class="mk_b_half">青のマーカー</mk><br>
<mk class="mk_r_half">赤のマーカー</mk><br>
<mk class="mk_g_half">緑のマーカー</mk><br>