CSSでテキストに蛍光ペンでのマーカー風にする見せ方を実装する方法

公開日: 

CSSでテキストに蛍光ペンでのマーカー風にする見せ方を実装する方法
テキストを目立たせようと思った時には、色々な方法が考えられます。文字サイズを大きくしたり、文字色を変えたり、フォント自体を変えたり、他にもスクリプトを使ってアニメーションを設定するのも1つですね。

色々な方法がありますが、いくつかのサイトやブログで見かけて個人的に気になっていたCSSを使って蛍光ペンでテキスト上に線を引いた風に見せる方法を紹介します。

スポンサードリンク

CSSでテキストに蛍光ペンでマーキングした風なやつを実装する方法「linear-gradient属性」

蛍光ペンのイラスト

1.蛍光ペンで線を引いた風

2.蛍光ペンで線を引いた風(線を細くする)

3.蛍光ペンで線を引いた風(線をさらに細くする)

いかがでしょうか。蛍光ペンで線を引いた風に見えませんか?
html、CSSはこんな感じです。

<span style="background: linear-gradient(transparent 0%, #FF99CC 0%);">
1.蛍光ペンで線を引いた風
</span>
<span style="background: linear-gradient(transparent 50%, #FF99CC 50%);">
2.蛍光ペンで線を引いた風(線を細くする)
</span>
<span style="background: linear-gradient(transparent 80%, #FF99CC 80%);">
3.蛍光ペンで線を引いた風(線をさらに細くする)
</span>

蛍光ペン風を実装するにはlinear-gradient属性を使います。

linear-gradient(transparent 線の太さ, 線の色 0%)

もともとグラデーションを設定するためのコードですが、グラデーションの透明色を利用して線を引いています。

線の太さは、値が小さくするほど太くなります。このサンプルでは上から0%、50%、80%と線の太さを指定しています。値が大きいほど細い線になっていますね。

線の色を変更すれば、違う色の蛍光ペンの出来上がりです。

黄色の蛍光ペンとか水色の蛍光ペンとか緑色の蛍光ペンといった感じで色を変えるだけでも雰囲気は変わってきます。これに線の太さを変えて見せ方を調整してみましょう。

参考(linear-gradientについて詳しい説明)
CSS3 グラデーション(gradient)の指定方法 | CSS Lecture


また、よく利用するパターンとしてCSSのクラスで定義しておけば、色んなところで使えそうです。

クラスとして定義しておく

<style>
.pen_blue{
background: linear-gradient(transparent 0%, #99ffff 0%);
}
.pen_yellow{
background: linear-gradient(transparent 0%, #ffff66 0%);
}
.pen_green{
background: linear-gradient(transparent 0%, #66ffcc 0%);
}
</style>
<span class="pen_blue">青色蛍光ペン</span>
<span class="pen_yellow">黄色蛍光ペン</span>
<span class="pen_green">緑色蛍光ペン</span>

色ごと、線のサイズごとにクラス定義しておけば使い勝手は便利そうですね。

テキストリンクに蛍光ペンを実装

リンクのテキストに対しても同様に蛍光ペンを実装することが可能です。

テキストリンクに蛍光ペンを実装
ネットショップ運営の気になる備忘録

<a style="background: linear-gradient(transparent 0%, #FF99CC 0%);" href="#">
ネットショップ運営の気になる備忘録
</a>

目立たせたいリンクに実装してみるもの良いかもしれません。

テキストリンクのマウスオーバー時に蛍光ペンを実装

また、テキストリンクにマウスオーバーした際に蛍光ペンを実装することも可能です。

テキストリンクのマウスオーバー時に蛍光ペンを実装
ネットショップ出店の候補一覧

<style>
a:hover {background: linear-gradient(transparent 60%, #66ffcc 60%);} 
</style>
<a href="#">ネットショップ出店の候補一覧</a>

リンク付きの商品名やカテゴリ名などに実装すれば面白いかもしれません。


ページ内に多く使いすぎるとごちゃごちゃした感じになってしまうかもしれません。バランスを考えて実装すれば、ワンポイントで目立たせるには面白い方法ですね。ぜひ、活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑