こんにちは、@codeship_techです。
本日の質問がこちら。
文字に下線をどうやって引けばいいですか??
ということで、文字の下線についての質問ですね。
下線はwebサイト内の文字を目立たせたい、お洒落に見せたい時によく使いますよね。
実は線の引き方はいくつかパターンがあるんです!
それではこちらの質問に答えていきます。
text-decoration、border、擬似要素の3パターンで書けます!
作り方は他にもあると思いますが、頻繁に使われている作り方は3パターンかと思います。
ではそれぞれ解説していきます。
①text-decorationを使用して下線を引く場合
text-decorationはみなさん馴染みがありますよね!
よく使うaタグに初期設定として引かれている下線がtext-decorationです。
このプロパティではシンプルな線のみ引くことができます。
色は文字色と同じくcolor:〇〇; で変更可能です。
p{
text-decoration:underline;
color:#f00;/*色を赤に*/
}
②borderを使用して線を引く場合
この作り方を使う人が多いのではないでしょうか。
borderを使うことで、普通の線だけでなく様々な種類の線を引くことができます。
一番シンプルなパターンは
border-bottom: solid 1px #00f;
|線の種類|太さ|色|
このように記述します。
その他にも、
border-bottom: dashed 2px red; /*破線*/
border-bottom: double 2px red; /*二重線*/
border-bottom: dotted 2px red; /*点線*/
様々な種類の線を引くことができます。
ただし、弱点もあります。
それは、borderは文字の持っている領域にのみ適用されることです。
つまり、線の位置や長さなどは全て文字の大きさ(文字の領域)に依存するということです。
シンプルに線を引きたいだけならおススメですが、もし長さを変えたい、特殊な場所に線を使用したい場合にはborderでは線を引くのが難しくなります。
そこで、おススメするのが次に紹介する疑似要素を使った線の引き方です。
③擬似要素を使って線を引く場合
みなさんは擬似要素をご存知でしょうか。
すごく便利なもので、簡単に言えばHTMLに記述しなくとも、CSSだけいろいろできる書き方です。
文字の色を先頭だけ変えたい場合に使う
〇〇:: first-letter
は擬似要素の1つです。
今回は擬似要素を使用してdivのような箱を文字の下に作成しheightを小さくすることで、
“線のように見える箱”を作ります。
<h2>Hello, World!!</h2>
h2::after{
content: '';
display: block;
background: #BD0404;
height: 3px;
width: 28px;
margin-top: 5px;
}
このように記述をすることで下線を引けます。
次回、この方法を使用した上下左右の線の引き方、擬似要素、diplayなどを詳しく解説します。
本日は、文字の下線の引き方について解説しました。