text-decoration/文字の飾り線

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>

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

上線下線

関連ページ

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)