text-underline-position:文字の下に引かれる装飾線の位置を指定する
初期値 | auto |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
text-underline-positionプロパティの説明
text-underline-position
は、文字の下に引かれる装飾線の位置を指定します。具体的には、text-decoration
のunderline
が表示される位置を調整します。
本プロパティで得られる効果はごくわずかです。これは任意のオフセット値でアンダーラインの位置を自由に動かせるものではなく、あらかじめ定義されている位置から選択するものです。
ただし、縦書きモードの場合はアンダーラインを引く位置を左右から選べます。これは言語や読み進める方向によって、可読性を高めるための重要な機能になるでしょう。
text-shadowに指定できる値
- auto
- ブラウザの自動的な処理に任せます。多くの場合、文字のベースラインか、その下に表示します。
- from-font
- フォントファイルに装飾線の推奨位置を示す情報があった場合はそれを使用します。その情報が見つからない場合は
auto
と同じ仕組みとなります。 - under
- 装飾線を文字の下、ディセンダーを越えない位置に表示します。
- left
- 縦書きモードの場合に、装飾線を文字の左に表示します。
- right
- 縦書きモードの場合に、装飾線を文字の右に表示します。
text-underline-positionの使い方とサンプル
text-underline-position
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/* 複数のキーワード */
text-underline-position: under left;
text-underline-position: right under;
/* グローバル値 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: unset;
text-underline-positionの実例
それでは実際にtext-underline-position
プロパティの書き方を見ていきましょう。以下の例は、アンダーラインの表示位置の違いを単純に比較したものです。値をunder
にした場合は、可読性を維持するために少し離れた位置に表示されます。
表示確認
CSS
.samp_box {
padding: 1rem;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background: #fff;
}
section h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
font-size: 3rem;
}
p > u {
text-decoration: underline;
}
.tup_1 p {
text-underline-position: auto;
}
.tup_2 p {
text-underline-position: under;
}
HTML
<div class="samp_box">
<section class="tup_1">
<h1>text-underline-position: auto;</h1>
<p><u>6</u> <u>9</u> <u>N</u> <u>U</u></p>
</section>
<section class="tup_2">
<h1>text-underline-position: under;</h1>
<p><u>6</u> <u>9</u> <u>N</u> <u>U</u></p>
</section>
</div>
縦書きモードの装飾線の位置を指定する
縦書きモードのテキストにアンダーラインを引く場合は、2つ目の値を使用して表示する位置を変えられます。
表示確認
CSS
.samp_box {
padding: 1rem;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background: #fff;
}
section h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
}
p[class="vtext"] {
writing-mode: vertical-rl;
}
p > u {
text-decoration: underline;
}
.tup_1 p {
text-underline-position: auto;
}
.tup_2 p {
text-underline-position: under left;
}
HTML
<div class="samp_box">
<section class="tup_1">
<h1>text-underline-position: auto;</h1>
<p>横書きで<u>装飾線を表示</u>します。</p>
<p class="vtext">縦書きで<u>装飾線を表示</u>します。</p>
</section>
<section class="tup_2">
<h1>text-underline-position: under left;</h1>
<p>横書きで<u>装飾線を表示</u>します。</p>
<p class="vtext">縦書きで<u>装飾線を表示</u>します。</p>
</section>
</div>
text-underline-positionに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |