loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS3】”縦書き”表現に挑戦してみる
この記事は約7分で読めます。

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

投稿日:2015.12.19

テキスト形式の縦書きのページ(サイト)作りですが、
ようやく敷居が低くなってきた感があるかなぁと思って
ちょっと調べてみました。

SIRIUSレビューイメージ画像

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

そもそも全部が縦書きのサイトなんて私は見たことがありません。
大抵が一部だけでしょう。

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

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

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

じゃあなんでテキストでの縦書きにこだわってるかと言えば、、、
縦書きがかもしだす独特の雰囲気っていうのが好きだからです。

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

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

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

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

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

 

スポンサーリンク

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

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

はっきり言って時間と手間しかかからなかったんです。
そこまでしてやるべきもんでもなかったんです。

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

 

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

 

※全角数字(スタイル設定なし)→これから寒い冬を迎えるにあたって機のストーブと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: 999px”の部分はご利用のテーマ(テンプレート)によって
数字を変える必要があります。

★数字の表示ですが、例文中の《半角数字(スタイル設定あり)》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がこちら↓になります。
この設定で例文のような縦書きが表示されてます。

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LAW (TCD031)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

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

先頭へ