Blog

CSSだけで縦書きを表現する

2015.12.08Cat:css3 デザイナー

和風なwebサイトの場合、縦書きのデザインをすると思います。
以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。
グッと和風感がでますよね!!


深山山荘オフィシャルサイト

縦書きの表現は、画像か1つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。
(IEは独自の表現で出来るようです)

とりあえず、DEMOを作りましたので、そちらご覧ください。

DEMO

解説

基本的には本当に簡単です。

とするだけで縦書きになります。
IEの場合は少し違うのでご注意を。
上記の書き方だと、行は右から左へと流れます。

ちなみにIE9以上から対応しているようですが、
僕の環境ではVirtualBoxのIE8でも確認出来たのですが、DeveloperToolなので信用しないほうがいいかもしれません。

補足

縦書きにした場合、真ん中に寄せるのは、text-alignでもvertical-alignでも無理っぽい感じでした。

marginをかけたい場合は画面上で見た通り、左側であればmargin-left、右側であればmargin-right、でOKでした。

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ