CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法
2017/01/31
こんにちは、okutani(@okutani_t)です。Twitterでこんな質問を受けたので、取り急ぎ記事にしてみました。
@okutani_t 文字の下に可愛い蛍光マーカー引いた風にするのってどうやるんですか？？ お手すきの際に教えて下さいませ…！
— 一ノ瀬あや(恋愛コラムニスト) (@ichinoseaya) 2016, 2月 21
というわけで、「CSSを使って蛍光ペンっぽく文字にマーカー線を引く方法」を記事にしてみたので、サクッと見ていきましょう！
スポンサーリンク
HTML側の準備
HTMLでは次のようにしてあげればOKです。HTMLがよくわからない人は、とりあえず投稿画面に次のように記述すればOKなのね、ぐらいに捉えておいてください。
また、WordPressを使っている人は「テキストモード」にしてから記述しましょうね。
・文字強調なし
<span class="gray-line">ここにマーカーを引きたいテキスト！</span>・文字強調あり＋SEOに影響なし
<b class="gray-line">ここにマーカーを引きたいテキスト！</b>・文字強調あり＋SEOに影響あり
<strong class="gray-line">ここにマーカーを引きたいテキスト！</strong>文字強調あり・なしは「太字」か「そうでないか」の違いです。
SEOに影響あり・なしは「bタグ strongタグ 違い」とかでググってください。
よくわからない方は、どっち使っても大体OKです。ガシガシ使いたい場合はbタグを使っておけば問題ないかと思います。
でも、上のようにわざわざ書くのってめんどくさいですよね……！
ということで、WordPressを使っている人は「AddQuicktag」プラグインを使うと、ボタンひとつでかんたんに挿入できて便利なのでぜひ設定してみてください。
参考WordPressに「AddQuicktag」を導入してタグ入力を楽チンに！ | vdeep
僕はこーんな感じで使ってます。
今設定したclassに、CSSで装飾していけばOKです。
ちなみに、classの名前は自由につけられるので、「gray-line」「pink-line」「cho-kawaii-line」「line-ppoi-yatsu」とかなんでもいいです。分りやすい名前にしましょう。
次にCSSの解説をしていきます。
CSSで”linear-gradient”を使うとマーカー線が引ける
CSSが書けるところに、次のCSSコードを書いていきましょう。
WordPressだとstyle.cssとかですね。一番下の方に書いておけば、とりあえずOKかと思います。
マーカー線を引くときは「linear-gradient」を使いましょう。次のようにして使います。
background: linear-gradient(transparent 線の太さ（%）, カラーコード（#xxxxxx） 0%);linear-gradientはけっこういろいろなことができるのですが、上の形を頭に入れておけば、とりあえずマーカー線は作れます。
ちなみに、「線の太さは0%が一番太い」です。なので、90%とかにすると細い線になりますね。
カラーコードの後ろの%指定は「0%、もしくは線の太さと同じ%」にしてください。ここら辺はlinear-gradientの仕様がすこし難しいので、本記事では解説を省略しています。
ではでは、グレーの線を引いてみましょう。次のコードをstyle.cssに書いてみてください。
.gray-line {
background: linear-gradient(transparent 60%, #e7e7e7 0%);
}こんな感じになりました！
次にピンクの線を引いてみます。
.pink-line {
background: linear-gradient(transparent 80%, #dd9dbf 0%);
}あら、可愛らしい！
線の太さを80%にすることで、細めの線になりましたね。よりキュートらしさが出たのではないでしょうか。たぶん。
緑は……
.green-line {
background: linear-gradient(transparent 30%, #c7ddae 0%);
}さわやかぁぁーーっ！
線の太さを30%にしたのでけっこう太くなりましたね。そして言うほどさわやかじゃなかった。
青……
.blue-line {
background: linear-gradient(transparent 60%, #aabade 0%);
}さわやかぁぁ２ぅぅーーっ！
これもあんまり(略)
黄色……
.pikachu-line {
background: linear-gradient(transparent 10%, #fff001 0%);
}ピカチュウぅカラーぁぁーーっ！
……すみませんすこしふざけました。特に反省はしてません。
色の変化は、#から始まるカラーコードが変更されていることに注目してください。
いろんな色のカラーコードがありますが、下記のサイトを見ればほぼほぼのカラーコードを選んで使うことができるので活用してみてください。
参考カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
これでマーカー線を引けるようになれば、サイトをオシャレに彩れますね！
CSSがうまく反映されない場合
CSSがうまく反映されない場合は、次の項目を見直してみてください。
「WordPressを使っていて、テキストモードになっていない」
「HTMLで指定したclassと、CSSで設定した名前が一致していない（pink-lineとclassで名前をつけたら、CSSでもpink-lineと合わせる）」
「CSSの記述の際、頭に『.（ドット）』を付け忘れている」
「スペルミスがあるか確認する」
「ブラウザをF5などで更新してみる（古いCSSが読まれてる場合があるため）」
もし、それでも解決しなかった場合はokutaniのTwitter(@okutani_t)に適当にリプ飛ばしてくれたら一緒に調べますよ( ´ ▽ ` )ﾉ
おまけ: 文字全体をマーカー線で引きたい場合
ただ単純に、文字全体をマーカーで引きたい場合は、linear-gradientを使わなくても引くことができます。
.purple-line {
background: #cca9ca;
}こんな感じで上から下までのラインが引かれます。
この場合、線の太さなんかは変更できませんが、お手軽にやってみたい場合は上の方法もおすすめです。
参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
