CSSスキル - 第3章 Lesson7

下線や打ち消し線をtext-decorationで書こう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

text-decorationプロパティを利用して、文字の下線・上線・打ち消し線をコントロールするCSSについて初心者向けに解説しています。



この動画で学べること

・下線や打ち消し線をtext-decorationで書く方法



下線や打ち消し線をtext-decorationで書こう

テキストに下線や乗船、打ち消し線を書いてみたいと思います。
テキストにこのような線をつけるのは、text-decorationというプロパティです。
このプロパティでは、できることがいくつもあるので、実際に書きながら見ていきましょう。
今回は、<div>タグの中の<h2>にかけていきたいと思います。
まずは値に「underline」と入れてみます。



div h2 {
text-decoration: underline;
}




一度、保存してブラウザで見てみましょう。
文字の下に線が引けました。
次に値を「overline」にしてみます。



div h2 {
text-decoration: overline;
}




これで文字の下ではなく上に線を引くことができました。
他にも、打ち消し線を引く「line-through」や、下線をなしにする「none」があります。
このtext-decoration:none;はWebサイトを制作するときによく使います。
例えば、<a>タグにはブラウザの初期状態で下線が引かれていますが、その線を消したいときなどです。
では実際に書きながら、覚えていきましょう。




div h2 {
text-decoration: line-through;
}

div h2 {
text-decoration: none;
}



text-decorationにはいろいろな使い方があることがわかりました。