CSSだけで縦書きを表現する
和風なwebサイトの場合、縦書きのデザインをすると思います。
以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。
グッと和風感がでますよね!!
縦書きの表現は、画像か1つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。
(IEは独自の表現で出来るようです)
とりあえず、DEMOを作りましたので、そちらご覧ください。
解説
基本的には本当に簡単です。
1 2 3 4 5 | .test{ writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode:vertical-rl; } |
とするだけで縦書きになります。
IEの場合は少し違うのでご注意を。
上記の書き方だと、行は右から左へと流れます。
ちなみにIE9以上から対応しているようですが、
僕の環境ではVirtualBoxのIE8でも確認出来たのですが、DeveloperToolなので信用しないほうがいいかもしれません。
補足
縦書きにした場合、真ん中に寄せるのは、text-alignでもvertical-alignでも無理っぽい感じでした。
marginをかけたい場合は画面上で見た通り、左側であればmargin-left、右側であればmargin-right、でOKでした。
Author Profile
スターフィールド編集部
SHARE