WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「文字の装飾線の表示」

text-decoration,text-decoration-line,text-decoration-style,text-decoration-color 「文字の装飾線」

文字の装飾線の位置、種類、色を指定します。

  • 「text-decoration」は、線の位置、種類、色をまとめて指定します。省略した値は、それぞれの初期値が設定されます。
  • 「text-decoration-line」は、線の位置を指定します。
  • 「text-decoration-style」は、線の種類を指定します。
  • 「text-decoration-color」は、線の色を指定します。
CSS Ver.適用要素継承
3.0全要素しない
広告

text-decoration,text-decoration-line,text-decoration-style,text-decoration-color の指定方法

構文

text-decoration : text-decoration-line || text-decoration-style || text-decoration-color;

text-decoration-line : none | underline | overline| line-through | blink;

text-decoration-style : solid | double | dotted | dashed | wavy;

text-decoration-color : [color];

プロパティ/設定値意味
text-decoration: text-decoration-line text-decoration-style text-decoration-color; 文字の装飾線の位置、種類、色をスペースで区切って、任意の順で1~3個指定可能。
位置は、必須指定です。指定がない場合、線は表示されません。
デフォルト:「タグ毎のスタイル初期値」を参照
text-decoration-line: none; 装飾線は表示しない
text-decoration-line: underline; 文字の下に線を引く。
text-decoration-line: overline; 文字の上に線を引く。
text-decoration-line: line-through; 文字の中央に線を引く。(取り消し線を引く)
text-decoration-line: blink; 文字が点滅する。(表示と非表示を交互に繰り返す)
デフォルト:「タグ毎のスタイル初期値」を参照
text-decoration-style: solid; 実線
text-decoration-style: double; 二重線
text-decoration-style: dotted; 点線
text-decoration-style: dashed; 破線
text-decoration-style: wavy; 波線
デフォルト:「タグ毎のスタイル初期値」を参照
text-decoration-color: 線の色; 色をコードやネームで指定。
色の見本参照。
見本以外の色は、色を作成」で、作成。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

text-decoration,text-decoration-line,text-decoration-style,text-decoration-color のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-decoration-u{text-decoration : underline;}
.css-u{text-decoration-line : underline;}
.css-decoration-o-db{text-decoration : overline double;}
.css-o-db{
  text-decoration-line : overline;
  text-decoration-style : double;
}
.css-decoration-t-dt-r{text-decoration : line-through dotted red;}
.css-t-dt-r{
  text-decoration-line : line-through;
  text-decoration-style : dotted;
  text-decoration-color : red;
}
<!-- html -->
<div class="common">
  <div class="cssTitle">text-decorationにまとめて指定</div>
  <div>
  <b>◆underline指定</b><br><br>
  <span class="css-decoration-u">
  下線が引かれる。
  </span><br><br>
  <b>◆overline double指定</b><br><br>
  <span class="css-decoration-o-db">
  上に二重線が引かれる。
  </span><br><br>
  <b>◆line-through dotted red指定</b><br><br>
  <span class="css-decoration-t-dt-r">
  取り消し線が赤の点線で引かれる。
  </span>
  </div>
  <div class="cssTitle">text-decoration-line<br>text-decoration-style<br>text-decoration-color<br>それぞれ指定</div>
  <div>
  <b>◆text-decoration-line:underline指定</b><br><br>
  <span  class="css-u">
  下線が引かれる。
  </span><br><br>
  <b>◆text-decoration-line:overline指定<br>
  ◆text-decoration-style:double指定</b><br><br>
  <span class="css-o-db">
  上に二重線が引かれる。
  </span><br><br>
  <b>◆text-decoration-line:line-through指定<br>
  ◆text-decoration-style:dotted指定<br>
  ◆text-decoration-color:red指定</b><br><br>
  <span class="css-t-dt-r">
  取り消し線が赤の点線で引かれる。
  </span>
  </div>
text-decorationにまとめて指定
◆underline指定

下線が引かれる。

◆overline double指定

上に二重線が引かれる。

◆line-through dotted red指定

取り消し線が赤の点線で引かれる。
text-decoration-line
text-decoration-style
text-decoration-color
それぞれ指定
◆text-decoration-line:underline指定

下線が引かれる。

◆text-decoration-line:overline指定
◆text-decoration-style:double指定


上に二重線が引かれる。

◆text-decoration-line:line-through指定
◆text-decoration-style:dotted指定
◆text-decoration-color:red指定


取り消し線が赤の点線で引かれる。

※ほとんどのブラウザが未対応のようです。現時点(2017/03)で、Firefoxは動作確認できました。
 未対応の場合、text-decorationのCSS2.1の仕様(text-decoration-lineのみ指定)で動作します。

【W3Cのtext-decoration仕様書】
http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン