WEBVTT

1
00:00:00.000 --> 00:00:00.805
こんにちは。

2
00:00:00.805 --> 00:00:03.221
シーエスエス、リファレンス解説です。

3
00:00:03.221 --> 00:00:06.039
今回のテーマは、バーティカルアラインです。

4
00:00:06.039 --> 00:00:12.882
これは、文章の行の中にある画像や小さなラベルなどが、縦方向にどの高さでそろうかを決めるプロパティです。

5
00:00:12.882 --> 00:00:19.995
文字の横に置いたアイコンが少し浮いて見えたり、色付きのラベルが上下にずれて見えたりした経験はありませんか。

6
00:00:19.995 --> 00:00:22.142
その調整に使うのがこの設定です。

7
00:00:22.142 --> 00:00:26.838
ただし、普通のブロックを親の中央へ持っていくためのものではありません。

8
00:00:26.838 --> 00:00:32.072
この動画では、効く条件と代表的な値の違いを、実例で比べながら順番に解説します。

9
00:00:32.072 --> 00:00:37.708
行の高さや周りの文字の大きさによっても見え方が変わる、細かいけれど大切な調整役です。

10
00:00:37.708 --> 00:00:39.320
まず基本の書き方です。

11
00:00:39.320 --> 00:00:46.357
セレクターを書いたら、バーティカルアラインと書き、コロンのあとに値、最後にセミコロンを付けます。

12
00:00:46.357 --> 00:00:49.435
スライドの例では、ミドルを指定しています。

13
00:00:49.435 --> 00:00:54.712
これで、この要素は行の中で、決められた基準に従って縦位置が調整されます。

14
00:00:54.712 --> 00:01:04.241
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

15
00:01:04.241 --> 00:01:09.958
まずはこの一行を書き、文章の中のラベルの位置がどう変わるか確かめてみましょう。

16
00:01:09.958 --> 00:01:15.968
値のスペルを間違えると宣言ごと無効になるので、書き終わったら一度読み返しましょう。

17
00:01:15.968 --> 00:01:19.593
次に、このプロパティが効く対象を押さえます。

18
00:01:19.593 --> 00:01:25.853
バーティカルアラインが働くのは、主にインラインレベルの要素と、表のセルです。

19
00:01:25.853 --> 00:01:31.125
文章の中の画像やスパン、インラインブロックの箱などが代表例です。

20
00:01:31.125 --> 00:01:39.528
もう一つが、ティーディーやティーエイチといった表のセルで、セルの中身の縦位置を決めるときにも使います。

21
00:01:39.528 --> 00:01:45.624
逆に、通常のブロック要素そのものに指定しても、期待した動きにはなりません。

22
00:01:45.624 --> 00:01:52.873
対象を間違えると効かない原因になるので、まず要素の表示形式を確認する習慣をつけましょう。

23
00:01:52.873 --> 00:01:59.628
画像はもともとインライン要素なので、指定がそのまま効く代表例として覚えやすいです。

24
00:01:59.628 --> 00:02:03.771
ここでは、記事でも比較している二つの代表値を見ます。

25
00:02:03.771 --> 00:02:09.507
ベースラインは初期値で、文字が並ぶときの基準線に要素の下側を合わせます。

26
00:02:09.507 --> 00:02:13.491
多くの場合、指定しなくてもこの状態になっています。

27
00:02:13.491 --> 00:02:17.315
ミドルは、行の中央付近に要素の中心を合わせます。

28
00:02:17.315 --> 00:02:22.255
ただし、親要素の高さのちょうど真ん中という意味ではありません。

29
00:02:22.255 --> 00:02:26.876
小さい文字エックスの高さを基準にした、行の中での中央です。

30
00:02:26.876 --> 00:02:35.003
この違いを知らないと、ミドルなのに中央に来ないと感じやすいので、基準線という考え方を意識してください。

31
00:02:35.003 --> 00:02:41.536
小さい画像を文字の横に置いて切り替えると、この二つの差が一番分かりやすく見えます。

32
00:02:41.536 --> 00:02:43.684
その他の値も見ておきましょう。

33
00:02:43.684 --> 00:02:47.264
トップとボトムは、行全体の上端や下端に合わせます。

34
00:02:47.264 --> 00:02:52.276
テキストトップやテキストボトムは、親の文字の上端や下端を基準にします。

35
00:02:52.276 --> 00:02:57.861
また、サブは下付き、スーパーは上付きのように位置を少し下げたり上げたりします。

36
00:02:57.861 --> 00:03:06.310
さらに、ピクセルなどの長さや、行の高さに対する割合でも指定でき、ベースラインからどれだけずらすかを細かく調整できます。

37
00:03:06.310 --> 00:03:14.186
普段よく使うのはベースラインとミドルですが、目的に合わせて選び分けられるように名前だけでも覚えておきましょう。

38
00:03:14.186 --> 00:03:19.484
数値で指定すると、少しだけ上げたい、下げたいという微調整にも対応できます。

39
00:03:19.484 --> 00:03:21.607
初期値と継承について整理します。

40
00:03:21.607 --> 00:03:24.923
バーティカルアラインの初期値は、ベースラインです。

41
00:03:24.923 --> 00:03:29.168
つまり、何も指定しなければ、要素は文字の基準線に沿って並びます。

42
00:03:29.168 --> 00:03:32.485
そして、このプロパティは親から通常は継承しません。

43
00:03:32.485 --> 00:03:39.118
親にミドルを指定しても、子要素に自動では伝わらないので、そろえたい要素自身に指定する必要があります。

44
00:03:39.118 --> 00:03:42.898
また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

45
00:03:42.898 --> 00:03:46.679
普段は値を直接書くことがほとんどです。

46
00:03:46.679 --> 00:03:50.659
この性質が、効かないと感じるときの確認ポイントにもなります。

47
00:03:50.659 --> 00:03:56.496
仕様上の初期値と、ブラウザーの既定表示が同じとは限らない点も合わせて覚えておきましょう。

48
00:03:56.496 --> 00:03:58.283
ここからは記事の実例です。

49
00:03:58.283 --> 00:04:02.887
エイチティーエムエルでは、ステージというクラスを付けた段落を用意し、その文章の中に、

50
00:04:02.887 --> 00:04:07.492
デモというクラスを付けたスパンのラベルを入れます。

51
00:04:07.492 --> 00:04:10.790
ラベルの中身は、シーエスエスという短い文字です。

52
00:04:10.790 --> 00:04:15.601
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

53
00:04:15.601 --> 00:04:21.236
文章の中に小さな箱が入る構造が、このプロパティを確かめるのにちょうどよい題材です。

54
00:04:21.236 --> 00:04:26.871
比べたいのはバーティカルアラインだけなので、文章などの土台は固定したままにします。

55
00:04:26.871 --> 00:04:32.644
親と子の構造そのものが比較の土台になるので、入れ子の形を先に頭に入れておきましょう。

56
00:04:32.644 --> 00:04:34.517
土台のシーエスエスです。

57
00:04:34.517 --> 00:04:41.383
ステージは最大幅を三十レムにし、デモのラベルには濃い緑の枠線と薄い緑の背景を用意します。

58
00:04:41.383 --> 00:04:49.966
さらに、ディスプレイをインラインブロックにし、ラインハイトを三にして、縦位置の違いが大きく見えるようにします。

59
00:04:49.966 --> 00:04:56.365
最後の行でバーティカルアラインをミドルにすると、ラベルは行の中央付近にそろいます。

60
00:04:56.365 --> 00:05:03.231
次に最後の行だけをベースラインへ置き換えると、ラベルは文字の基準線に合わせて下がります。

61
00:05:03.231 --> 00:05:05.884
この一行の違いが比較ポイントです。

62
00:05:05.884 --> 00:05:10.098
保存して再読み込みし、ラベルの高さに注目してください。

63
00:05:10.098 --> 00:05:16.184
ラベルの周りの余白や行の高さも一緒に変わるので、全体のバランスも見てください。

64
00:05:16.184 --> 00:05:18.202
活用場面を考えてみましょう。

65
00:05:18.202 --> 00:05:23.966
最も身近なのは、見出しや文章の中で、文字の横に小さなアイコン画像を置く場面です。

66
00:05:23.966 --> 00:05:30.019
画像にミドルを指定すると、文字との並びが自然にそろい、浮いて見える違和感が減ります。

67
00:05:30.019 --> 00:05:34.486
記事の例のようなバッジやラベルを文章中に入れるときも同じです。

68
00:05:34.486 --> 00:05:39.818
また、表ではセルにミドルを指定すると、中身がセルの縦の中央に配置されます。

69
00:05:39.818 --> 00:05:46.447
行ごとに高さが違う表でも見た目が整うので、表を作るときの定番の指定として覚えておきましょう。

70
00:05:46.447 --> 00:05:52.356
フォームのラジオボタンやチェックボックスの文字そろえでも、同じ考え方が役立ちます。

71
00:05:52.356 --> 00:05:54.514
効かないと感じたときの注意点です。

72
00:05:54.514 --> 00:05:59.212
まず最も間違えやすいのは、普通のディブを親の中央へ置こうとする使い方です。

73
00:05:59.212 --> 00:06:06.956
バーティカルアラインはブロックの配置を決めるものではないので、その目的ならフレックスやグリッドの配置プロパティを使います。

74
00:06:06.956 --> 00:06:11.780
ミドルも、親の高さの中央ではなく、行の中の基準で決まる点に注意してください。

75
00:06:11.780 --> 00:06:14.446
そのうえで、開発者ツールで順番に調べます。

76
00:06:14.446 --> 00:06:18.763
ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、

77
00:06:18.763 --> 00:06:23.079
コンピューテッドで最終的な値を確認してください。

78
00:06:23.079 --> 00:06:27.396
最後に、三百二十ピクセル程度の狭い画面幅でも読めるか確認しましょう。

79
00:06:27.396 --> 00:06:32.728
対象がインラインレベルかどうか、ディスプレイの値も合わせて確認すると原因が絞れます。

80
00:06:32.728 --> 00:06:34.659
最後に互換性とまとめです。

81
00:06:34.659 --> 00:06:39.213
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

82
00:06:39.213 --> 00:06:43.768
ファイアフォックス一以降、サファリ一以降と、とても古い版から対応が示されていて、

83
00:06:43.768 --> 00:06:48.322
ベースラインとミドルも同様です。

84
00:06:48.322 --> 00:06:50.995
安心して使えるプロパティといえます。

85
00:06:50.995 --> 00:06:51.886
まとめます。

86
00:06:51.886 --> 00:06:56.119
バーティカルアラインは、インライン要素や表セルの縦位置を決める設定で、初期値はベースライン、

87
00:06:56.119 --> 00:07:00.352
継承はしませんでした。

88
00:07:00.352 --> 00:07:07.926
練習として、ミドルとベースラインの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

89
00:07:07.926 --> 00:07:09.262
お疲れさまでした。

90
00:07:09.262 --> 00:07:15.500
関連するラインハイトとディスプレイも一緒に学ぶと、行の中の配置がより正確に読めます。