text-decoration再入門 前編 下線と上線/線のスタイル/線の色/線の太さ
text-decorationプロパティは新しいプロパティというわけではありませんが、Level3では3つ、Level 4では4つのプロパティのショートハンドとして機能するようになっています。改めて見直し、新しい構文を理解しましょう。
text-decorationの過去と現在
CSSのtext-decoration
プロパティは、テキストに線や色、スタイルなどの装飾を指定するもので、古くから存在しています。CSS 2.1までは1つで完結するプロパティでしたが、CSS Text Decoration Module Level 3からはショートハンドプロパティとして定義されています。
現在の仕様
以前の値の構文
none | [ underline || overline || line-through || blink ] | inherit
構文からもわかるように、グローバル値以外は、装飾のスタイルのみを指定するものでした。これが現在では次のようになっています。
値の構文(Level 3)
<'text-decoration-line'> || <'text-decoration-style'>
|| <'text-decoration-color'>
値の構文(Level 4)
<'text-decoration-line'> || <'text-decoration-thickness'>
|| <'text-decoration-style'> || <'text-decoration-color'>
構文の読み方
構文の読み方は、次の記事を参照してください。
'
つきの<
と>
で囲まれているものは、同じ名前のプロパティの値と同義です。
このように、Level3では3つ、Level 4では4つのプロパティのショートハンドとして機能するようになりました。<'text-decoration-line'>
のみを指定したtext-decoration
プロパティは、古い構文と互換性を持ちます。
新しい構文を使いつつ、古い構文もサポートしたい場合は、次のように2つ指定することでフォールバック可能です。
a[href] {
text-decoration: underline;
text-decoration: underline dotted tomato;
}
こうすることで、新しい構文をサポートしている環境では2つ目のルールが、そうでない環境では1つ目のルールが反映されます。
それでは、個々のプロパティを見てみましょう。
text-decoration-line
このプロパティは、CSS 2.1までのtext-decoration
と同じです。
値の構文
none | [ underline || overline || line-through || blink ]
inherit
はグローバルキーワードとして定義されましたので、ここからは消えていますが、他は同じです。
なお、blink
は廃止予定ですので、点滅させたい場合はCSSアニメーションを利用します。blink
キーワードを使わなくてはならない状況も存在するでしょうが、どうしても必要でないかぎりはCSSアニメーションを使うほうがよいでしょう。
underline
とoverline
は、名前の通り下線と上線ですが、縦書きの際は言語依存となります。日本語で使われるwriting-mode: vertical-rl
では、次のようになるでしょう。
/* 下線付きのテキスト */
.underline {
text-decoration-line: underline;
}
/* 上線付きのテキスト */
.overline {
text-decoration-line: overline;
}
/* 縦書き */
.vertical {
writing-mode: vertical-rl;
}
縦書きでunderline
またはoverline
を指定した場合はtext-underline-position
プロパティを使うことで、線を左右どちらに描画するかを指定できます。
前述のデモを見てもわかるとおり、underline
を指定した場合、vertical-rl
(縦書き、右から左へ読む)ときには、テキストの右側に線が引かれます。これを左側に移動したい場合にはtext-underline-position: left;
と指定します。この際、overline
を指定された線は右側になります。
日本語の縦書きwriting-mode: vertical-rl;
の場合は、text-underline-position: left;
を指定するとunderline
は左に、overline
は右になると考えるとよいでしょう。
.underline-left {
text-decoration-line: underline;
text-underline-position: left;
}
text-underline-position
プロパティについては次回にも説明します。
text-decoration-style
CSS2.1では線のスタイルを指定できませんでしたが、text-decoration-style
で線のスタイルを指定できるようになりました。
値の構文
solid | double | dotted | dashed | wavy
基本的にはborder-*-style
と同じですが、wavy
で波線を指定できるのが特徴です。初期値はsolid
です。
p {
color: darkgray;
text-decoration-line: underline;
text-decoration-color: tomato;
}
.solid { text-decoration-style: solid }
.double { text-decoration-style: double }
.dotted { text-decoration-style: dotted }
.dashed { text-decoration-style: dashed }
.wavy { text-decoration-style: wavy }
<p class="solid">通常の下線</p>
<p class="double">二重線の下線</p>
<p class="dotted">点線の下線</p>
<p class="dashed">破線の下線</p>
<p class="wavy">波線の下線</p>
通常のコンテンツ作成においては、通常の下線(1本)のsolid
以外を使う機会は少ないかもしれません。
使用場面としては、点線のdotted
はabbr[title]
でのスタイルに使う*、二重線の下線のdouble
は特に強調したいときに使う、などが考えられます。しかし下線が直線ベースである限り、「これはリンクなのだろうか」とユーザーを迷わせる原因にもなります。使うならば、リンクとはスタイルを区別し、使用場面を明確にすることでこのような混乱を抑えることも考える必要があるでしょう。
波線の場合は、リンクと判断されることはあまりないでしょう。そのような使用方法は一般的ではありません。ウェブブラウザ上で波線を見る機会は、入力した文字列に何らかの間違いがある、といった場合でしょう。CSSで指定する場合も、なるべくその文脈から離れないような使用が望ましいと考えられます。
*注:abbr
点線のdotted
の使用場面として挙げたabbr
要素は、略語を表す要素です。title
属性を使うことで略していない状態のテキストを表すことができます。それを視覚的に知らせるため、略語に点線の下線を用いることがあります。
ChromeとFirefoxでは次のようなUAスタイルシートが指定されています。
abbr[title] {
text-decoration: underline dotted;
}
text-decoration-color
このプロパティは線の色を指定するものです。難しいことは何もないでしょう。指定できるのは<color>
型です。
過去、text-decoration
で指定した下線などは、color
プロパティの値と同じ色で描画されていました。ですが、このプロパティの登場により、現在のcolor
の値が何であれ、text-decoration
による線の色を指定できるようになりました。
指定しなかった場合は、初期値のcurrentcolor
が使われます。これはcolor
プロパティの値と同じ色になりますので、CSS 2.1までと同じ結果になります。
例として、タイプミスのハイライトを作成してみましょう。
p {
color: black;
}
mark {
background-color: transparent; /* UAスタイルをリセット */
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<p>
春はあけぼの。やうやう白くなりゆく山際、少し<mark>明かrて</mark>、紫だちたる雲の細くたなびきたる。
</p>
このように、前景色color
の値に依存せずに、線の色を指定できます。
text-decoration-thickness
CSS Text Decoration Module Level 4で追加されたプロパティで、text-decoration
による線の太さを指定可能です。一見すると地味な機能ではありますが、テキストの装飾に気を遣う場合には非常に便利なプロパティでもあります。
値の構文
auto | from-font | <length> | <percentage>
構文は以上のようになっており、初期値はauto
です。
auto
による線の太さはユーザーエージェントが決定しますが、「OpenTypeなどの一部のフォント形式には適切な線の太さの情報を持っているものがあり、ユーザーエージェントはそれを使用すべきである」と仕様には記載されています。
from-font
は、最初に有効なフォントに線の太さの情報がある場合はそれを使用し、そうでなければauto
になります。
<length>
型はそのままの意味です。CSSで指定可能な長さの値です。この値の特徴は、フォントサイズに依存しない先の太さを実現可能なことにあります。
<percentage>
は1em
に対するパーセンテージです。フォントサイズに依存して太さが変更されます。
このようなプロパティですが、実際に試してみましょう。
以下は、text-decoration-thickness
の各値を指定し、文字の大きさを変えた場合に下線の太さがどのように変化するかを確認するデモです。
p {
color: darkgray;
font-family: 'Hiragino Sans', sans-serif;
text-decoration-line: underline;
text-decoration-color: red;
}
.auto { text-decoration-thickness: auto }
.from-font { text-decoration-thickness: from-font }
.length { text-decoration-thickness: 1px }
.percentage { text-decoration-thickness: 20% }
.s { font-size: 10px }
.m { font-size: 16px }
.l { font-size: 24px }
.xl { font-size: 32px }
<div>
<p class="auto s">自動</p>
<p class="auto m">自動</p>
<p class="auto l">自動</p>
<p class="auto xl">自動</p>
</div>
<div>
<p class="from-font s">フォント依存</p>
<!-- 文字の大きさを変えつつ繰り返し -->
</div>
<div>
<p class="length s">長さ</p>
<!-- 文字の大きさを変えつつ繰り返し -->
</div>
<div>
<p class="percentage s">パーセンテージ</p>
<!-- 文字の大きさを変えつつ繰り返し -->
</div>
auto
が指定されたテキスト(「自動」)は、見慣れた線の太さで、フォントサイズに応じて太くなっています。一方、from-font
と1px
が指定されたテキスト(「フォント依存」と「長さ」)は、フォントサイズにかかわらず一定の太さで描画されています。20%
が指定されたテキスト(「パーセンテージ」)は、フォントサイズが大きくなるほど、その太さが顕著になります。
次のfrom-font
がauto
になる例です。
text-decoration-thickness
にfrom-font
を指定し、フォント指定を変更したデモを作ってみました。ヒラギノとOsaka、それぞれのフォント指定で下線がどのように描画されるか見ていきましょう。
p {
color: darkgray;
}
.hiragino {
font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: from-font;
}
.osaka {
font-family: "Osaka", sans-serif;
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: from-font;
}
OpenTypeフォントであるヒラギノ角ゴシックが指定されたテキストの下線は、文字の大きさが変わっても一定の線の太さです。一方、TrueTypeフォントのOsakaは、auto
が指定されたときと同じように文字の大きさに合わせて下線が太くなっています。
また、Firefoxの場合、Osakaの下線はChromeとは異なる描画になります。
このように、from-font
キーワードは、フォントによって描画が変わる特性を持ちます。使い所としては、下線の太さも含めてフォントを選択する場合となるでしょう。電子書籍などテキスト主体の場合に有効かもしれません。
まとめ
今回は古典的なtext-decoration
プロパティと、現代の同名プロパティの違いを解説しました。
新しい指定をしながらも古い環境にも対応したい場合は、最初のほうで述べたように、古いtext-decoration
を先に指定し、新しいプロパティを後に書くことで実現できるでしょう。
次回は下線を指定した場合の、下線の位置を調整するプロパティを紹介します。