HOME > ウェブデザイン > 【CSS3】”縦書き”表現に挑戦してみる
記事公開日：2015.12.19
この記事は約8分で読めます。
当ページのリンクにはプロモーションが含まれています。

【CSS3】”縦書き”表現に挑戦してみる

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

旅館などのウェブサイト（ホームページ）でたまに見かけませんか？

縦書きのページを。

実装はかなり大変です。

ところがここにきて”ようやく敷居が低くなってきた感もあるかなぁ”と思ってちょっと調べてみました。

スポンサーリンク

スポンサーリンク

縦書きサイトは必要なの？

そもそも全部が縦書きのサイトなんて私は見たことがありません。

大抵が一部だけでしょう。

老舗の温泉旅館のホームページなんかは、たまに明朝体で紹介文が縦書きで表示されていたりしますね。

でも”テキスト”形式で縦書きで表示されてるのはごく稀で、大方は縦書きにしたテキストを”画像化”したものです。

そっちの方が見栄えもいいし、サイト制作上でもラクでしょうから。

じゃあなんでテキストでの縦書きにこだわってるかと言えば、SEOを気にしてるからってことなんでしょう。

それにテキストなら画像に較べて加筆・修正がラクっていうのもあります。

 

私もいつかはどこかの自サイトで表現したいなぁとず～と思ってはいたんです。

ただなにせ縦書きの表現方法がこれまで私には敷居が高く、何度かトライしたものの面倒過ぎていつの間にか忘れちゃっていたんですね。

それがCSS3が普及するにつれて、その敷居がかなり低くなってきたようなんです。

そこでせっかくなのでこれを機に縦書きの表現に今一度挑戦してみようと思った次第です。

それではお役立ち度ゼロ（？）の話を進めていきましょう。

スポンサーリンク

スポンサーリンク

ちょっとの指定で縦書きが可能に！

これまで縦書きを表現しようと思ったら専用のスクリプトと複雑なHTML、複雑なスタイル設定が必要でした。

はっきり言って時間と手間しかかからなかったんです。

そこまでしてやるべきもんでもなかったんです。

しかしCSS3の”writing-mode”を使えばいとも簡単に縦書きが表示できることをつい最近知りました。

その”writing-mode” を使った縦書き表現がこちら↓です。

※横書きのままだった場合は『縦書きにする』をクリックしてください。

縦書きにする   横書きに戻す

　ある日の事でございます。

　御釈迦様《おしゃかさま》は極楽の蓮池《はすいけ》のふちを独りでぶらぶら御歩きになっていらっしゃいました。
池の中に咲いている蓮の花はみんな玉のようにまっ白で、そのまん中にある金色の蕊《ずい》からは、何とも云えない好い匂いが絶間なくあたりへ溢れております。
極楽は丁度朝なのでございましょう。

　やがて御釈迦様はその池のふちに御佇《おたたず》みになって、水の面《おもて》を蔽《おお》っている蓮の葉の間から、ふと下のようすを御覧になりました。

　この極楽の蓮池の下は、丁度地獄の底に当っておりますから、水晶のような水を透き徹して三途《さんず》の河や針の山の景色が、丁度覗き眼鏡を見るようにはっきりと見えるのでございます。

　するとその地獄の底に”かんだた”と云う男が一人、ほかの罪人と一しょに蠢《うごめ》いている姿が御眼に止まりました。

　この”かんだた”と云う男は、人を殺したり家に火をつけたりいろいろ悪事を働いた大泥坊でございますが、それでもたった一つ善い事を致した覚えがございます。

　と申しますのは、ある時この男が深い林の中を通りますと小さな蜘蛛《くも》が一匹、路ばたを這《は》って行くのが見えました。そこで”かんだた”は早速足を挙げて踏み殺そうと致しましたが、
「いや、いや、これも小さいながら命のあるものに違いない。その命をむやみにとると云う事はいくら何でも可哀そうだ」
と、こう急に思い返して、とうとうその蜘蛛を殺さずに助けてやったからでございます。

　御釈迦様は地獄の様子を御覧になりながら、この”かんだた”には蜘蛛を助けた事があるのを御思い出しになりました。そうしてそれだけの善い事をした報《むくい》には、出来るならこの男を地獄から救い出してやろうと御考えになりました。

　幸い、側を見ますと、翡翠《ひすい》のような色をした蓮の葉の上に、極楽の蜘蛛が一匹、美しい銀色の糸をかけております。
御釈迦様はその蜘蛛の糸をそっと御手に御取りになって、玉のような白蓮《しらはす》の間から遥か下にある地獄の底へ、まっすぐにそれをおろしなさいました。

 

※半角数字（スタイル設定あり）→これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

 

※半角数字（スタイル設定なし）→これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

 

※全角数字（スタイル設定あり）→これから寒い冬を迎えるにあたって３機のストーブと４８個のみかんと７５６人前のおせちを準備しなくてはならない。

 

※全角数字（スタイル設定なし）→これから寒い冬を迎えるにあたって３機のストーブと４８個のみかんと７５６人前のおせちを準備しなくてはならない。

 

※（スタイル設定あり）Google Chromeのみにて確認済み。

 

※（スタイル設定なし）Google Chrome、IE11、FireFox43にて確認済み。

 

いかがでしょう。

ページの一部だけに縦書きレイアウトを含ませるといつもと違った雰囲気を出せるような気がしませんか。

これがゴシック系フォントじゃなく明朝体での表記ならさらに違った雰囲気を出せたんですが、それはまた別の機会に。

スポンサーリンク

スポンサーリンク

縦書き設定

今回はあくまで上記のようなシンプルな縦書きのテキスト表示に限っての設定です。

HTML

縦書き表示のブロックはここでは”tategaki”というクラスで囲ってます。

縦書き表示ブロックの表示位置調整がかなり面倒だったので、マージン等で表示位置を簡単に操作できるよう、縦書き表示ブロックの外をさらに”tategakibox”というクラスで囲ってます。

CSS

縦書きにするには”writing-mode: vertical-rl;”を指定します。

これは「縦書きにして右から左へ行を並べる」という命令だそうです。

でもIE（InternetExplorer）の場合、昔から独自命令があったようで、それが”writing-mode: tb-rl;”という指定。

それとChrome、IE、Firefoxの各ブラウザできちんと縦書き表示させるためにはベンダープレフィックスがまだ必要みたいです。

 

まとめると以下のようなCSSになります。

”width:100%;”で表示領域いっぱいに表示させます。

”overflow:auto;”で表示領域からはみ出た部分は横スクロール表示させます。

”height:100%;”はよくわかりませんが、数字を小さくすることで縦幅を狭めることができます。

全体の表示位置を変えたり表示領域を狭めたいような時は大外の”tategakibox”で調整してあげます。

これでPCでの表示設定は終了です。

Google Chrome47、IE11、FireFox43であれば縦書き表示が確認できるハズです。

スマホ表示ではもう一工夫必要です。

スマホで縦書き表示にしてしまうと左から右へのスワイプしかできない、つまり最初から見直そうと思って右から左にスワイプしても文章の先頭に戻れない現象が起きる場合があります。

そんな時は以下の設定も加えてあげるとスムーズに動くようになります。

”max-width: 768px”の部分はご利用のテーマ（テンプレート）によって数字を変える必要があります。

数字の表記について

数字の表示ですが、例文中の《半角数字（スタイル設定あり）》or《全角数字（スタイル設定あり）》の後に表示されてるように『縦書きに変更はするものの数字は横並びで表示させたい』場合は、”writing-mode: horizontal-tb;”を指定してやります。

（IEはここでも別指定で”writing-mode: lr-tb;”が必要です）

これは「左から右へ、上から下へ垂直方向に」という意味だそうです。

ただしそのままだと”writing-mode”の指定が2重になっちゃうので、ちょっと面倒ですが数字の部分だけ”span class”でいちいち囲む必要があります。

まとめると以下のようなHTMLとCSSになります。

”margin”の部分で文字と数字の空き具合のバランスを調整してます。

数字も Google Chrome47、IE11、FireFox43であれば設定どおりに確認できるハズです。

ローマ字

ローマ字に関しては”text-orientation: upright;”を使えば縦書き表示にはなります。

CSSでは以下のように指定します。

ただこれに関しては IEとFirefoxはどうも無理っぽく、唯一Chromeのみで確認可能のようです。

現状での問題点

・ブラウザが限られる

古いブラウザでは縦書きに対応してないことがあります。

・ルビまでやると大変

ルビを漢字の右側に付けるのはかなり面倒な作業になりそうなので『厳《おごそ》かに』という形式で代用してます。

・ローマ字の縦書きが現状ではChromeのみっぽい

横書きのままでも大した問題ではないと思うのでブラウザの対応を待ちましょう。

・明朝体で表現したい

縦書きと言えば明朝体を思い浮かべますが、好みの明朝体を使うにはwebフォントを利用する必要があります。

ただしライセンス上の問題で、フリー（無料）でwebフォントとして使える日本語明朝フォントはそれほど多くないようです。

webフォント使用上のライセンスが不明というのもあります。

 

というわけで全部を含んだCSSがこちら↓になります。

この設定で例文のような縦書きが表示されてます。

以上です。

ワードプレス有料テーマの探し方画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

はてブ
Pocket
LINE

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）