HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


下線の位置を調整する

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要素にクラス指定で上線を引く サンプル