【第5回】ブログ作成記録
今回は「マーカー」に挑戦してみました。
ずっと、蛍光のアンダーラインを引くことに憧れていました。
今回のサイトを紹介
【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）
とてもわかりやすいです！ありがとうございました！
マーカー以外にも、点線、二重線など紹介されています。
いろいろ試してみてくださいね。
事前準備
CSSコード
.under {
background: linear-gradient(transparent 80%, #00ff7f 80%);
}
線の太さ
80%の部分の数値を大きくすれば細く、小さくすれば太くなります。
例えば90%にすると、もっと細くなります。
逆に70%、60%にすると、今より太くなります。
カラーコード
- ピンク：#ff99ab
- 蛍光：緑（lime）：#00ff00
- アクア（aqua）：#00ffff
- 黄色（yellow）：#ffff00
- 蛍光：うすい緑（springgreen）：#00ff7f
私は「蛍光：うすい緑（springgreen）：#00ff7f」にしました。
では書きましょう！
HTMLコード
<p>私は<span class="under">「わいのり」</span>です。</p>
HTML編集モードで、上記のHTMLコードを書きます。
こんな感じになります。
私は「わいのり」です。
私は <span class="under"></span> の部分を辞書に登録して、「マーカー」と入力すれば変換できるようにしています。ラクになりますよ。
最後に
ずっとマーカーに憧れていたのでとても嬉しいです♪
今回も素晴らしいサイトで勉強させていただきました！
本当にありがとうございました。
いつも思いますが、CSSなど書ける方々は尊敬します。
またいろいろ勉強させていただきます。
今回もお付き合いいただきまして、ありがとうございました。
