説明
text-decorationプロパティを使うと文字に下線、上線、取り消し線といった飾り線を引くことが出来ます。

text-decorationプロパティを使うと文字に飾り線を引けます。
text-decorationプロパティを使うと文字に下線、上線、取り消し線といった飾り線を引くことが出来ます。
text-decorationプロパティの構文は以下の通りです。
text-align: 種類;
種類は以下の設定が出来ます。
種類 | 説明 |
---|---|
none | なし(デフォルト) |
overline | 上線 |
line-through | 取り消し線 |
underline | 下線 |
text-decorationの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
span {
text-decoration: overline;
}
文章の途中で<span>上線</span>
上記を表示すると以下になります。
次はをline-through指定した時の表示例です。
次はをunderline指定した時の表示例です。
noneはハイパーリンクで下線を表示させたくない時に使えます。
a {
text-decoration: none;
}
<a href "test.html">リンク</a>
上記を表示すると以下になります。
尚、スペースで区切って2つ以上指定する事も出来ます。
span {
text-decoration: overline line-through underline;
}
文章の途中で<span>上中下線</p>
上記を表示すると以下になります。
text-decorationは入れ子にすると2重に効きます。
.t1 {
text-decoration: overline;
}
.t2 {
text-decoration: underline;
}
<span class="t1">上線<span class="t2">下線</span></span>
上記を表示すると以下になります。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ
Access:
Today: Yesterday: