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

スポンサーリンク

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

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

マーカーデザイン

マーカーを引いたような装飾にするには

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

(使用例)

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

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

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

transparent:透明の意味。

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

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

書く場所について

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

色を変える方法

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

太さを変える方法

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

bタグ以外で使う方法

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

黄色い線にする方法

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

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

緑色の線にする方法

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

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

まとめ

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

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