(ちょっとメモ)縦書きでの字下げ・下線・リストなどを試してみた

最終更新日:2019年01月16日  (初回投稿日:2019年01月16日)

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

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

【44-1】日本語の縦書きもできちゃう writing-modeプロパティ
【45-2】縦書きでの文字の向きを決める text-orientation
【45-3】縦書きで「縦中横」ができる text-combine-upright
本日のINDEX
  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」で上に揃っているので。

字下げは「text-indent: 1em」をp要素に指定しておけば、各段落の文頭を1文字分下げてくれます。

マージンやパディングの上下左右は縦書きモードでも同じ。要素の上を空けたければ 「padding-top: 3em」などと指定します。

マージンやパディングなどの上下左右は横書きモードのときと同じなんですが、
下揃えにしたいときは 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要素に指定しておけば、各段落の文頭を
  1文字分下げてくれます。</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プロパティは、テキストのライン装飾のプロパティ群のショートハンドです。これらのプロパティは近いうちに(次の次くらい)記事にまとめます。

縦書きでの下線

リンクの下線はデフォルトで右側に付きます。

リンクの下線を左側に付けるには「text-decoration: overline」を使います。

ins要素の下線もデフォルトでは右側です。

ins要素の下線も「text-decoration: overline」で左側に付けられます。

ちなみにdel要素はこんなかんじで違和感なく打ち消し線が表示されます。

<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>要素)は「30cm2」「トレードマークTM」、下付き文字(<sub>要素)は「H2O」でサンプルを作ってみました。

縦書きでの上付き・下付き文字

上付き文字「30cm2」「トレードマークTM」のデフォルト。

「縦中横」にしたら「30cm2」「トレードマークTM」。

下付き文字「H2O」のデフォルト。

「縦中横」にしたら「H2O」。

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

上のサンプルのソースコードです。
縦書きモードの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>)は、マーカーが半角数字なので横向きになっちゃいます。

縦書きでのリスト

  • 番号なしリスト
  • 番号なしリスト
  1. 番号付きリスト
  2. 番号付きリスト

上のサンプルのソースコードです(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プロパティで用意されている値を指定するだけ。

リストマーカーを全角に

  1. 番号付きリスト
  2. 番号付きリスト
  1. 番号付きリスト
  2. 番号付きリスト
  1. 番号付きリスト
  2. 番号付きリスト

上のサンプルのソースコードです。
縦書きモードの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)
とにかくサンプルを見てください。

マーカーの差し替え

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト
  4. 番号付きリスト
  5. 番号付きリスト

上のサンプルのソースコードです。
縦書きモードの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:"1."}  /*全角数字を指定*/
  ol.liZenkaku li:nth-child(2)::before {content:"2."} 
  ol.liZenkaku li:nth-child(3)::before {content:"3."} 
  ol.liZenkaku li:nth-child(4)::before {content:"4."} 
  ol.liZenkaku li:nth-child(5)::before {content:"5."} 
</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:"1."}」という指定なら「liZenkaku」というクラス名の ol要素内の 1番目の li要素内の先頭に「1.」というコンテンツを作る」という指定になります。

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

擬似クラス・疑似要素については、【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つはテキストの書字方向などを操作するプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.