css3で「writing-mode」という草案のプロパティがあり、これを使えばcss縦書きが簡単にできる予定らしいですが、Chromeで確認したところまだ対応してないようです。（2013/10時点）
いつ対応になるかわからないし、IE7,8,9でも同じように見せたい！ということもあると思うので、CSS3を使わず縦書きを実装するCSSを組んでみました。超簡単です。CSSビギナーでもわかるCSSしか使ってません。
目次
サンプルとダウンロード
解説
難しいCSSなのかな…と思うことなかれ、超簡単です。
基本はwidthとfloat:right
画像の矢印のところ、ここなんですがwidthを1emにして横幅を文字の1文字分にします。そうすると右にいきたい文字が行くエリアがなくなって、下に行かざるをえないんですね。これで縦書きが完了です。
そしてブロック要素全体（今回はh2自体）を右にもっていきたいので、float:rightしてあげると。
これだけです。あとは細々した調整のためのCSS。簡単でしょ？
句読点を調整
このままでは句点の「。」や、読点の「、」などは位置がズレてしまう。こんなかんじに。
間抜けな位置にきてしまっています。これをもうちょっと右の方にしたいということで、CSSをかけてあげます。
「。」の部分はspan class=”kutouten”で囲い、それに対してCSSをかけます。floatをなくして、positionプロパティで相対位置に設定、あとはtopとleftで微調整、という感じです。
ただしい位置にきました。
まとめ
なかなか縦書きを組んだりする機会はないですが、たまにこんなかんじに国語の文章っぽいケースがなくはないので備忘録的に。CSS3で草案で出ているwriting-modeでもできるっぽいですが、対応したり未対応だったり、そもそもIE7、8とか使えないじゃん！ってというときはこれ使ってみてください。IE7まで確認済みです。
コード
一応コード載せておきます。
HTML
CSSによる文字の縦書き
羅生門
或日の暮方の事である。 一人の下人が、羅生門の下で雨やみを待つてゐた。 廣い門の下には、この男の外に誰もゐない。 唯、所々丹塗の剥げた、大きな圓柱に、蟋蟀が一匹とまつてゐる。
CSS
#wrap {
margin: 0 auto;
width: 500px;
font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3','ＭＳ Ｐ明朝','MS PMincho', Georgia, Times, Baskerville, Palatino, serif;
}
h1 {
font-weight: normal;
text-align: center;
}
#tate {
border:1px #ddd solid;
overflow:hidden;
padding: 0 2em;
position:relative;
}
h2, blockquote p, .link {
float:right;
margin-top: 1em;
font-size:1.25em;
}
h2 {
width:1em;
margin: 1em 1em 0 2em;
line-height: 1.5em;
font-size:1.75em;
}
.link {
width:1em;
line-height: 1.2em;
font-size:1em;
position: absolute;
bottom: 2em;
left: 4em;
}
.link a { text-decoration: none;}
#tate em, #tate cite {
display:inline-block;
padding: 0 0 0.5em;
font-style:normal;
}
blockquote p span {
width:1em;
float:right;
display:block;
margin: 0 0.5em;
line-height: 1.1em;
}
.kutouten {
float:none;
margin:0;
position:relative;
left: 0.7em;
top: -0.7em;
}
.kutouten02 {
float: none;
left: 0.7em;
margin: 0;
position: relative;
top: -0.5em;
}
.kanjiothers {
float:none;
margin:0;
}
