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独自の値）
広告