Lesson 06 IEで見られる縦書きレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

2011.6.23 THU

Webデザイン
表現&技法の
新・スタンダード

Lesson 6

IEで見られる
縦書きレイアウト

	制作・文	境　裕司
＞	To Use	CSS
＞	Browser	IE 5.5over

リキッドレイアウト（Liquid Layout）は、ページの幅をピクセル値などで固定せず、ウィンドウの幅にあわせてテキストや画像を柔軟に再レイアウトする仕組みだ。

現在普及しているWebの標準技術で日本語の縦書きは指定できないが、特定のブラウザが実装している独自仕様で限定的な表現は可能だ。また、FlashやJavaScriptなどを駆使して表現することもできる。

01

Internet Explorer（IE）5.5以降のバージョンには、縦書き・横書きの表記方向を指定できるプロパティが実装されている。国内の出版物は縦組みのレイアウトが多く、ルビなど高度な組版技術が使われているが、Webではほとんど見かけない。また、縦組みを表現するとき、Flashで作成したSWFを埋め込むか、JavaScriptで文字を回転させる等、特殊な処理を行っている場合が多い。このサンプルでは、あえてCSSだけで縦書きを表現してみたい。なお、現在策定中の縦書きに関するCSS3の仕様については、W3Cの「CSS Writing Modes Module Level 3」（http://www.w3.org/TR/css3-writingmodes/）を参照してほしい【1-1】【1-2】。

【1-1】

【1-2】

【1-1】【1-2】縦書きについては、現在策定中の「CSS Writing Modes Module Level 3」で仕様が検討されている。CSS3を採用している電子書籍フォーマット（EPUB）は、最新バージョンが2011年5月に勧告予定。縦書きも実現する見込みだ

02

ここで解説する縦書きレイアウトは、IE5.5以降を対象とする。まず、本文を<div class="box"> <p class="column"> ～ </div></div>でマークアップし、body要素で字体（フォントファミリー）とdirectionプロパティを指定する。directionは、書字方向を指定するためのプロパティである（ブロック要素に対して指定）。 ltr（Left To Right）は左から右方向、rtl（Right To Left）は右から左方向になる。サンプルでは、縦書きで表示するため、「direction:rtl;」と記述する【2-1】【2-2】【2-3】【2-4】。

【2-1】

【2-2】

【2-3】

【2-1】【2-2】【2-3】XHTML ソース。本文を<div>～</div>でマークアップしている

【2-4】CSS ソース。directionプロパティ（書字方向の指定）を使い、右から左方向の値「rt（l Right To Left）」を指定する

03

文字間を調整。<p class="column">～</p>に対して、「direction:ltr; writingmode:tb-rl;」を指定。writing-modeプロパティは、縦横の文字表記の方向を「lr-tb（Left to Right - Top to Bottom）」もしくは「tb-r（l Top to Bottom - Right to Left）」で決める。縦書きで表示したい場合は、値をtb-rlにする【3-1】【3-2】。IE 5.5以降のブラウザ以外では横書きで表示される（【3-3】はSafariの表示結果）。

【3-1】

【3-2】

【3-1】【3-2】writing-mode プロパティ（縦横の文字表記方向）を使い、縦書きの値「tb-r（l Top toBottom - Right to Left）」を指定する

【3-3】

04

width（幅）とheight（高さ）プロパティが指定されていない段落は、ブラウザのウィンドウ可変に対応して文字数や行数を変化させるが、ページの再読み込み（リロード）が必要になる場合があるため、テキストボックスのサイズを決めておいたほうがよい。ここでは、width:42em; height:18em;を指定し、テキストボックスの大きさを固定してい【4-1】【4-2】【4-3】。

【4-1】

【4-2】contentボックス（画像、2つの段落、address要素を含む）の幅を760ピクセルに固定

【4-2】テキストボックのサイズを指定して、大きさを固定しておく。ウィンドウのサイズが変わってもレイアウトは崩れない

【4-3】

05

段落が2つある場合は、2段組みになる。前述したとおり、width（幅）とheight（高さ）プロパティでカラムの大きさを固定しておく。最低限の禁則処理は機能しており、縦中横（半角数字を横書きで表現）も指定できるため、日本語としておかしくないレベルの組版として表示できるようになっている【5-1】【5-2】【5-3】【5-4】。

【5-1】

【5-2】

【5-3】

【5-4】

【5-1】【5-2】【5-3】【5-4】2段組みレイアウトの表示結果。縦中横のCSS指定については、対象とする半角数字を<em>～</em>でマークアップしている（あまりスマートな手法ではないが、特別な表現として扱う）

06

見出しを加えて、完成させる。大見出しであれば、画像で表現してもかまわない。背景画像は、縦書きレイアウトにあわせて配置する。基点は右上になるため、絶対配置で指定する場合は、注意する必要がある。繰り返しになるが、CSSによる縦書き表示は、今のところIE 5.5以降の独自拡張機能を使用するしかない。他のブラウザでは通常の横書きになるため、可読性が低下しない（横書きで表示されても閲覧に支障がない）ように柔軟なデザインを考えてほしい【6-1】。