あなたはブログの装飾にはこだわらない方でしょうか？
それとも、思い立ったらHTMLやCSSをずっと弄り続ける？
あなたがどちらのタイプなのかは分かりませんが、
読者のためにも簡単な装飾ぐらいは施していることでしょう。
例えば、テキストにマーカー（蛍光ペン）を引いたような装飾ぐらいは。
もしも使ったことがないのであれば、下記コードをHTML編集で使ってみてください。
HTMLコード
<p><span style="background: linear-gradient(transparent 60%, #ffff00 100%);">ここにテキスト</span></p>
テキストに黄色いマーカーのような装飾を引くことができます。
マーカー（蛍光ペン）のような装飾コードの使い方
マーカー（蛍光ペン）のような装飾を表示する方法は以下の２つがあります。
- 「HTMLだけで書く方法」
- 「CSSも使って書く方法」
HTMLだけで書く方法
いくつか例となるコードを書いてみます。
（※欠陥を塞いだコードは後半に載せています。）
サンプル
上から70%を透明にしたマーカー
HTMLコード
<p><span style="background: linear-gradient(transparent 70%, #ffc0cb 0%);">上から70%を透明にしたマーカー</span></p>
サンプル
上から70%を透明にし、下端までグラデーションをかけたマーカー
HTMLコード
<p><span style="background: linear-gradient(transparent 70%, #ffc0cb 100%);">上から70%を透明にし、下端までグラデーションをかけたマーカー</span></p>
サンプル
上から70%を透明にし、下端までグラデーションをかけたマーカー
HTMLコード
<p><span style="background: linear-gradient(transparent 70%, rgba(255, 255, 255, 0) 70%, #ffc0cb 100%);">上から70%を透明にし、下端までグラデーションをかけたマーカー</span></p>
例となるコードを見ただけではよく分からないと思います。
詳しくは下記コードを見ながら解説します。
【図解あり】マーカー（蛍光ペン）を引くコードの詳しい解説
HTMLコード
<p><span style="background:
linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffff00 85%);">
ここにテキスト</span></p>
まずはlinear-gradientから。
linear-gradientは線形のグラデーションをかけるコードです。
直後の括弧内に書き込むコードで内訳を指定しています。
transparentは透明状態を指定するコードです。
transparent 60%で60%の範囲を透明状態にする指示を出しています。
サンプルコードではグラデーションをかける方向（上下左右）を指定していないため、デフォルトの設定である下向きで処理されます。
つまり、今回は行の上端から下に向かって60％の範囲までを透明状態にする指令を発信していることになります。
rgba(255, 255, 255, 0)と#ffff00は色を指定するコードです。
括弧内の２番目に記したrgba(255, 255, 255, 0)が２つ目の色であり、
今回は中間に配置された色です。
括弧内の３番目に記した#ffff00が３つ目の色であり、
今回は最後に配置された色です。
linear-gradientの中身はこれらのコードで構成されています。
言葉だけでは分かりづらいので各要素を図解してみましょう。
- 各コードの後ろに付いている「○％」は、行の上端から何％の高さが終了地点になるのかを指定しています。
- 前のコードの終了地点から、次のコードの終了地点にかけて、両色のグラデーションがかかります。
- 最後に指定した色が行の下端までを埋めます。（最後に指定した色の終了地点が100％の場合、下端までグラデーションがかかります）
linear-gradientの使い方はご理解いただけたでしょうか。
ついでにtransparentに関する問題点をお教えします。
これを理解していないと、ブラウザによっては装飾の見た目が違ってしまいます。
マーカー（蛍光ペン）の見え方がブラウザ間で違ってしまう問題
普段はどのブラウザでブログを見たり書いたりしていますか？
今回お教えする問題は、Googleブラウザを使っている場合に生じやすい問題です。
百聞は一見に如かず。
ブラウザごとにスクリーンショットした下記の２枚の画像を見比べてください。
Mac推奨のデフォルトブラウザである「Safari」で閲覧した場合、
グラデーションが黒ずんでしまっています。
同じコードでもブラウザ間で見え方が違ってしまうのです。
見た目が明らかに悪くなりますので、放っておきたくはありませんね。
この問題が発生する原因は、transparentについての対処が
GoogleとSafariで異なっているからです。
Google（ブラウザ）では「白色を完全透明」にして表示します。
色コードにするとrgba(255, 255, 255, 0)です。
Safari（ブラウザ）では「黒色を完全透明」にして表示します。
色コードにするとrgba(0, 0, 0, 0)です。
このようにブラウザ間で色の扱いが異なっていることが原因です。
transparentは一見、透明な装飾にしか見えませんが、
グラデーション処理の際には隠れていた色が可視化されてしまうのです。
この問題を解決するためには、transparentのコードの次に、
ブログページの背景と同じ色を指定したコードを挿入する必要があります。
図解の時に存在が薄かったコードrgba(255, 255, 255, 0)の出番です。
HTMLコード
<p><span style="background:
linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffff00 85%);">
ここにテキスト</span></p>
背景が黒ならrgba(0, 0, 0, 0)、
背景が白ならrgba(255, 255, 255, 0)を指定します。
終了地点は transparentと同じ高さにしておけば良いでしょう。
これにより、グラデーションの開始色はtransparentの影響を受けなくなります。
ちなみにtransparentの部分を消しても同じ見た目になりますが、
RGBAカラーコードに対応していないブラウザでは無効化されてしまいます。
基本的にはサンプルのようにtransparentも書いた方が良いでしょう。
HTMLだけで書く方法。および解説と問題点の伝達は以上です。
Safariの見え方問題にも対応したHTMLコードを３色分載せておきます。
※ページ背景は白色を想定しています。
HTMLだけで装飾したい方は下記のコードをご使用ください。
―サンプル―
黄色のマーカーを引く
HTMLコード
<p><span style="background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffff00 85%);">黄色のマーカーを引く</span></p>
―サンプル―
ピンク色のマーカーを引く
HTMLコード
<p><span style="background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffc0cb 85%);">ピンク色のマーカーを引く</span></p>
―サンプル―
水色のマーカーを引く
HTMLコード
<p><span style="background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #83f7f7 85%);">水色のマーカーを引く</span></p>
CSSも使って書く方法
CSSも使って書く方法も、コードの構成や使い方は前項と同じです。
- 書き込むHTMLコードを短くできる
- CSSを変更した時、サイト内の全ページに反映される
- 見た目が少し違うだけでもCSSを追加することになる
サイト内の全ページに反映されることが、メリットであり、デメリットです。
以下にCSSも使って装飾する場合のサンプルコードを掲載します。
お好みの色や高さに書き換えてご使用ください。
―サンプル―
ピンク色のマーカーを引く
HTMLコード
<span class="line-marker01">ピンク色のマーカーを引く</span>
CSSコード
.line-marker01 {
background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0) 60%, #ffc0cb 85%);
}
以上で当記事は終了となります。お疲れさまでした！
他のサンプルコードを公開している記事へのリンクも貼っておきますので、
よろしければ参考にしてみてください。
アイコンフォントを用いた装飾のサンプルを公開しています。
手順解説に使えるような装飾のサンプルを公開しています。
