トップページ  > CSS  > text-underline-position

★CSSリファレンス

text-underline-position …… テキスト傍線の表示位置を指定する
広告

text-underline-positionプロパティは、テキスト傍線の表示位置を指定する際に使用します。

text-underline-positionプロパティの指定は、祖先要素で指定された下線には影響しません。

値に left または right が単独で指定されている場合、同時に under も指定されていることになります。

■値

auto
アルファベットのベースライン、または、その下に傍線が引かれる。 それ以外の詳細は、ユーザエージェントが決定する(初期値)
under
テキストの下に傍線が引かれる。傍線はアルファベットの「g」が持つような下に伸びた部分を横切らず、その下に傍線が引かれる
left
縦書きモードでは左側に傍線が引かれる。横書きモードでは under と同じ
right
縦書きモードでは右側に傍線が引かれる。横書きモードでは under と同じ

■初期値・適用対象・値の継承

初期値
auto
適用対象
すべての要素
値の継承
する

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample {text-decoration: underline;}

HTMLソース

<p class="sample" style="text-underline-position: auto;">
text-underline-position: auto; を指定
</p>

<p class="sample" style="text-underline-position: under;">
text-underline-position: under; を指定
</p>

<p class="sample" style="text-underline-position: left;">
text-underline-position: left; を指定
</p>

<p class="sample" style="text-underline-position: right;">
text-underline-position: right; を指定
</p>
↓↓↓

ブラウザ上の表示

text-underline-position: auto; を指定

text-underline-position: under; を指定

text-underline-position: left; を指定

text-underline-position: right; を指定

■Internet Explorer独自の値

text-underline-positionプロパティは、もともとはInternet Explorerの独自拡張でした。 Internet Explorer限定ですが、以下の値を使用することができるかもしれません。

above
下線をテキストの上に表示する
below
下線をテキストの下に表示する

■Internet Explorer限定の使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample {text-decoration: underline;}

HTMLソース

<p class="sample" style="text-underline-position: above;">
text-underline-position: above; を指定(IE独自の値)
</p>

<p class="sample" style="text-underline-position: below;">
text-underline-position: below; を指定(IE独自の値)
</p>
↓↓↓

ブラウザ上の表示

text-underline-position: above; を指定(IE独自の値)

text-underline-position: below; を指定(IE独自の値)

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ