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

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


文字の書き始めの位置を左右指定する

CSSの書き方

direction:値 ;
unicode-bidi:値 ;

CSSの詳細情報
プロパティ名 direction/unicode-bidi 読み方 ディレクション/ユニコード・ビディ
初期値 direction:ltr
unicode-bidi:normal
意味 文字の方向
direction:ltr/rtl
unicode-bidi:normal/embed/bidi-override
対象 すべての要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 する IE 5.5以上/FF1.0/NS7.1/OP8.0 SF(※)

解説

文字の横書きに対する方向を指定するスタイルシートです。日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。これらに対応するため、CSSでは文字の方向を指定するプロパティがあります。

値(direction)

「direction」プロパティで文字の方向を指定します。「direction:ltr;」は左から右へ文字を並べます。一方、「direction:rtl;」とすると、文字が逆転し、右側から左側へ文字が表示されます。

ただし、IEでは日本語の文章に「direction」プロパティを適用しても文字が逆転しません。そこで、ユニコードに対応する「unicode-bidi」プロパティを併用します。

値(unicode-bidi)

「unicode-bidi」プロパティは、Unicodeで定められた規格に対して「direction」プロパティの内容を割り当てるスタイルシートです。「unicode-bidi:normal;」とすると、Unicodeの規格が優先され、「direction」プロパティの値は無視されます。

また、「unicode-bidi:embed;」とすると、この「unicode-bidi」プロパティに対し、「direction」プロパティの値が追加されます。一方、「unicode-bidi:bidi-override;」とすると、Unicodeの規格が無効になり、変わりに「direction」プロパティの値が上書きされます。

したがって、IEでも日本語の文章を反転させるには、「direction:rtl;」、「unicode-bidi:bidi-override;」とします。

文字の方向を変えたときの動作

文字の方向をこれら2つのプロパティによって変えた場合、文章の書き始めは画面の右側になることに注意してください。(サンプル参照)

インライン要素への適用

「direction」プロパティをインライン要素に適用させる場合、「unicode-bidi」プロパティを併用し、かつ値を「embed」もしくは「bidi-override」とする必要があります。

Safariは一部非対応

「unicode-bidi」プロパティはSafariには対応していません。

CSS/HTMLサンプル

p { direction:rtl; unicode-bidi:bidi-override; }

段落要素の文字列を反転させる サンプル