direction・unicode-bidi/逆表示

directionプロパティを使うと表示方向を指定出来ます。unicode-bidiプロパティと合わせて使うと逆向きに表示出来ます。

説明

 directionプロパティにより表示方向を右から表示する事が出来、unicode-bidiプロパティと合わせて使う事で文字を反対から表示出来ます。

directionとunicode-bidi説明

構文

 directionプロパティの構文は以下の通りです。

direction: 表示方向;

 表示方向はltrがデフォルトで左から右に表示します。

 rtlは右から左に表示します。

 directionプロパティの構文は以下の通りです。

unicode-bidi: 文字方向;

 文字方向はnormalがデフォルトで左から右に表示します。

 bidi-overrideを指定すると文字が反対から表示されます。

利用例

 direction利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
direction: rtl;
}

<div>
This is a pen.<br>
これはペンです。
</div>

 上記を表示すると以下になります。

This is a pen.
これはペンです。

 右寄せで表示されます。

 次はunicode-bidiと合わせて使った例です。

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

 HTMLは同じで上記を表示すると以下になります。

This is a pen.
これはペンです。

留意点

 unicode-bidi:bidi-override;だけでは文字は逆から表示されません。

div {
unicode-bidi:bidi-override;
}

<div>
This is a pen.<br>
これはペンです。
</div>

 上記を表示すると以下になります。

This is a pen.
これはペンです。

 このため、unicode-bidiを使う時はdirectionと合わせて使います。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)