ブログやサイトに
HTMLだけで
マーカー(線)を引きたい
本記事の概要
ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
(仮名:Aさん/Bさん/お客様として)
宜しくお願いいたします
今回は知人が
出来ればオリジナルの
マーカーを引きたいけど
HTMLがわからないから
カスタマイズできない
と相談を受けたので
そちらに関して記事にします


すぐに使えるように
いくつかコピペ用も
記事の中にコードを
貼っておきます♪
CSSを利用して引く方法もありますが
初心者であってもすぐ使えるように
ここではHTMLだけで引く方法を教えます
マーカーってなんぞ?
マーカーとは
マーカーペンで書いたような
色付きの下線です
こういう強調するための線です

強調したい文字などに
よく使われてますよね♪
コピペして使用している方も多いですが
出来れば自分の好きな色に変更したい
と言う方のために簡単に説明いたします
覚えてしまうと
とても簡単ですよ♪

使用するコード

ベースとして
上記で引いた
黄色の線のコードを貼ります
- <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">ここに文字を入れる</span>
上記のコードをそのまま貼ると
このような表示になります
もし全体的に線を引きたい場合

上記のような全体を囲うような線が良いのであれば、下記のコードで大丈夫です
- <span style="background-color: #ffff00;"><b>ここに文字を入れる</b></span>

全体を囲う線も
細い方の線も使いたい
との事であれば
最初に書いたコードが
おすすめです
覚える場所

とりあえず
必要な場所だけ
覚えましょう♪

下記の部分です
(transparent 70%, #ffff00 0%)
この70%と言う数字は
線の太さです
この70%を0%にすると
50%の場合は
100%にすると
こちらの
#ffff00
と言うのはカラーコードです
このカラーコードを変えることで
自分の好きな色に変更できます
「 カラーコード HTML 」
等で検索すれば沢山ヒットします
とりあえず
カラーコードのサイトが知りたい
と言う事であればご参考までに
下記をご覧ください
最後の
0%
はグラデーションです
此方は
数字が上がるほど
グラデーションがかかります

サイトの雰囲気などに
合わせて設定できます
全囲いしか使わない場合
<span style=”background-color: #ffff00;”><b>ここに文字を入れる</b></span>

赤い部分の
カラーコードだけ
変更すればOKです♪
ここからは
よく使いそうな
コピペ用のコードを
貼っていきます

コピペ用コード
赤いコード- <span style="background: linear-gradient(transparent 70%, #ff0000 0%);">赤いコード</span>
黄色のコード - <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">黄色のコード</span>
青いコード - <span style="background: linear-gradient(transparent 70%, #0000ff 0%);">青いコード</span>
水色のコード - <span style="background: linear-gradient(transparent 70%, #00bfff 0%);">水色のコード</span>
黄緑のコード - <span style="background: linear-gradient(transparent 70%, #7fff00 0%);">黄緑のコード</span>
マゼンタのコード - <span style="background: linear-gradient(transparent 70%, #ff00ff 0%);">マゼンタのコード</span>
ラベンダー?のコード - <span style="background: linear-gradient(transparent 70%, #8a2be2 0%);">ラベンダー?のコード</span>

カラーコードは
沢山ありますので
好みに合わせて
使ってみてください
パステルカラーの
カラーコードを使うと
更にマーカーペンのように
なりますよ♪

因みに相方は
先ほどのカラーコードのサイトの
パステルカラーをよく使います

グラデーションを
上手く使うと更に綺麗になります
というわけで
今回はHTMLだけで
マーカーペンのような線を引く方法と
自分好みにカスタマイズする方法でした