ウェブログ

CSSだけで!文字の縦書きで和テイストなデザインをカンタン実現(サンプル有り)


css-tategaki_101013_113636_AM

css3で「writing-mode」という草案のプロパティがあり、これを使えばcss縦書きが簡単にできる予定らしいですが、Chromeで確認したところまだ対応してないようです。(2013/10時点)

いつ対応になるかわからないし、IE7,8,9でも同じように見せたい!ということもあると思うので、CSS3を使わず縦書きを実装するCSSを組んでみました。超簡単です。CSSビギナーでもわかるCSSしか使ってません。

サンプルとダウンロード

サンプルはこちら:CSSによる文字の縦書き

zipファイルダウンロード

解説

難しいCSSなのかな…と思うことなかれ、超簡単です。

基本はwidthとfloat:right

css-tategaki_css_101013_114727_AM
画像の矢印のところ、ここなんですがwidthを1emにして横幅を文字の1文字分にします。そうすると右にいきたい文字が行くエリアがなくなって、下に行かざるをえないんですね。これで縦書きが完了です。
そしてブロック要素全体(今回はh2自体)を右にもっていきたいので、float:rightしてあげると。
これだけです。あとは細々した調整のためのCSS。簡単でしょ?

句読点を調整

このままでは句点の「。」や、読点の「、」などは位置がズレてしまう。こんなかんじに。
css-tategaki_kutouten_101013_115007_AM
間抜けな位置にきてしまっています。これをもうちょっと右の方にしたいということで、CSSをかけてあげます。
css-tategaki_kutouten_collect_101013_115253_AM
「。」の部分はspan class=”kutouten”で囲い、それに対してCSSをかけます。floatをなくして、positionプロパティで相対位置に設定、あとはtopとleftで微調整、という感じです。

css-tategaki_good_101013_121448_PM
ただしい位置にきました。

まとめ

なかなか縦書きを組んだりする機会はないですが、たまにこんなかんじに国語の文章っぽいケースがなくはないので備忘録的に。CSS3で草案で出ているwriting-modeでもできるっぽいですが、対応したり未対応だったり、そもそもIE7、8とか使えないじゃん!ってというときはこれ使ってみてください。IE7まで確認済みです。

サンプルはこちら:CSSによる文字の縦書き

zipファイルダウンロード

コード

一応コード載せておきます。

HTML

CSS

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり