CSSで”蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、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%);
}

ピカチュウぅカラーぁぁーーっ！

……すみませんすこしふざけました。特に反省はしてません。

色の変化は、#から始まるカラーコードが変更されていることに注目してください。

いろんな色のカラーコードがありますが、下記のサイトを見ればほぼほぼのカラーコードを選んで使うことができるので活用してみてください。

参考HTMLカラーコード

参考カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル

これでマーカー線を引けるようになれば、サイトをオシャレに彩れますね！

もし、使い方などなどよくわからなかったらokutaniのTwitter(@okutani_t)に適当にリプ飛ばしてくれたら答えますよ( ´ ▽ ` )ﾉ

おまけ: 文字全体をマーカー線で引きたい場合

ただ単純に、文字全体をマーカーで引きたい場合は、linear-gradientを使わなくても引くことができます。

.purple-line {
  background: #cca9ca;
}

こんな感じで上から下までのラインが引かれます。

この場合、線の太さなんかは変更できませんが、お手軽にやってみたい場合は上の方法もおすすめです。

参考になれば幸いです。

okutani (@okutani_t) のヒトコト

@twitterさんをフォロー

CSSを覚えれば、サイトにオリジナリティを持たせることができていいですね。みなさんもマーカー線ぜひ試してみてください！