マーカーを引いたようなデザインにする方法

はてなブログでもよく見かける、マーカーのようなデザインにする方法について書いてみました。

マーカーデザイン

マーカーのデザインにするには、「linear-gradient」
を使います。

（使用例）

b { background: linear-gradient(transparent 50%, #「色を指定する部分」 50%); }

b:bタグで囲われた部分にマーカーが表示されます。

linear-gradien:マーカーのようなデザインにする記述。

transparent:透明の意味。

#「色を指定する部分」:ここに色の指定をします。（黄色の場合「#FFFF00」など）

transparent 50%, #色を指定する部分 50%):
「50%」としているので、だいたい下半分にマーカー線を引いた感じのデザインになります。

デザインCSSの部分に書いておくと、記事内でタグで囲った部分にマーカーが反映されます。

「#色を指定する部分」を変更することで、マーカーの色を変えることができます。
（例）
黄色：#FFFF00
緑色：#00FF00

上では50%ずつにしていますが、ここの数字を変えることで、線の太さを変えることができます。
（太線、細線にするなど）

bタグの太字は太字で使っていたので、storongタグを使っていました。
実際に前まで使っていたマーカーを書いてみました。

strong { background: linear-gradient(transparent 40%, #FFFF00 60%); }

こうすることで黄色い線のマーカーになります。

strong { background: linear-gradient(transparent 40%, #00FF00 60%); }

こうすることで緑色の線のマーカーになります。

今回書いたこと
・マーカーの引き方
・マーカーの色や太さの変え方
・実際に使っていたマーカー

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com