文字に線を引く方法を紹介します。
HTML
<span class="under_line">電脳ブログ</span>
線を引きたい部分を<span class="under_line"></span>で囲みます。
<p>電脳ブログは<span class="under_line">こちら</span>をクリック</p>
文章の場合は上記のようになり、こちらに線が引かれます。
まずは、無難な下線を引く方法を手短に2つ紹介します。
下線
電脳ブログ
.under_line{ text-decoration: underline; }
下線
電脳ブログ
.under_line{ border-bottom: solid; }
text-decorationとborder-bottomを使う方法です。border-bottomは文字と線の間に少し隙間ができますね。
text-decoration
まずは、text-decorationを使った方法をご紹介します。text-decorationは、線の位置、形状、色、太さが指定できます。
取り消し線
電脳ブログ
.under_line{ text-decoration: line-through; }
上線
電脳ブログ
.under_line{ text-decoration: overline; }
色を変える
電脳ブログ
.under_line{ text-decoration: underline #00d138; }
点線
電脳ブログ
.under_line{ text-decoration: underline dotted #00d138; }
波線
電脳ブログ
.under_line{ text-decoration: underline wavy #00d138; }
太さを変える
電脳ブログ
.under_line{ text-decoration: underline 10px #00d138; }
線を非表示にする
電脳ブログ
.under_line{ text-decoration: none; }
border-bottom
次に、border-bottomを使った方法をご紹介します。border-bottomは、形状、色、太さが指定できます。
色を変える
電脳ブログ
.under_line{ border-bottom: solid #ff0800; }
太さを変える
電脳ブログ
.under_line{ border-bottom: solid 10px #ff0800; }
点線
電脳ブログ
.under_line{ border-bottom: dotted #ff0800; }
破線
電脳ブログ
.under_line{ border-bottom: dashed #ff0800; }
二重線
電脳ブログ
.under_line{ border-bottom: thick double #ff0800; }
おまけ
蛍光ペンで引いたような線をつける方法を紹介します。HTMLは同じです。
全体に引く
電脳ブログ
.under_line{ background: #ffff6e; }
下半分に引く
電脳ブログ
.under_line{ background: linear-gradient(transparent 60%, #ffff6e 60%); }
transparentは透明を示します。上から60％は透明で、残りに色を付けるという意味になります。数値は好きなように調節してください。
