初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その3 ★ テキスト3 縦書きと傍線（IE5.5以降で有効）

�@) テキストを縦書きで表示する　

writing-mode: <値>;

「writing-mode:」では、テキストを縦書きで表示するか、横書きにするかを指定します。従って<値>は以下の2種類となり、ページに縦書きと横書きを混在させたいような場合にも使い分けが出来ます。また、一行の長さは「height:」で調整します。

lr-tb ... 横書き(左から右へ)

tb-rl ... 縦書き(右から左へ) 

ex.1) p { writing-mode: tb-rl; }

ex2.) p { writing-mode: tb-rl; height: 300px; }

�A) テキストに傍線をつける

text-underline-position: <値>;

テキストに下線や傍線を付ける時にはHTML上で<u></u>を指定するか、CSSで「text-decoration: underline;」を使用しますが、縦書き表示を指定している場合はブラウザのバージョンによって日本語の傍線が左側についてしまうことがあります。そこで、<u></u>や「text-decoration: underline;」と「text-underline-position:」を併用して、傍線が付く位置を指定することができるようになっています。このプロパティに指定できる<値>は、以下の4つです。

below ... 横書きではテキストの下、縦書きではテキストの左に線をつける

above ... 横書きではテキストの上、縦書きではテキストの右に線をつける

auto もしくは auto-pos ... 横書きではテキストの下、縦書きではテキストの右に線をつける （デフォルト※）

※ただし、IE5.5は「auto、auto-pos」に対応していないため、デフォルトが「below」になります。

ex.)   

p { writing-mode: tb-rl; }

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

初級篇2.VOL13. IE独自拡張による設定・その3-2 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その3-4