【CSS】文字に線を引く方法

ろん
ろん

文字に線を引く方法を紹介します。

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-decorationborder-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%は透明で、残りに色を付けるという意味になります。数値は好きなように調節してください。

関連記事