text-decoration/文字の飾り線

説明

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

構文

　text-decorationプロパティの構文は以下の通りです。

text-align: 種類;

　種類は以下の設定が出来ます。

利用例

　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>

　上記を表示すると以下になります。

関連ページ

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る