CSSで蛍光ペン風の下線(アンダーライン)を引く方法

内部施策

文字(テキスト)の装飾という事に関して、既に下線や取り消し線に文字色とは別の色を指定する方法はお伝えしたと思いますが、HTMLタグ自体、CSS文自体も日毎に進歩しておりまして、他の人のブログを観た時に「あれっ、これって、どうやってるんだろう??」と驚く事があります。

特にWordPress用テーマ(テンプレート)の場合、テキストの修飾に関するCSSが編集画面に組み込まれている場合(いわゆるショートコード)が多く、ワードプレス以外のユーザーがそれを取り入れようとすると、解析ツール等を利用しなければならないので地味に面倒です。

そんな「どうやってるんだろう??」の中から、本日は下線を「蛍光ペン風」にするCSSを紹介したいと思います。

↓こんな感じのヤツですね。
蛍光ペン風のアンダーライン黄
蛍光ペン風のアンダーライン赤
蛍光ペン風のアンダーライン青

広告

HTML文とCSS

HTML文とCSSは以下の通りになります。

【HTML】

<span class="under-marker1">蛍光ペン風のアンダーライン黄</span>
<span class="under-marker2">蛍光ペン風のアンダーライン赤</span>
<span class="under-marker3">蛍光ペン風のアンダーライン青</span>
【CSS】

.under-marker1 {
background: linear-gradient(transparent 60%,#ffff66 60%);
}
.under-marker2 {
background: linear-gradient(transparent 60%,#f09199 60%);
}
.under-marker3 {
background: linear-gradient(transparent 60%,#a0d8ef 60%);
}

解説

さて、このCSSですが、便宜上「下線」という表現をしましたが、本当は正規の下線用プロパティではありません。
(正規の下線プロパティは「text-decoration: underline;」です)

「background」というプロパティ名が示す通り、実はこれ「背景色」なんですよね。

↓本当はコレ
実は背景色なのさっ!

で、値の「linear-gradient」とは、読んで字の如く「帯状の色変化」であり、本来は見出し等の強調させたい部分の背景色を帯状に変色(グラデーション)させる為のプロパティです。

↓コレが本来の用途で、横方向に色を変化させた状態
ブログ運営論、その本音と建前

↓縦方向に変化させると、こうなる
サイドバー不要論と今後のブログデザイン

はい、ここまでくれば、もうお解りかと思いますが、上記の「縦方向の色変化」で白い部分(実際には透明)の面積を増やしたものが、今回の蛍光ペン風の下線の正体です。

なお、当然の事ではありますが、上記のCSSは、あくまでも文字列の「見た目」を装飾するものですので、SEO効果は一切ありません

もしも、SEO効果が期待できる下線を引きたいのであれば、<h>タグや<strong>タグに組み込む形で、

<h2 class="under-marker1">SEO効果が期待できる下線</h2>
<strong class="under-marker1">SEO効果が期待できる下線</strong>

等と記述してやればよいでしょう。

CSS

Posted by 安井真守