WEBVTT

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

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

3
00:00:03.489 --> 00:00:06.252
今回のテーマは、テキストアラインです。

4
00:00:06.252 --> 00:00:11.922
これは、箱の中で文章の行を左、中央、右のどこに揃えるかを決めるプロパティです。

5
00:00:11.922 --> 00:00:17.592
見出しを中央に置いたり、本文を行頭に揃えたりするときに、毎日のように使います。

6
00:00:17.592 --> 00:00:23.262
今回は、センターで中央揃えにする例と、スタートで行頭揃えにする例を比べながら、

7
00:00:23.262 --> 00:00:28.932
基本の書き方から効かないときの注意点まで、初心者向けに分かりやすく解説します。

8
00:00:28.932 --> 00:00:34.457
一番大切なのは、動くのは行の中身であって、箱そのものではない、という点です。

9
00:00:34.457 --> 00:00:40.854
ここを最初に押さえておくと、設定が効かないと感じる場面でも、原因が見つけやすくなります。

10
00:00:40.854 --> 00:00:46.379
左揃え、中央揃え、右揃えの違いを、実際の画面で比べながら覚えていきましょう。

11
00:00:46.379 --> 00:00:47.762
まず基本の書き方です。

12
00:00:47.762 --> 00:00:51.281
セレクターのあとにプロパティ名、テキストアラインを書き、コロンを挟んで値を一つ書き、

13
00:00:51.281 --> 00:00:54.801
最後にセミコロンを付けます。

14
00:00:54.801 --> 00:00:58.257
スライドの例では、センターを指定しているので、デモというクラスを持つ要素の中の文章が、

15
00:00:58.257 --> 00:01:01.714
行ごとに中央へ揃います。

16
00:01:01.714 --> 00:01:04.856
指定する相手は、文章を包んでいるブロック要素です。

17
00:01:04.856 --> 00:01:10.513
文字そのものではなく、文章の入れ物に指定する、というイメージを持つと分かりやすくなります。

18
00:01:10.513 --> 00:01:14.661
セレクターとクラス名が合っているかを確認しながら、まずはこの形をそのまま書いて、

19
00:01:14.661 --> 00:01:18.809
ブラウザーで中央揃えになる様子を確かめてみましょう。

20
00:01:18.809 --> 00:01:21.951
この一行が、今回のすべての実験の出発点になります。

21
00:01:21.951 --> 00:01:23.786
代表的な値を紹介します。

22
00:01:23.786 --> 00:01:27.151
レフトは左端、ライトは右端に各行を揃えます。

23
00:01:27.151 --> 00:01:32.658
センターは行を箱の中央に寄せ、見出しやボタンの文字で特によく使われます。

24
00:01:32.658 --> 00:01:38.929
ジャスティファイは、行の左右の端がそろうように文字の間隔を調整する、両端揃えです。

25
00:01:38.929 --> 00:01:44.130
新聞や本のような見た目になりますが、最終行は通常、行頭側に揃います。

26
00:01:44.130 --> 00:01:49.177
日本語の本文では、ジャスティファイにすると行ごとに間隔が変わり、かえって読みにくくなる場合もあるので、

27
00:01:49.177 --> 00:01:54.225
用途に合わせて選んでください。

28
00:01:54.225 --> 00:01:59.731
まずはレフト、センター、ライトの三つを使い分けることが、最初の一歩です。

29
00:01:59.731 --> 00:02:02.202
もう二つ、大切な値があります。

30
00:02:02.202 --> 00:02:06.815
スタートは行の始まり側、エンドは行の終わり側に揃えます。

31
00:02:06.815 --> 00:02:11.263
日本語や英語のように左から右へ読む言語では、スタートはレフトと同じ左側、

32
00:02:11.263 --> 00:02:15.711
エンドはライトと同じ右側になります。

33
00:02:15.711 --> 00:02:21.807
一方、アラビア語のように右から左へ読む言語では、スタートは右側になります。

34
00:02:21.807 --> 00:02:28.891
つまり、スタートとエンドは文字の進む方向に合わせて自動で切り替わる、論理的な指定です。

35
00:02:28.891 --> 00:02:34.245
多言語対応のサイトを作る予定がある場合は、レフトやライトよりも、スタートとエンドを優先すると、

36
00:02:34.245 --> 00:02:39.599
言語ごとに書き換える手間が減ります。

37
00:02:39.599 --> 00:02:41.331
基本情報を確認します。

38
00:02:41.331 --> 00:02:45.504
テキストアラインの仕様上の初期値は、文字の方向によってスタート相当になる、

39
00:02:45.504 --> 00:02:49.677
少し特殊な決まり方をしています。

40
00:02:49.677 --> 00:02:53.456
ブラウザーの既定の見た目も、通常は行頭揃えです。

41
00:02:53.456 --> 00:02:56.763
そして、このプロパティは通常、継承します。

42
00:02:56.763 --> 00:03:02.904
親要素にセンターと書けば、その中にある見出しや段落の文章も中央揃えになります。

43
00:03:02.904 --> 00:03:08.258
逆に、子要素でスタートと書き直せば、その部分だけ行頭揃えに戻せます。

44
00:03:08.258 --> 00:03:14.242
インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。

45
00:03:14.242 --> 00:03:20.068
最終的な値は、開発者ツールのコンピューテッドで確認する習慣を付けましょう。

46
00:03:20.068 --> 00:03:25.107
継承の仕組みを知ると、書く場所を工夫して、指定を少なくできます。

47
00:03:25.107 --> 00:03:27.132
ここからは記事の実例です。

48
00:03:27.132 --> 00:03:35.077
エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。

49
00:03:35.077 --> 00:03:39.828
デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、

50
00:03:39.828 --> 00:03:44.579
折り返して複数行になる長さにしてあります。

51
00:03:44.579 --> 00:03:51.901
複数行あると、各行の始まりと終わりの位置の違いがはっきり見えるため、揃え方の比較には最適です。

52
00:03:51.901 --> 00:03:56.419
頭の部分では、スタイルシートをリンクで読み込んでください。

53
00:03:56.419 --> 00:04:04.519
親と子の構造も例の一部なので、この土台は変えずに固定し、次のスライドで変える一行の効果だけを観察します。

54
00:04:04.519 --> 00:04:06.411
土台のシーエスエスです。

55
00:04:06.411 --> 00:04:12.559
ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。

56
00:04:12.559 --> 00:04:19.495
最後の行でテキストアラインにセンターを指定すると、デモの中の各行が箱の中央に集まります。

57
00:04:19.495 --> 00:04:23.436
一行目も二行目も、左右にほぼ同じ余白が残る形です。

58
00:04:23.436 --> 00:04:27.455
ポイントは、デモの箱自体はステージの中で動いておらず、変わったのは箱の中の行の位置だけ、

59
00:04:27.455 --> 00:04:31.475
という点です。

60
00:04:31.475 --> 00:04:40.461
ファイルを保存してブラウザーを再読み込みし、枠の位置はそのままで、文章だけが中央に寄る様子をよく観察してください。

61
00:04:40.461 --> 00:04:46.451
色や余白の土台は、行の動きを見やすくするためのもので、主役は最後の一行です。

62
00:04:46.451 --> 00:04:51.168
次に最後の行だけを、センターからスタートへ置き換えます。

63
00:04:51.168 --> 00:04:56.895
すると、同じ箱の中で、各行が一斉に行頭側、つまり左側に揃い直します。

64
00:04:56.895 --> 00:05:01.275
箱の幅も、枠の位置も、背景色も一切変わっていません。

65
00:05:01.275 --> 00:05:03.971
変わったのは行の揃え方だけです。

66
00:05:03.971 --> 00:05:08.856
この対比が、テキストアラインの役割を一番よく表しています。

67
00:05:08.856 --> 00:05:13.741
中央揃えは目立たせたい短い見出し向き、行頭揃えは長い本文向き、という使い分けも、

68
00:05:13.741 --> 00:05:18.627
この実験を通して実感できるはずです。

69
00:05:18.627 --> 00:05:27.892
変更後はファイルを保存してブラウザーを再読み込みし、二つの見え方を自分の言葉で説明できるか試してみてください。

70
00:05:27.892 --> 00:05:30.131
間違えやすい点を確認します。

71
00:05:30.131 --> 00:05:37.646
一番多い誤解は、テキストアラインのセンターで箱そのものが中央に移動すると思ってしまうことです。

72
00:05:37.646 --> 00:05:44.043
実際には、箱の幅が親いっぱいに広がっている場合、行を中央にしても箱は動きません。

73
00:05:44.043 --> 00:05:53.477
幅のある箱自体を中央に置きたいときは、幅を指定したうえで、マージンインラインにオートを指定する方法を検討してください。

74
00:05:53.477 --> 00:06:00.193
指定が効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、

75
00:06:00.193 --> 00:06:06.909
コンピューテッドの順に調べ、対象のクラスや別の宣言による上書きがないかを確認しましょう。

76
00:06:06.909 --> 00:06:10.907
狭い画面幅や文字拡大でも読めるかの確認も大切です。

77
00:06:10.907 --> 00:06:17.623
特に、親から継承した値が残っていないか、という視点は忘れやすいので注意してください。

78
00:06:17.623 --> 00:06:20.125
ブラウザー互換性を確認します。

79
00:06:20.125 --> 00:06:26.545
記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、

80
00:06:26.545 --> 00:06:32.966
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

81
00:06:32.966 --> 00:06:38.802
アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。

82
00:06:38.802 --> 00:06:42.721
値ごとに見ても、センターはクローム一以降、スタートはサファリ三点一以降など、

83
00:06:42.721 --> 00:06:46.640
古くから使えます。

84
00:06:46.640 --> 00:06:51.477
とても歴史の長いプロパティなので、今回比べたセンターとスタートを含む基本の値は、

85
00:06:51.477 --> 00:06:56.313
安心して使えると考えてよいでしょう。

86
00:06:56.313 --> 00:07:01.483
ただし、新しい値を使う場合は、値ごとの対応も確認してください。

87
00:07:01.483 --> 00:07:06.986
対応表は、プロパティ本体と値ごとの記録を分けて読むことが大切です。

88
00:07:06.986 --> 00:07:08.813
最後に練習とまとめです。

89
00:07:08.813 --> 00:07:09.726
まとめます。

90
00:07:09.726 --> 00:07:16.577
テキストアラインは、ブロックの中で行の揃え方を決めるプロパティで、親から子へ継承しました。

91
00:07:16.577 --> 00:07:24.797
センターで中央揃え、スタートで行頭揃えになる例を比べ、箱は動かず行だけが動くことを確認できた点が大切でした。

92
00:07:24.797 --> 00:07:29.288
練習として、まず二つの値の違いを言葉で説明し、次に文章量や親の幅だけを変えて、

93
00:07:29.288 --> 00:07:33.779
結果がどう変わるかを比べてみてください。

94
00:07:33.779 --> 00:07:35.149
お疲れさまでした。

95
00:07:35.149 --> 00:07:42.000
関連するフォントやラインハイトも一緒に学ぶと、文章まわりの整え方の理解がさらに深まります。

96
00:07:42.000 --> 00:07:47.176
値を一つずつ変えて比べる練習を重ねることが、確かな理解への近道です。