複数行もOK！マーカーペンで印をつけたようにcssで背景色を付ける方法
疑似要素を使うと複数行だとうまく行かないし、text-decorationだとあっさりしすぎる。
逆に背景色だとうるさすぎる場合に使える方法かと思います。
今回実装するもののサンプル
今回のサンプルは以下のとおりです。
HTML（HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
実は普段目にしているwebサイトのもととなるものは大量の文字と記号でできていて、それがHTMLなのです。
ファイルの拡張子は「.html」になります。
マーカーペンで印をつけるためのHTML
まずはHTMLですが、シンプルに装飾したい部分を表示形式がinlineの要素（ここではspan要素）で囲んでいき、装飾しやすいようにクラス属性を付与しておくと良いと思います。
ここではクラスを「marker」をspan要素に付与してみました。
|
1 2 3 4 5 6 7 8 9 |
<p> HTML（HyperText Markup Language）は、ウェブページを作成するために開発された言語です。現在、<span class="marker">インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。</span> </p> <p> 実は普段目にしているwebサイトのもととなるものは<span class="marker">大量の文字と記号</span>でできていて、それがHTMLなのです。 </p> <p> ファイルの拡張子は「<span class="marker">.html</span>」になります。 </p> |
マーカーペンで印をつけるためのCSS
クラスを「marker」としたspan要素を装飾していきますが色を付けるために、グラデーションを使うことが今回のキモになります
|
1 2 3 4 5 6 |
.marker { background-image: linear-gradient(#ffcffb, #ffcffb); background-size: 100% 50%; background-position: 0 100%; background-repeat: no-repeat; } |
コードを見るとわかると思いますが、グラデーションですが単色になるよう指定しています。
こちらは単色にしたかったのでこういった指定になっていますが、カラフルなグラデーションで実装することも可能です
マーカーペンで装飾したい文章の前後に遊びをもたせたいのであれば左右にpaddingをつければ遊ばせることも可能ですし、全体を塗りつぶしたいのなら「background-size」のY軸方向の大きさを操作すれば可能です
「background-position」では位置の指定ができるのでサイズといっしょに調整すれば任意の太さと位置を指定することができます。
JSのスクロールイベントと合わせてみる
コードに関して詳しい解説は省きますが、スクロールイベントと組み合わせるとかなり目立たせることができます。
ページ内に複数出現する要素であればeachメソッドを使えば一括で設定できるのでとっても簡単に実装できます
ゆっくり動くように設定しています
HTML（HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
実は普段目にしているwebサイトのもととなるものは大量の文字と記号でできていて、それがHTMLなのです。
ファイルの拡張子は「.html」になります。
cssではアニメーション前の状態とアニメーション用のスタイルを作っていきます。
アニメーションさせるきっかけは、ウインドウの下から100pxの位置にマーカーペンで装飾したい要素が来たときにクラスを付与し、これをきっかけにアニメーションが起きるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*アニメーション前*/ .marker { padding: 0 5px; background-image: linear-gradient(#ffcffb, #ffcffb); background-size: 0 50%;/*幅をゼロにしておく*/ background-position: 0 100%; background-repeat: no-repeat; transition: .8s; } /*アニメーション後*/ .marker.active { background-size: 100% 50%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/ } |
JSはjQueryを使ってクラスを付与しているだけですが、loadとscrollイベント時にスクロール量やそれぞれの要素の位置を調べ、条件にあったときのみに付与するようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { var $marker = $('.marker'); var $win = $(window); $win.on('load scroll', function() { var hSize = window.innerHeight; var scroll = $win.scrollTop(); $marker.each(function() { if (scroll > $(this).offset().top - hSize +100) { $(this).addClass('active'); } }); }); }); |
この書き方だと、マーカーペンで装飾したい要素がいくつあってもこれ以上の記述が必要なくなるのでオススメ
