ブログやサイトに
HTMLだけで
マーカー（線）を引きたい

ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
（仮名：Aさん/Bさん/お客様として）

宜しくお願いいたします

今回は知人が
出来ればオリジナルの
マーカーを引きたいけど
HTMLがわからないから
カスタマイズできない
と相談を受けたので
そちらに関して記事にします

相方
相方
相方
相方

すぐに使えるように
いくつかコピペ用も
記事の中にコードを
貼っておきます♪

CSSを利用して引く方法もありますが
初心者であってもすぐ使えるように
ここではHTMLだけで引く方法を教えます

マーカーってなんぞ？

マーカーとは
マーカーペンで書いたような
色付きの下線です

要は
こういう強調するための線です
Rito
Rito

強調したい文字などに
よく使われてますよね♪

コピペして使用している方も多いですが
出来れば自分の好きな色に変更したい
と言う方のために簡単に説明いたします

覚えてしまうと
とても簡単ですよ♪

相方
相方

使用するコード

Rito
Rito

ベースとして
上記で引いた
黄色の線のコードを貼ります

  1. <span style="background: linear-gradient(transparent 70%, #ffff00 0%);">ここに文字を入れる</span>

上記のコードをそのまま貼ると

ここに文字を入れる

このような表示になります

もし全体的に線を引きたい場合

（例）こういう線
相方
相方

上記のような全体を囲うような線が良いのであれば、下記のコードで大丈夫です

  1. <span style="background-color: #ffff00;"><b>ここに文字を入れる</b></span>
Rito
Rito

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

覚える場所

相方
相方

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

マーカー線の引き方

下記の部分です

(transparent 70%, #ffff00 0%)

transparent 70%の部分

この70％と言う数字は
線の太さです

この70％を0％にすると

このように全部囲います

50％の場合は

これが50%です

10０%にすると

このように色はつきません
#ffff00の部分

こちらの
#ffff00
と言うのはカラーコードです

このカラーコードを変えることで
自分の好きな色に変更できます

「 カラーコード HTML 」
等で検索すれば沢山ヒットします

とりあえず
カラーコードのサイトが知りたい
と言う事であればご参考までに
下記をご覧ください

原色大辞典
 
WEB色見本 原色大辞典 - HTMLカラーコード
https://www.colordic.org
色の名前とカラーコードが一目でわかるWEB色見本
0%の部分

最後の
0％
はグラデーションです

此方は
数字が上がるほど
グラデーションがかかります

これが50%です
これが100%です
これが150%です
これが200%です
相方
相方

サイトの雰囲気などに
合わせて設定できます

全囲いしか使わない場合

<span style=”background-color: #ffff00;”><b>ここに文字を入れる</b></span>

Rito
Rito

赤い部分の
カラーコードだけ
変更すればOKです♪

ここからは
よく使いそうな
コピペ用のコードを
貼っていきます

相方
相方

コピペ用コード

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

カラーコードは
沢山ありますので
好みに合わせて
使ってみてください

パステルカラーの
カラーコードを使うと
更にマーカーペンのように
なりますよ♪

相方
相方

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

原色大辞典
 
パステルカラー - Pastel Colors
https://www.colordic.org/p
パステルカラーのカラーコードが一目でわかるWEB色見本
相方
相方

グラデーションを
上手く使うと更に綺麗になります

というわけで

今回はHTMLだけで
マーカーペンのような線を引く方法と
自分好みにカスタマイズする方法でした