WEBVTT

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

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

3
00:00:03.910 --> 00:00:07.006
今回のテーマは、インラインサイズです。

4
00:00:07.006 --> 00:00:13.197
これは、文字が進む方向であるインライン方向の大きさを指定するプロパティです。

5
00:00:13.197 --> 00:00:17.596
普段の横書きでは、インライン方向は横方向にあたります。

6
00:00:17.596 --> 00:00:23.135
つまり横書きでは、インラインサイズは要素の幅を決める指定になります。

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

8
00:00:31.770 --> 00:00:37.798
七十パーセントと十二レムを比べて、箱の幅だけが変わる様子を確認しましょう。

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

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

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

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

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

14
00:00:55.584 --> 00:01:02.970
例では七十パーセントを指定しているので、横書きでは要素の幅が親の幅の七十パーセントになります。

15
00:01:02.970 --> 00:01:08.785
親が広くなれば箱も広くなり、親が狭くなれば箱も狭くなる、連動する指定です。

16
00:01:08.785 --> 00:01:13.185
幅を割合で決める、という役割がこのプロパティの中心です。

17
00:01:13.185 --> 00:01:15.857
まずはこの一行の形を覚えましょう。

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

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

20
00:01:25.239 --> 00:01:30.520
従来のウィドゥスは、画面の横という物理的な方向で幅を決めていました。

21
00:01:30.520 --> 00:01:35.646
これに対してインラインは、文章の流れを基準にした論理的な方向です。

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

23
00:01:41.083 --> 00:01:45.277
横書きで左から右へ読む場合は、インライン方向は横です。

24
00:01:45.277 --> 00:01:54.286
しかし縦書きでは文字が上から下へ進むため、インライン方向は縦になり、インラインサイズは高さ側の大きさとして働きます。

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

26
00:01:59.412 --> 00:02:01.995
指定できる値を見てみましょう。

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

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

29
00:02:12.673 --> 00:02:20.078
割合では、包含ブロックのインライン方向の大きさ、横書きでは親の幅を基準に計算されます。

30
00:02:20.078 --> 00:02:24.556
七十パーセントなら、親の幅の七割が箱の幅になります。

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

32
00:02:29.033 --> 00:02:33.511
十二レムなら、親の幅が変わってもその寸法を保ちます。

33
00:02:33.511 --> 00:02:40.744
親に合わせて伸縮させたいのか、固定したいのか、自動に任せたいのかで使い分けましょう。

34
00:02:40.744 --> 00:02:42.446
初期値と継承を確認します。

35
00:02:42.446 --> 00:02:47.029
インラインサイズの初期値はオートで、内容に合わせて大きさが決まります。

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

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

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

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

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

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

42
00:03:17.276 --> 00:03:18.881
ここからは実例です。

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

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

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

46
00:03:38.949 --> 00:03:44.407
親のステージがあることで、デモの箱の幅の変化を見分けやすくなります。

47
00:03:44.407 --> 00:03:51.792
この土台の上に、最後のインラインサイズの行だけを切り替えて比べるのが、この実例の進め方です。

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

49
00:03:56.448 --> 00:03:58.543
土台のシーエスエスの続きです。

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

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

52
00:04:11.389 --> 00:04:15.438
この時点では、デモの幅はまだ内容や親に合わせて決まります。

53
00:04:15.438 --> 00:04:23.118
ここに最後の行として、インラインサイズ、七十パーセントを加えることで、幅だけを割合で決められるようになります。

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

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

56
00:04:31.636 --> 00:04:32.772
では比較です。

57
00:04:32.772 --> 00:04:35.530
最初は七十パーセントを指定します。

58
00:04:35.530 --> 00:04:39.992
横書きでは幅が親の七割になるので、ブラウザーの幅を変えると箱の幅も一緒に変わり、

59
00:04:39.992 --> 00:04:44.455
文章の折り返し位置も動きます。

60
00:04:44.455 --> 00:04:48.998
次に、最後の行の値だけを十二レムに置き換えてみましょう。

61
00:04:48.998 --> 00:04:51.107
他の指定はすべて同じです。

62
00:04:51.107 --> 00:04:57.435
今度は幅が固定の長さになるので、親が広くても狭くても十二レムを保とうとします。

63
00:04:57.435 --> 00:05:01.654
変わったのはインライン方向の大きさの決め方だけ、親の幅や文章そのものは同じ、

64
00:05:01.654 --> 00:05:05.873
という点に注目してください。

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

66
00:05:11.552 --> 00:05:14.343
縦書きでの違いも確認しましょう。

67
00:05:14.343 --> 00:05:18.965
ライティングモードをバーティカル、アールエルにすると、文字は上から下へ進み、

68
00:05:18.965 --> 00:05:23.587
行は右から左へ積み重なります。

69
00:05:23.587 --> 00:05:30.913
このときインライン方向は縦になるため、インラインサイズは物理的な高さとして働きます。

70
00:05:30.913 --> 00:05:36.494
同じ十二レムでも、横書きでは幅、縦書きでは高さが変わるわけです。

71
00:05:36.494 --> 00:05:43.646
日本語の縦書きコンテンツや、多言語対応を考えるときに、この切り替わりが役立ちます。

72
00:05:43.646 --> 00:05:52.018
逆に、横書きだけを想定して幅のつもりで書くと、縦書きで意図と違う辺が変わって驚くこともあります。

73
00:05:52.018 --> 00:05:55.332
書字方向を意識して使うことが大切です。

74
00:05:55.332 --> 00:05:59.333
効かないと感じたときは、まず前提を確認しましょう。

75
00:05:59.333 --> 00:06:04.455
横書きではインラインサイズは幅相当ですが、縦書きでは高さ相当になるため、

76
00:06:04.455 --> 00:06:09.576
期待した辺と違う辺が変わっていないかを確認してください。

77
00:06:09.576 --> 00:06:14.617
また、ウィドゥスとインラインサイズを両方書くと、書字方向や記述順によって競合し、

78
00:06:14.617 --> 00:06:19.659
後の宣言や条件の方が優先されることがあります。

79
00:06:19.659 --> 00:06:22.059
続いて開発者ツールで調べます。

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

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

82
00:06:38.704 --> 00:06:40.798
最後に互換性とまとめです。

83
00:06:40.798 --> 00:06:47.806
インラインサイズは、クローム五十七以降、エッジ七十九以降、ファイアフォックス四十一以降、

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

85
00:06:54.813 --> 00:06:55.780
まとめます。

86
00:06:55.780 --> 00:07:00.452
インラインサイズはインライン方向の寸法で、横書きでは幅、縦書きでは高さになり、

87
00:07:00.452 --> 00:07:05.123
初期値はオートで継承はしませんでした。

88
00:07:05.123 --> 00:07:13.984
練習として、七十パーセントと十二レムの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

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

90
00:07:20.266 --> 00:07:21.716
お疲れさまでした。