CSSだけで縦書きテキストを実装してみた – アットクリエイト　スタッフブログ

コーディング時にテキストを縦書きで見せたい箇所があったのですが、どうせならこれもCSSだけで実装できないかと探してみました。

JavaScriptで実装した事例は過去にもあったのですが、やはりもっとお手軽に実装できるとありがたいので。

【サンプル】

縦書きＣＳＳ

CSSだけでテキスト縦書きを実装すると
こんな感じになります。
数字だって123,こんな感じに１２３.
英字だってAtCreate，こんな感じですＡｔＣｒｅａｔｅ．
「括弧」や[半角ｶｯｺ]はこんな感じです。
!?#%&@$！？＃％＠＄

【HTML】









<div class="sample01">
だいたい何でも入ります
</div>

【CSS】

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

今回はCSSの「writing-mode」を使用しての実装になります。
テキストの水平・垂直、ブロックやインライン要素の流れる向きを指定できます。
詳細な設定方法はこちらをご確認ください。

上記のサンプルは、シンプルにh2とpだけ使用しています。
半角文字の場合は横になってしまうみたいですが、全角文字なら大丈夫そうです。

こちらのブログでとても丁寧に解説されておりますので、詳しくはそちらもご覧下さい。
そこで画像で解説されていたタグを、いくつかブラウザ上で再現してみました。
是非、実際に様々なブラウザで確認してみてください。

【色々なタグでサンプル】

いろんなタグを試してみましょう

text-align:left

text-align:right

ルビタグ使つかった事ことないんですよね…（３点リーダ）

ストロングタグはこんな感じです。

スモールタグですね。

~~横着とか言わない~~打ち消し線か、忘れてた…

¹エスユーピー^１と₂エスユービー_２です。

テーブル見出し	テーブル見出し
テーブル中	テーブル中

text-alignは、左寄せだと上に、右寄せだと下になるようです。
通常のコンテンツを右に90°回転させたみたいなイメージですね。

サイト全体を縦書きにするなら、もっと色々なタグを、異なるブラウザで検証する必要がありそうですが、とりあえずform系タグには効いてくれないようです。
（おっと、Firefoxでなら効いているみたいですよ）
form系はブラウザごとに大きく異なり、不安定ですね。

ですが要所要所での使用なら、やはりCSSだけで実装してしまった方が良さそうですね。

【参照させていただいたサイト】