【32】インラインの縦方向の整列を決める vertical-alignプロパティ

今回は、vertical-alignプロパティについて。
このプロパティは過去記事にもよく登場してきましたが、これは要素の垂直方向（縦方向）の整列の仕方を指定するプロパティです。

vertical（バーティカル）は「垂直の」、align（アライン）は「整列させる」という意味。

ちなみに、水平方向（横方向）の整列の仕方を決めるには text-alignプロパティを使います。
これは次回記事にします。

vertical-alignプロパティは、覚えておかなきゃならない特徴が2つあります。

1つめは、
インライン要素（spanやimgなど）と テーブルセルの要素（thやtdとか）にしか指定できないこと。ブロックレベルの要素に指定しても無効。何も起きません。

もう1つの特徴は、
インライン要素 と テーブルセル で、使える値が違うこと。
インライン要素では使えるけど、テーブルセルには効かない値があったり、デフォルト値もインラインとテーブルセルでは違うので要注意。

今回は、そのへんを詳しく見ていきましょう。

＊インライン要素とは
<a>、<b>、<span>要素など、中身がテキストな要素。
インライン要素の中には「置換要素」というのもあり、これは <img> など 中身がテキストでなく画像など他のファイルに置き換わる要素です。
要は、「display: inline」か「display: inline-block」のスタイルを持っている要素です。
・インライン要素、置換要素については
【9】HTML要素の インラインレベル・ブロックレベル について をご覧ください。
・displayプロパティについては、
【17-1】displayプロパティでボックスの表示形式を自由に変えよう をご覧ください。

＊テーブルセルとは
<th>、<td>要素 など「display: table-cell」のスタイルを持っている要素です。
テーブルセルに vertical-align を使えるおかげで、「ブロックの縦方向のセンター合わせ」もカンタンにできます。
・display: table-cell については
【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく をご覧ください。

本日のINDEX

1. vertical-alignプロパティの値
   1. テーブルセル用の値はちょっと違います
2. vertical-alignプロパティの指定サンプル
   1. インライン要素での vertical-alignプロパティの指定サンプル
      1. baseline
      2. middle
      3. text-top
      4. top
      5. text-bottom
      6. bottom
      7. super
      8. sub
      9. 単位付き数値
      10. パーセンテージ
   2. テーブルセルでの vertical-alignプロパティの指定サンプル
      1. middle
      2. baseline
      3. top
      4. bottom
   3. display: inline-block でも使える
3. vertical-alignはショートハンドになるかも（まだ草案）

参考：
・Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification | W3C
・CSS 2.2 - 17.5.3 Table height algorithms | W3C
・vertical-align - CSS | MDN
・Inline Layout Module Level 3 | W3C（ドラフトの仕様）

vertical-alignプロパティの値

vertical-alignプロパティは、今のところ CSS 2.2 の仕様で各ブラウザが実装していて、いわゆる「CSS 3」での定義はまだドラフトです。
（Inline Layout Module Level 3 で策定中です。2018年6月記）

というわけで、ここでは CSS 2.2 の値をまとめます。
（CSS 3 が勧告されても、2.2 での値や指定の仕方は大幅には変わらないはずです）

vertical-alignプロパティの値
キーワード	baseline がデフォルト値。 middle、text-top、top、text-bottom、bottom、sub、super
単位付き数値	数値に px や em などの単位をつけて指定。マイナスの値も使えます。 ベースラインを0として、正の値なら上、負の値なら下に配置されます。
パーセンテージ	その要素の line-height の値に対する％で指定。マイナスの値も使えます。 ベースラインを0として、正の値なら上、負の値なら下に配置されます
inherit	親の値を継承

値の継承	なし	適用できる要素	インラインレベル要素・テーブルセル要素

テーブルセル用の値はちょっと違います

冒頭でも触れましたが、テーブルセルでの vertical-alignプロパティは、使い方が違うので注意が必要です。

テーブルセルでは、上の表の値のうち、 middle、baseline、top、bottom の4つのキーワードしか使えません。そして、デフォルト値は middle です。

その他の値「sub、super、text-top、text-bottom、単位付き数値、パーセンテージ」をテーブルセルに指定しても、 baseline に揃えられます。

vertical-alignプロパティの指定サンプル

それでは vertical-alignプロパティの全部の値を使ってみます。
インライン要素 と テーブルセル用のサンプルを分けて作ってみました。

インライン要素での vertical-alignプロパティの指定サンプル

以下のサンプルのHTMLはこんなかんじで、<span>要素を入れ子にしています。

<p class="mihon">
  <span>Parent
    <span>Child</span>
  </span>
</p>

ベースのCSSはこんなかんじ。親と子の<span>要素に、それぞれ背景色を指定。フォントサイズも変えています。

p.mihon { /*span要素を囲む p要素です*/
    background:#ff0; /*黄色*/
    font-size:4rem; /*p要素はちょっと大きめの4remにしています*/
    line-height:1.5; /*←これは子孫のspan要素にも継承されます*/
    }
p.mihon span { /*親のspan要素*/
    background:#ace718; /*黄みどり色*/
    font-size:3rem; /*親のサイズは3rem*/
    }
p.mihon span span { /*子のspan要素*/
    background:#50b6ed; /*ブルー*/
    font-size:1rem; /*子のサイズは1rem*/
    }

baseline

baselineがデフォルト値です（vertical-align を指定しなくてもコレになります）
要素のベースラインを、親要素のベースラインと揃えます。
<img>要素などの置換要素はベースラインを持たないので、下端がベースラインに揃えられます。

Parent Child

子の<span>要素に、インラインで vertical-align を指定しています。
（以下のサンプルすべて同じです）

<p class="mihon">
  <span>Parent
    <span style="vertical-align: baseline">Child</span>
  </span>
</p>

ベースラインとは、テキストを揃えるベースになるライン。
アルファベットの小文字の g j y p q（ディセンダー文字）は、ベースラインの下に はみ出して表示されます。

アルファベットのベースラインは alphabetic baseline（アルファベティック　ベースライン）と言い、日本語などのマルチバイト文字のベースラインは ideographic baseline（イデオグラフィック　ベースライン）と言って、位置が少し違います。まあだいたい一緒だけど。
（ちなみに ideographic は「表意文字」のこと）

<img>要素は、下端が alphabetic に揃うそうです。

middle

指定した要素の垂直の中心ラインを、親要素の小文字の中心ラインと揃えます。
もっと正確に言うと、親の x-height（小文字の x の高さ）の半分の高さを親のベースラインに足した位置に、vertical-align: middle を指定した要素の同じライン（ベースライン＋ x-height × 0.5）を揃えます。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: middle">Child</span>
  </span>
</p>

アルファベットの小文字の g j y p q（ディセンダー文字。ベースラインの下にはみ出す）や、アルファベットと日本語のベースラインが若干違うおかげで、日本語の場合 vertical-align: middle を使っても <img>要素とテキストを縦の中央で揃えるのが難しかったりします。

vertical-align: middle だと、<img>要素が下がって見えます。
日本語（middle）

デフォの vertical-align: baseline だと、<img>要素が上がって見える。
日本語（baseline）

そんな時は、後で出て来る 単位付き数値 で指定するとイイ感じです。マイナスの値も使えるので「ちょっとだけ下げる」が可能です
日本語（-0.12em）

<img src="image.gif" style="vertical-align:-0.12em">日本語（-0.12em）

text-top

指定した要素のトップを、親要素のコンテンツ領域のトップに揃えます。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: text-top">Child</span>
  </span>
</p>

top

指定した要素のトップを、親要素ではなく 行全体のトップに揃えます。
下のサンプルでは、親の <span>要素でなく、その親の <p>要素が作っている行（黄色バック）のトップに揃っています。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: top">Child</span>
  </span>
</p>

text-bottom

指定した要素のボトムを、親要素のコンテンツ領域のボトムに揃えます。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: text-bottom">Child</span>
  </span>
</p>

bottom

指定した要素のボトムを、親要素ではなく 行全体のボトムに揃えます。
下のサンプルでは、親の <span>要素でなく、その親の <p>要素が作っている行（黄色バック）のボトムに揃っています。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: bottom">Child</span>
  </span>
</p>

super

要素のベースラインを、親要素の superscript-baseline に揃えます。
superscript（スーパースクリプト）とは「上付き文字」のこと。<sup>要素はこの「vertical-align: super」になっているということです。
（<sup>要素は「font-size: smaller; line-height: normal;」のスタイルもデフォルト指定されています。）

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: super">Child</span>
  </span>
</p>

sub

要素のベースラインを、親要素の subscript-baseline に揃えます。
subscript（サブスクリプト）とは「下付き文字」のこと。<sub>要素はこの「vertical-align: sub」になっているんです。
（<sub>要素は「font-size: smaller; line-height: normal;」のスタイルもデフォルト指定されています。）

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: sub">Child</span>
  </span>
</p>

単位付き数値

要素のベースラインを、親要素のベースラインから「単位付き数値」で指定した分ずらして揃えます。
マイナスの値もOK。下のサンプルは「vertical-align: -0.5rem」で指定しています。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: -0.5rem">Child</span>
  </span>
</p>

パーセンテージ

要素のベースラインを、親要素のベースラインから「親の line-height に対するパーセンテージ」で指定した分ずらして揃えます。
これもマイナスの値OK。下のサンプルは「vertical-align: -50%」で指定しています。

Parent Child

<p class="mihon">
  <span>Parent
    <span style="vertical-align: -50%">Child</span>
  </span>
</p>

テーブルセルでの vertical-alignプロパティの指定サンプル

テーブルセルでの vertical-alignプロパティは、ちょっと使い方が違って、 baseline、top、bottom、middle の4つのキーワードしか使えません。
しかも middle がデフォルト値になります。

他の値（sub、super、text-top、text-bottom、単位付き数値、パーセンテージ）をテーブルセルに適用しても baseline の扱いになります。

middle

テーブルセルだと middle がデフォルト。vertical-align を特に何も指定しなければこれになります。
下のサンプルは、どのセルにも何も指定していません。
セル内に垂直の余白がある場合、このサンプルのようにセルの中心が垂直方向の中央に揃えられるのがデフォルト。

The vertical-align property of each table cell determines its alignment within the row. Each cell's content has a baseline, a top, a middle, and a bottom, as does the row itself.

middle（デフォルト）

<table>
  <tr>
    <td>The vertical-align property of ...</td>
    <td>middle（デフォルト）</td>
  </tr>
</table>

baseline

指定したセルのベースラインを、同じ行の他のセルのベースラインに揃えます。
下のサンプルは、2つのセル両方に「vertical-align: baseline」を指定しています。左のセルには「padding: 2em」も指定しています。右側のセルは隣のセルのテキストのベースラインで揃っていますね。

The vertical-align property of each table cell determines its alignment within the row. Each cell's content has a baseline, a top, a middle, and a bottom, as does the row itself.

baseline

<table>
  <tr>
    <td style="vertical-align:baseline; padding:2em">The vertical-align property of ...</td>
    <td style="vertical-align:baseline">baseline</td>
  </tr>
</table>

top

指定したセルのトップを、同じ行のトップに揃えます。
下のサンプルは、2つのセル両方に「vertical-align: top」を指定。左のセルには「padding: 2em」も指定していますが、右側のセルはトップに揃っていますね。

The vertical-align property of each table cell determines its alignment within the row. Each cell's content has a baseline, a top, a middle, and a bottom, as does the row itself.

top

<table>
  <tr>
    <td style="vertical-align:top; padding:2em">The vertical-align property of ...</td>
    <td style="vertical-align:top">top</td>
  </tr>
</table>

bottom

指定したセルのボトムを、同じ行のボトムに揃えます。
下のサンプルは、2つのセル両方に「vertical-align: bottom」を指定。左のセルには「padding: 2em」も指定していますが、右側のセルはボトムに揃っていますね。

The vertical-align property of each table cell determines its alignment within the row. Each cell's content has a baseline, a top, a middle, and a bottom, as does the row itself.

bottom

<table>
  <tr>
    <td style="vertical-align:bottom; padding:2em">The vertical-align property of ...</td>
    <td style="vertical-align:bottom">bottom</td>
  </tr>
</table>

display: inline-block でも使える

display: inline-block を指定した要素でも試してみます。

下のサンプルは、<div>要素を2つ並べて、両方に display: inline-block を指定。右側の <div>要素に vertical-align のそれぞれの値を指定しています。

DIV

top

DIV

text-top

DIV

middle

DIV

text-bottom

DIV

bottom

上のサンプルのソースコードはこちら。

<div class="iBlock">
<div>DIV</div><div class="vAlign" style="vertical-align:top">top</div>
</div>

<div class="iBlock">
<div>DIV</div><div class="vAlign" style="vertical-align:text-top">text-top</div>
</div>

<div class="iBlock">
<div>DIV</div><div class="vAlign" style="vertical-align:middle">middle</div>
</div>

<div class="iBlock">
<div>DIV</div><div class="vAlign" style="vertical-align:text-bottom">text-bottom</div>
</div>

<div class="iBlock">
<div>DIV</div><div class="vAlign" style="vertical-align:bottom">bottom</div>
</div>

<style>
.iBlock {
    background:#ff0;
    margin:0 0 1.5rem;
    font-size:4rem;
    line-height:1.5}
.iBlock div { /*div.iBlock 内のすべてのdivへの指定*/
    display:inline-block;
    background:#ace718;
    font-size:3rem}
.iBlock div.vAlign { /*右側のdivへの指定*/
    background:#50b6ed;
    font-size:1rem}
</style>

vertical-alignはショートハンドになるかも（まだ草案）

上記までの vertical-alignプロパティは、CSS 2.2 での仕様です。

その次の仕様は「Inline Layout Module Level 3」の中にあり、まだドラフト段階です。
今後どう変わるかわからない状態なんですが、どうも vertical-alignプロパティがショートハンドになりそうなので、一応メモっておきます。（2018年6月の情報です）

まず、vertical-alignプロパティは、新しくできる alignment-baselineプロパティと baseline-shiftプロパティのショートハンドになりそうです。
両方のプロパティの値をどれか1つだけ指定できるそうです。

alignment-baselineプロパティの値は、baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top に、
baseline-shiftプロパティの値は、単位付き数値 | パーセンテージ | sub | super となっています。
（新しく alphabetic、ideographic、central、mathematical、center という値が増えそうですね）

上記とは別に、dominant-baselineプロパティというのが新たにできそうです。
vertical-alignプロパティで整列させるための「ベースライン」をどこにするか指定するためのものだそうです。縦組みの場合などへの対応のために新設されるみたい。
値は、auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top になるようです。

vertical-alignプロパティは、当分 CSS 2 の仕様で使っていて問題無さそう。どのブラウザもこれで対応しています。
そして、新しい仕様でショートハンドになったとしても、他のショートハンドと違って、指定できる値は１個だけ。CSS 2 の書き方が間違いになるわけではないようです。

次回予告

次回は、text-alignプロパティについて。
これは要素の水平方向（横方向）の整列を指定するプロパティです。