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

最終更新日:2018年06月02日  (初回投稿日:2018年06月02日)

今回は、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 の仕様で使っていて問題無さそう。どのブラウザもこれで対応しています。
そして、新しい仕様でショートハンドになったとしても、他のショートハンドと違って、指定できる値は1個だけ。CSS 2 の書き方が間違いになるわけではないようです。

次回予告

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2018/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.