WEBVTT

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

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

3
00:00:03.954 --> 00:00:06.920
今回のテーマは、ブロックサイズです。

4
00:00:06.920 --> 00:00:11.369
これは、ブロック方向の大きさを指定するプロパティです。

5
00:00:11.369 --> 00:00:18.783
ブロック方向とは、段落が積み重なっていく方向のことで、普段の横書きでは縦方向にあたります。

6
00:00:18.783 --> 00:00:24.386
つまり横書きでは、ブロックサイズは要素の高さを決める指定になります。

7
00:00:24.386 --> 00:00:33.118
この動画では、基本の書き方から、値の種類、実例での比較、そして効かないときの確認までを順番に見ていきます。

8
00:00:33.118 --> 00:00:38.555
八レムとオートを比べて、箱の高さだけが変わる様子を確認しましょう。

9
00:00:38.555 --> 00:00:43.828
あわせて、縦書きにしたときに効く辺がどう変わるかも見ていきます。

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

11
00:00:45.514 --> 00:00:49.576
スライドのように、対象のクラスにブロックサイズと書き、コロンのあとに値を置き、

12
00:00:49.576 --> 00:00:53.638
最後にセミコロンを付けます。

13
00:00:53.638 --> 00:00:55.937
これは通常の宣言と同じ形です。

14
00:00:55.937 --> 00:01:01.762
例では八レムを指定しているので、横書きでは要素の高さが八レムに固定されます。

15
00:01:01.762 --> 00:01:05.594
内容が少なくても高さは八レムを保ち、逆に内容が多くて入りきらない場合は、

16
00:01:05.594 --> 00:01:09.427
あふれ方にも注意が必要です。

17
00:01:09.427 --> 00:01:13.718
高さを直接決める、という役割がこのプロパティの中心です。

18
00:01:13.718 --> 00:01:16.324
まずはこの一行の形を覚えましょう。

19
00:01:16.324 --> 00:01:21.536
セレクターとクラス名が一致しているかも、最初に確かめておきましょう。

20
00:01:21.536 --> 00:01:25.951
ここで、論理プロパティという考え方を押さえましょう。

21
00:01:25.951 --> 00:01:31.554
従来のハイトは、画面の縦という物理的な方向で高さを決めていました。

22
00:01:31.554 --> 00:01:36.987
これに対してブロックは、文章の流れを基準にした論理的な方向です。

23
00:01:36.987 --> 00:01:42.930
ブロックは段落が積み重なる方向、インラインは文字が進む方向を表します。

24
00:01:42.930 --> 00:01:47.345
横書きで上から下へ読む場合は、ブロック方向は縦です。

25
00:01:47.345 --> 00:01:52.269
しかし縦書きでは段落が右から左へ積み重なるため、ブロック方向は横になり、

26
00:01:52.269 --> 00:01:57.193
ブロックサイズは幅側の大きさとして働きます。

27
00:01:57.193 --> 00:02:02.796
書字方向に応じて効く辺が切り替わるのが、論理プロパティの特徴です。

28
00:02:02.796 --> 00:02:05.066
指定できる値を見てみましょう。

29
00:02:05.066 --> 00:02:08.396
代表的なのは、オート、長さ、そして割合です。

30
00:02:08.396 --> 00:02:14.449
オートは、内容や配置方法によって大きさが自動で決まる指定で、初期値でもあります。

31
00:02:14.449 --> 00:02:18.384
長さでは、レムやピクセルなどで大きさを直接決めます。

32
00:02:18.384 --> 00:02:23.076
八レムなら、その寸法がそのままブロック方向の大きさになります。

33
00:02:23.076 --> 00:02:29.583
割合では、包含ブロックのブロック方向の大きさ、横書きでは親の高さを基準に計算されます。

34
00:02:29.583 --> 00:02:35.183
ただし親の高さが決まっていないと、割合が期待通りに働かないこともあります。

35
00:02:35.183 --> 00:02:40.782
固定したいのか、親に合わせたいのか、自動に任せたいのかで使い分けましょう。

36
00:02:40.782 --> 00:02:45.928
まずはこの三つの違いを押さえれば、実例の比較も理解しやすくなります。

37
00:02:45.928 --> 00:02:47.692
初期値と継承を確認します。

38
00:02:47.692 --> 00:02:52.307
ブロックサイズの初期値はオートで、内容に合わせて大きさが決まります。

39
00:02:52.307 --> 00:02:55.972
そして、このプロパティは通常、親から子へ継承しません。

40
00:02:55.972 --> 00:03:00.586
親に大きさを付けても、子が自動で同じ大きさになるわけではないのです。

41
00:03:00.586 --> 00:03:07.237
また共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のオートに戻す指定です。

42
00:03:07.237 --> 00:03:11.445
アンセットは、継承しない項目なのでイニシャルとして扱われます。

43
00:03:11.445 --> 00:03:17.145
リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。

44
00:03:17.145 --> 00:03:23.660
仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点にも注意しましょう。

45
00:03:23.660 --> 00:03:25.243
ここからは実例です。

46
00:03:25.243 --> 00:03:32.523
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

47
00:03:32.523 --> 00:03:39.487
中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。

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

49
00:03:45.027 --> 00:03:50.566
親のステージがあることで、デモの箱の高さの変化を見分けやすくなります。

50
00:03:50.566 --> 00:03:57.689
この土台の上に、最後のブロックサイズの行だけを切り替えて比べるのが、この実例の進め方です。

51
00:03:57.689 --> 00:04:02.279
値以外の条件をそろえることで、違いの原因がはっきりします。

52
00:04:02.279 --> 00:04:06.552
親子構造をそのまま写せば、すぐに試せる状態になります。

53
00:04:06.552 --> 00:04:09.120
土台のシーエスエスの続きです。

54
00:04:09.120 --> 00:04:16.654
全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。

55
00:04:16.654 --> 00:04:24.872
デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。

56
00:04:24.872 --> 00:04:29.666
この時点では、デモの高さはまだ内容に合わせて決まります。

57
00:04:29.666 --> 00:04:37.884
ここに最後の行として、ブロックサイズ、八レムを加えることで、高さだけを固定できるようになります。

58
00:04:37.884 --> 00:04:43.021
土台と変更行を分けて書くのが、原因を追いやすくするコツです。

59
00:04:43.021 --> 00:04:48.328
まずは土台だけを表示して、通常の見え方を確認しておきましょう。

60
00:04:48.328 --> 00:04:52.780
色や枠は、大きさの変化を見やすくするための目印です。

61
00:04:52.780 --> 00:04:53.907
では比較です。

62
00:04:53.907 --> 00:04:56.000
最初は八レムを指定します。

63
00:04:56.000 --> 00:05:00.105
横書きでは高さが八レムに固定されるので、文章が短くても箱はその高さを保ち、

64
00:05:00.105 --> 00:05:04.210
余白のある見た目になります。

65
00:05:04.210 --> 00:05:08.557
次に、最後の行の値だけをオートに置き換えてみましょう。

66
00:05:08.557 --> 00:05:10.650
他の指定はすべて同じです。

67
00:05:10.650 --> 00:05:16.606
今度は高さが内容に合わせて決まるので、文章の量に応じて箱が伸び縮みします。

68
00:05:16.606 --> 00:05:24.173
変わったのはブロック方向の大きさだけ、親の幅や文章そのものは同じ、という点に注目してください。

69
00:05:24.173 --> 00:05:29.807
変更後はファイルを保存して、ブラウザーを再読み込みして確認しましょう。

70
00:05:29.807 --> 00:05:35.120
スクロールせずに全体が見えるかどうかも、違いの手がかりになります。

71
00:05:35.120 --> 00:05:37.695
活用場面をもう少し掘り下げます。

72
00:05:37.695 --> 00:05:45.580
ブロックサイズで固定すると、内容が増えたときに文字があふれたり、窮屈になったりすることがあります。

73
00:05:45.580 --> 00:05:56.041
文章量が変わることが分かっている場合は、固定のブロックサイズよりも、ミンブロックサイズで下限だけを決める方が適する場合があります。

74
00:05:56.041 --> 00:06:01.673
下限なら、最低限の高さを保ちながら、内容が増えれば箱も伸びてくれます。

75
00:06:01.673 --> 00:06:08.915
逆に、バナーやカードのように高さをそろえたい場面では、ブロックサイズでの固定が役立ちます。

76
00:06:08.915 --> 00:06:13.904
内容が固定かどうかで、固定と下限を使い分けるのがポイントです。

77
00:06:13.904 --> 00:06:18.732
迷ったら、内容が増減するかどうかを基準に考えてみてください。

78
00:06:18.732 --> 00:06:22.513
効かないと感じたときは、まず前提を確認しましょう。

79
00:06:22.513 --> 00:06:32.042
横書きではブロックサイズは高さ相当ですが、縦書きでは幅相当になるため、期待した辺と違う辺が変わっていないかを確認してください。

80
00:06:32.042 --> 00:06:38.092
また内容が指定より大きい場合は、固定した大きさからあふれて見えることがあります。

81
00:06:38.092 --> 00:06:40.360
続いて開発者ツールで調べます。

82
00:06:40.360 --> 00:06:48.225
ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、

83
00:06:48.225 --> 00:06:56.090
スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値と親の寸法を確認します。

84
00:06:56.090 --> 00:07:01.384
三百二十ピクセル程度の狭い画面や文字拡大でも読めるかも確かめましょう。

85
00:07:01.384 --> 00:07:03.270
最後に互換性とまとめです。

86
00:07:03.270 --> 00:07:09.509
ブロックサイズは、クローム五十七以降、エッジ七十九以降、ファイアフォックス四十一以降、

87
00:07:09.509 --> 00:07:15.748
サファリ十二点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。

88
00:07:15.748 --> 00:07:16.619
まとめます。

89
00:07:16.619 --> 00:07:20.681
ブロックサイズはブロック方向の寸法で、横書きでは高さ、縦書きでは幅になり、

90
00:07:20.681 --> 00:07:24.744
初期値はオートで継承はしませんでした。

91
00:07:24.744 --> 00:07:31.999
練習として、八レムとオートの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

92
00:07:31.999 --> 00:07:37.657
関連するインラインサイズやミンブロックサイズもあわせて学ぶと理解が深まります。

93
00:07:37.657 --> 00:07:42.010
値の意味を自分の言葉で説明できれば、理解が定着した証拠です。

94
00:07:42.010 --> 00:07:43.316
お疲れさまでした。