ほんっとにはじめての HTML5 と CSS3

前回まで3回にわけてライティングモードのプロパティを見てきました。
今回は、そのライティングモードでできる縦書きの表示で、字下げや下線、リスト、ルビ、上付き文字・下付き文字、表組み（table）が、どんな表示になるか、どう調整したら良いかをサンプルで試してみます。

前回までの記事はこちら↓

【44-1】日本語の縦書きもできちゃう writing-modeプロパティ

【45-2】縦書きでの文字の向きを決める text-orientation

【45-3】縦書きで「縦中横」ができる text-combine-upright

1. 縦書きでの字下げなど基本の表示
2. 縦書きでのルビ（ruby要素）
3. 縦書きでの下線（リンクや ins要素）
4. 縦書きでの上付き・下付き文字（sup・sub要素）
5. 縦書きでのリスト（ul・ol要素）
   1. olのマーカーを漢数字やカタカナに
   2. olのマーカーを ::before でアラビア数字に変更してみた
6. 縦書きでの表組み（table要素）

縦書きでの字下げなど基本の表示

まずは、縦書きモード（writing-mode: vertical-rl）での padding や、字下げ（text-indent）などがどんな感じで効くか試してみます。

マージンやパディングなどの上下左右は横書きモードのときと同じなんですが、
下揃えにしたいときは text-align: right を指定するのが横書きと違うところ。
デフォルトの「text-align: left」で上に揃っているので逆にするわけです。

上のサンプルの構造です。
わかりやすいように <p>要素は背景色を薄いグレーに、タイトル（<h3>要素）は薄いブルーにしています。
ぐるりと回りを囲んでいる黄緑の部分は、親要素（<div>）のパディングです。

上のサンプルのソースコードはこちら。
CSSの部分（15行目以降）に解説を入れています。

<div class="mihon">
  <h3 class="sampleTitle">縦書きでの挙動を確認</h3>
  <p class="author">作者名など（下揃え）</p>
  <p>
  作者名などを下揃えにしたいときは「text-align: right」を指定します。<br>
  デフォルトの「text-align: left」で上に揃っているので。</p>
  <p>
  字下げは「text-indent: 1em」をｐ要素に指定しておけば、各段落の文頭を
  １文字分下げてくれます。</p>
  <p class="padTop3">
  マージンやパディングの上下左右は縦書きモードでも同じ。要素の上を空けたければ
  「padding-top: 3em」などと指定します。</p>
</div>

<style>
.mihon {
	font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","游明朝","Yu Mincho","HGS明朝E",serif;
	color:black;
	background:#ffc;
	border:solid 1px #ccc;
	margin:1em 0;
	padding:1.5em 2.5em; /*親要素のパディング。上下は1.5em、左右は2.5em*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box; /*ボーダー・パディングも含めて幅を指定するために*/
	width:100%; /*幅は親のスペースの横幅いっぱいに*/
	height:20rem; /*高さを指定しないと長〜いボックスになります*/
	-ms-writing-mode: tb-rl; /*ライティングモード縦書き IE用 */
	-webkit-writing-mode: vertical-rl; /*ライティングモード縦書き webkit */
	writing-mode: vertical-rl; /*ライティングモード縦書き 標準型 */
	letter-spacing: 0.02em; /*文字間の空きを指定 */
	overflow: auto} /*幅が狭い場合、横にスクロールバーが出ます */
.sampleTitle { /*タイトル（ここではh3要素）*/
	font-size:1.8em;
	margin:0 0 0 1.5em}
.mihon p { /*各段落*/
	font-size:1rem;
	line-height:1.8;
	padding:0;
	margin:0 0 0 1.7em; /*左マージンを付けました*/
	text-indent:1em; /*最初の1文字だけ字下げします*/
    }
p.author {text-align:right} /*作者名などの下揃えに*/
p.padTop3 {padding-top:3em} /*段落の上部を空けてみた*/
</style>

縦書きでのルビ（ruby要素）

上のサンプルは、単に <ruby>要素と <rt>要素を使っただけ。デフォルトのままで右側にルビを付けてくれます。
行間（line-height）が狭ければ ルビの入るスペースが自動で空くのも横書きと一緒です。

上のサンプルのソースコードです（HTMLのみ）
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle"><ruby>縦書<rt>たてが</rt></ruby>きでのルビ</h3>
  <p>
  ルビは<ruby>右側<rt>みぎがわ</rt></ruby>に<ruby>付<rt>つ</rt></ruby>きます。<br>
  いたって<ruby>普通<rt>ふつう</rt></ruby>ですね。</p>
</div>

縦書きでの下線（リンクや ins要素）

<a>要素や <ins>要素の「下線」は、縦書きモードだとデフォルトで右側に表示されます。 これを左側に表示するには「text-decoration: overline」と指定します。

text-decorationプロパティは、テキストのライン装飾のプロパティ群のショートハンドです。これらのプロパティは近いうちに（次の次くらい）記事にまとめます。

<a>要素や <ins>要素の下線は、デフォルトスタイルでは text-decoration-lineプロパティ の値が「underline（下線）」です。
これがなぜか 縦書きモードでは右側に来ちゃうので、反対側にしたければ「overline（上線）」に指定し直します。ショートハンドのtext-decorationプロパティで書けばOK。

上のサンプルのソースコードです。
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle">縦書きでの下線</h3>
  <p>
  <a href="#">リンクの下線</a>はデフォルトで右側に付きます。</p>
  <p>
  <a href="#" class="overLine">リンクの下線</a>を左側に付けるには
  「text-decoration: overline」を使います。</p>
  <p>
  <ins><span>ins</span>要素の下線</ins>もデフォルトでは右側です。</p>
  <p>
  <ins class="overLine"><span>ins</span>要素の下線</ins>も
  「text-decoration: overline」で左側に付けられます。</p>
  <p>
  ちなみに<span>del</span>要素は<del>こんなかんじで違和感なく打ち消し線</del>が表示されます。</p>
</div>

<style>
.overLine {text-decoration:overline} /*下線を左側にします*/
.mihon p span { /*「縦中横」の指定です*/
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all}
</style>

縦書きでの上付き・下付き文字（sup・sub要素）

上付き文字（<sup>要素）は「30cm²」「トレードマーク^TM」、下付き文字（<sub>要素）は「H₂O」でサンプルを作ってみました。

上付き文字・下付き文字とも、半角英数字な場合が多いので、縦書きモードだと横向きになってしまいますが、それを無理に「縦中横」にすると可読性が微妙。そのままデフォルトの表示のほうが無難かと思います。

上のサンプルのソースコードです。
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle">縦書きでの上付き・下付き文字</h3>
  <p>上付き文字「30cm<sup>2</sup>」「トレードマーク<sup>TM</sup>」のデフォルト。</p>
  <p>「縦中横」にしたら「<span>30</span><span>cm<sup>2</sup></span>」「トレードマーク<span><sup>TM</sup></span>」。</p>
  <p>下付き文字「H<sub>2</sub>O」のデフォルト。</p>
  <p>「縦中横」にしたら「<span>H<sub class="rightSide">2</sub>O</span>」。</p>
</div>

<style>
.mihon p span { /*「縦中横」の指定です*/
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all}
sub.rightSide {padding-left:1em} /*2が左に寄ってしまうので調整してます*/
</style>

縦書きでのリスト（ul・ol要素）

番号なしリスト（<ul>）は、デフォルトのままで使えますが、番号付きリスト（<ol>）は、マーカーが半角数字なので横向きになっちゃいます。

上のサンプルのソースコードです（HTMLのみ）
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle">縦書きでのリスト</h3>
  <ul>
    <li>番号なしリスト</li>
    <li>番号なしリスト</li>
  </ul>
  <ol>
    <li>番号付きリスト</li>
    <li>番号付きリスト</li>
  </ol>
</div>

olのマーカーを漢数字やカタカナに

番号付きリスト（<ol>）のマーカーの数字を、全角の「漢数字」や「仮名」にすれば「横向き」は解消できます。
これはCSSの list-style-typeプロパティで用意されている値を指定するだけ。

上のサンプルのソースコードです。
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
    <h3 class="sampleTitle">リストマーカーを全角に</h3>
    <ol class="liKanji">
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
    </ol>
    <ol class="liHiragana">
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
    </ol>
    <ol class="liIroha">
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
    </ol>
  </div>
  <style>
    .mihon ol.liKanji li {list-style-type: cjk-ideographic}
    .mihon ol.liHiragana li {list-style-type: hiragana}
    .mihon ol.liIroha li {list-style-type: katakana-iroha}
  </style>

list-style-typeプロパティには上記以外の値も用意されています。
詳しくは、【17-2-2】リスト関連の要素のためのCSSプロパティ をご覧ください。

olのマーカーを ::before でアラビア数字に変更してみた

olのマーカーを普通に「アラビア数字」で表示したい場合、半角だと横向きになってしまうので「全角のアラビア数字」にできないか考えてみました。

疑似要素「::before」でマーカーを差し替える方法があります。
ただしこれだとカウントはしてくれないので、<li>要素に1つ1つマーカーを指定しなければなりません。（なのでちょっと面倒くさいw）
とにかくサンプルを見てください。

上のサンプルのソースコードです。
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle">マーカーの差し替え</h3>
  <ol class="liZenkaku">
    <li>番号付きリスト</li>
    <li>番号付きリスト</li>
    <li>番号付きリスト</li>
    <li>番号付きリスト</li>
    <li>番号付きリスト</li>
  </ol>
</div>
<style>
  ol.liZenkaku li {list-style:none} /*デフォルトのマーカーを無しに*/
  ol.liZenkaku li:nth-child(1)::before {content:"１．"}  /*全角数字を指定*/
  ol.liZenkaku li:nth-child(2)::before {content:"２．"} 
  ol.liZenkaku li:nth-child(3)::before {content:"３．"} 
  ol.liZenkaku li:nth-child(4)::before {content:"４．"} 
  ol.liZenkaku li:nth-child(5)::before {content:"５．"} 
</style>

CSS（12〜17行）の解説です。
まず最初に <li>要素のデフォルトのマーカーを「list-style:none」で無しにします（12行目）

13〜17行は、1つ1つの<li>要素に順番にマーカーを付けています。疑似クラス「:nth-child()」を使っています。
:nth-child(n)は、親要素内のn番目の子要素をセレクタにできます。
li:nth-child(1)なら1番目の<li>要素、li:nth-child(2)なら2番目の...といった具合です。

疑似要素「::before」を使うと、指定した要素の内側の先頭に インライン要素としてコンテンツを生成することができます。
値は「content: "◯◯◯◯"」といった具合で、◯◯◯◯の部分は好きなテキストなどを指定できます。

「ol.liZenkaku li:nth-child(1)::before {content:"１．"}」という指定なら「liZenkaku」というクラス名の ol要素内の 1番目の li要素内の先頭に「１．」というコンテンツを作る」という指定になります。

縦書きモードのリストの場合、数字もピリオド（．）も「全角」にするのが肝心。全角にしておけば横向きになりません。

擬似クラス・疑似要素については、【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

縦書きでの表組み（table要素）

表組み（table要素）を縦書きモード内で使うと、<th>や<td>要素のレイアウトまで「縦書き用」に変わります。

これは↓ 通常モードのテーブル。

これを縦書きモードの中に入れるとこうなります。
自動的にテーブルヘッダー（<th>）が右に揃ってくれて便利ですね。

上のサンプルのソースコードです。
縦書きモードのCSSは最初のサンプルと同じです。

<div class="mihon">
  <h3 class="sampleTitle">縦書きモードのテーブル</h3>
  <table class="sampleTable">
    <tr>
      <th>テーブルヘッダー</th>
      <th>テーブルヘッダー</th>
    </tr>
    <tr>
      <td>テーブルデータ</td>
      <td>テーブルデータ</td>
    </tr>
  </table>
</div>
<style>
table.sampleTable {
	border-style:none;
	margin:0;
	border-spacing:0;
	border-top:1px solid #999;
	border-left:1px solid #999}
table.sampleTable tr th, table.sampleTable tr td {
	font-size:1rem;
	padding:.5em;
	background:#fff;
	border-bottom:1px solid #999;
	border-right:1px solid #999}
</style>

次回予告

さて次回は、 unicode-bidiプロパティ、directionプロパティを見てみましょう。
この2つはテキストの書字方向などを操作するプロパティです。

関連記事

• 【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink
• 【48-1】ライン装飾をしない対象を決める text-decoration-skip
• 【47-4】text-decorationショートハンドプロパティでまとめて指定
• 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
• 【47-2】テキストのライン装飾の色を決める text-decoration-color
• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break