writing-modeプロパティ

TOPページに戻る > CSS

スポンサード リンク

writing-modeプロパティ

webでは通常、横書きですが、writing-modeプロパティを使えば、日本語の小説のように縦書きで表示することができます
writing-modeプロパティの値はIE独自の値です。IE独自の値に対応しているブラウザはIEと一部のブラウザのみです

使い方(書式)

セレクタ { writing-mode: 値; }                                    

writing-modeプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 する

プロパティの値 説明
lr-tb 文章を横書きで表示
tb-rl 文章を縦書きで表示

実際の指定方法

p.hoge { writing-mode: lr-tb; }   /* 横書きの文章 */

p.hoge2 { writing-mode: tb-rl; }  /* 縦書きの文章 */

.hogebox {  width: 300px; border: solid 1px #FF6600; }  /* box外枠 */

html部分

<div class="hogebox">
<p class="hoge">横書き、通常の表示</p>
<p class="hoge2">縦書き文章</p>
</div>

実際の表示

横書き、通常の表示

縦書き文章





(C)2012 ホームページ作成無料