VIDEO LESSON

CSSのvertical-alignの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:15動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、バーティカルアラインです。
0:06これは、文章の行の中にある画像や小さなラベルなどが、縦方向にどの高さでそろうかを決めるプロパティです。
0:12文字の横に置いたアイコンが少し浮いて見えたり、色付きのラベルが上下にずれて見えたりした経験はありませんか。
0:19その調整に使うのがこの設定です。
0:22ただし、普通のブロックを親の中央へ持っていくためのものではありません。
0:26この動画では、効く条件と代表的な値の違いを、実例で比べながら順番に解説します。
0:32行の高さや周りの文字の大きさによっても見え方が変わる、細かいけれど大切な調整役です。
0:37まず基本の書き方です。
0:39セレクターを書いたら、バーティカルアラインと書き、コロンのあとに値、最後にセミコロンを付けます。
0:46スライドの例では、ミドルを指定しています。
0:49これで、この要素は行の中で、決められた基準に従って縦位置が調整されます。
0:54エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:04まずはこの一行を書き、文章の中のラベルの位置がどう変わるか確かめてみましょう。
1:09値のスペルを間違えると宣言ごと無効になるので、書き終わったら一度読み返しましょう。
1:15次に、このプロパティが効く対象を押さえます。
1:19バーティカルアラインが働くのは、主にインラインレベルの要素と、表のセルです。
1:25文章の中の画像やスパン、インラインブロックの箱などが代表例です。
1:31もう一つが、ティーディーやティーエイチといった表のセルで、セルの中身の縦位置を決めるときにも使います。
1:39逆に、通常のブロック要素そのものに指定しても、期待した動きにはなりません。
1:45対象を間違えると効かない原因になるので、まず要素の表示形式を確認する習慣をつけましょう。
1:52画像はもともとインライン要素なので、指定がそのまま効く代表例として覚えやすいです。
1:59ここでは、記事でも比較している二つの代表値を見ます。
2:03ベースラインは初期値で、文字が並ぶときの基準線に要素の下側を合わせます。
2:09多くの場合、指定しなくてもこの状態になっています。
2:13ミドルは、行の中央付近に要素の中心を合わせます。
2:17ただし、親要素の高さのちょうど真ん中という意味ではありません。
2:22小さい文字エックスの高さを基準にした、行の中での中央です。
2:26この違いを知らないと、ミドルなのに中央に来ないと感じやすいので、基準線という考え方を意識してください。
2:35小さい画像を文字の横に置いて切り替えると、この二つの差が一番分かりやすく見えます。
2:41その他の値も見ておきましょう。
2:43トップとボトムは、行全体の上端や下端に合わせます。
2:47テキストトップやテキストボトムは、親の文字の上端や下端を基準にします。
2:52また、サブは下付き、スーパーは上付きのように位置を少し下げたり上げたりします。
2:57さらに、ピクセルなどの長さや、行の高さに対する割合でも指定でき、ベースラインからどれだけずらすかを細かく調整できます。
3:06普段よく使うのはベースラインとミドルですが、目的に合わせて選び分けられるように名前だけでも覚えておきましょう。
3:14数値で指定すると、少しだけ上げたい、下げたいという微調整にも対応できます。
3:19初期値と継承について整理します。
3:21バーティカルアラインの初期値は、ベースラインです。
3:24つまり、何も指定しなければ、要素は文字の基準線に沿って並びます。
3:29そして、このプロパティは親から通常は継承しません。
3:32親にミドルを指定しても、子要素に自動では伝わらないので、そろえたい要素自身に指定する必要があります。
3:39また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
3:42普段は値を直接書くことがほとんどです。
3:46この性質が、効かないと感じるときの確認ポイントにもなります。
3:50仕様上の初期値と、ブラウザーの既定表示が同じとは限らない点も合わせて覚えておきましょう。
3:56ここからは記事の実例です。
3:58エイチティーエムエルでは、ステージというクラスを付けた段落を用意し、その文章の中に、
4:02デモというクラスを付けたスパンのラベルを入れます。
4:07ラベルの中身は、シーエスエスという短い文字です。
4:10頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:15文章の中に小さな箱が入る構造が、このプロパティを確かめるのにちょうどよい題材です。
4:21比べたいのはバーティカルアラインだけなので、文章などの土台は固定したままにします。
4:26親と子の構造そのものが比較の土台になるので、入れ子の形を先に頭に入れておきましょう。
4:32土台のシーエスエスです。
4:34ステージは最大幅を三十レムにし、デモのラベルには濃い緑の枠線と薄い緑の背景を用意します。
4:41さらに、ディスプレイをインラインブロックにし、ラインハイトを三にして、縦位置の違いが大きく見えるようにします。
4:49最後の行でバーティカルアラインをミドルにすると、ラベルは行の中央付近にそろいます。
4:56次に最後の行だけをベースラインへ置き換えると、ラベルは文字の基準線に合わせて下がります。
5:03この一行の違いが比較ポイントです。
5:05保存して再読み込みし、ラベルの高さに注目してください。
5:10ラベルの周りの余白や行の高さも一緒に変わるので、全体のバランスも見てください。
5:16活用場面を考えてみましょう。
5:18最も身近なのは、見出しや文章の中で、文字の横に小さなアイコン画像を置く場面です。
5:23画像にミドルを指定すると、文字との並びが自然にそろい、浮いて見える違和感が減ります。
5:30記事の例のようなバッジやラベルを文章中に入れるときも同じです。
5:34また、表ではセルにミドルを指定すると、中身がセルの縦の中央に配置されます。
5:39行ごとに高さが違う表でも見た目が整うので、表を作るときの定番の指定として覚えておきましょう。
5:46フォームのラジオボタンやチェックボックスの文字そろえでも、同じ考え方が役立ちます。
5:52効かないと感じたときの注意点です。
5:54まず最も間違えやすいのは、普通のディブを親の中央へ置こうとする使い方です。
5:59バーティカルアラインはブロックの配置を決めるものではないので、その目的ならフレックスやグリッドの配置プロパティを使います。
6:06ミドルも、親の高さの中央ではなく、行の中の基準で決まる点に注意してください。
6:11そのうえで、開発者ツールで順番に調べます。
6:14ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
6:18コンピューテッドで最終的な値を確認してください。
6:23最後に、三百二十ピクセル程度の狭い画面幅でも読めるか確認しましょう。
6:27対象がインラインレベルかどうか、ディスプレイの値も合わせて確認すると原因が絞れます。
6:32最後に互換性とまとめです。
6:34記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
6:39ファイアフォックス一以降、サファリ一以降と、とても古い版から対応が示されていて、
6:43ベースラインとミドルも同様です。
6:48安心して使えるプロパティといえます。
6:50まとめます。
6:51バーティカルアラインは、インライン要素や表セルの縦位置を決める設定で、初期値はベースライン、
6:56継承はしませんでした。
7:00練習として、ミドルとベースラインの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
7:07お疲れさまでした。
7:09関連するラインハイトとディスプレイも一緒に学ぶと、行の中の配置がより正確に読めます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

vertical-alignの役割と主な指定値を解説。文章の中の色付きラベルの縦位置が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのvertical-alignの使い方：指定値・実例・効かない原因とブラウザー互換性 →