1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
- CSS
- CSS テキスト装飾
- CSS プロパティ
- Reference
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
translation_of: Web/CSS/text-decoration
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>text-decoration</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、テキストの装飾的な線の表示を設定します。</span>これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。</p>
<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <code><p>This text has <em>some emphasized words</em> in it.</p></code> という文と、 <code>p { text-decoration: underline; }</code> のスタイル規則では、段落全体に下線が引かれます。 <code>em { text-decoration: none; }</code> のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 <code>em { text-decoration: overline; }</code> の規則で "some emphasized words" に第二の装飾が施されます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>text-decoration</code> プロパティは、個別指定の text-decoration プロパティを表す1つまたは複数の値を空白で区切って指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("text-decoration-line")}}</dt>
<dd>使用する装飾の種類を設定します。 <code>underline</code> や <code>line-through</code> などです。</dd>
<dt>{{cssxref("text-decoration-color")}}</dt>
<dd>装飾の色を設定します。</dd>
<dt>{{cssxref("text-decoration-style")}}</dt>
<dd>装飾に使用する線のスタイルを設定します。 <code>solid</code>, <code>wavy</code>, <code>dashed</code> などです。</dd>
<dt>{{cssxref("text-decoration-thickness")}}</dt>
<dd>装飾に使われる線の太さを設定します。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush: css">.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
</pre>
<pre class="brush: html"><p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
as links generally are by default. Be careful when removing
the text decoration on anchors since users often depend on
the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
depending on the browser you use.</p>
</pre>
<p>{{EmbedLiveSample('Examples','auto','320')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Text Decoration')}}</td>
<td>{{Spec2('CSS4 Text Decoration')}}</td>
<td>{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>実質的な変更なし。</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.properties.text-decoration")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} です。</li>
<li>{{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。</li>
</ul>
|
