下線の位置を調整する

text-underline-position

CSSの書き方

text-underline-position:値 ;

CSSの詳細情報
プロパティ名 text-underline-position 読み方 テキスト・アンダーライン・ポジション
初期値 below 意味 下線位置調整
below(下線)/above(上線)
対象 すべての要素
CSSレベル なし 対応ブラウザ Windows MAC
継承 する IE 5.5以上

解説

「text-decorationプロパティ」と同時に記述することで、文字に下線を引くか上線を引くか指定するスタイルシートです。

設定可能な値は「below(下線」)」もしくは「above(上線)」です。

ただし、このプロパティはInternetExplorer独自のCSSであり、その他のブラウザは対応していません。

CSSレベル1の「text-decorationプロパティ」で同様のことができますので、あまり使用しない方が良いでしょう。

単体では動作しない

text-underline-positionプロパティは、単体では動作しません。

あくまで、「text-decorationプロパティの設定プロパティですので、必ず、「text-decorationプロパティ」と同時に記述する必要があります。

CSSレベル3で標準化

text-underline-positionは、CSSレベル3で正式に標準化される見通しです。

ただし、この書式とは異なる内容になるそうです。

CSS/HTMLサンプル

span.over { text-decoration:underline ; text-underline-position:above; }

SPAN要素にクラス指定で上線を引く サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!