footer東京都を拠点にしたWebサイト制作。公開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をかけてあげます。class=”kutouten”で囲い、それに対してCSSをかけます。floatをなくして、positionプロパティで相対位置に設定、あとはtopとleftで微調整、という感じです。ただしい位置にきました。まとめなかなか縦書きを組んだりする機会はないですが、たまにこんなかんじに国語の文章っぽいケースがなくはないので備忘録的に。CSS3で草案で出ているwriting-modeでもできるっぽいですが、対応したり未対応だったり、そもそもIE7、8とか使えないじゃん!ってというときはこれ使ってみてください。IE7まで確認済みです。サンプルはこちら:CSSによる文字の縦書きzipファイルダウンロードコード一応コード載せておきます。一人の下人が、羅生門の下で雨やみを待つてゐた。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。