WEBVTT

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

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

3
00:00:03.518 --> 00:00:06.890
今回のテーマは、マックスインラインサイズです。

4
00:00:06.890 --> 00:00:12.314
これは、インライン方向の最大の大きさ、つまり上限を指定するプロパティです。

5
00:00:12.314 --> 00:00:19.497
普段の横書きでは、インライン方向は文字が進む左右の方向なので、対象になるのは要素の横幅の上限です。

6
00:00:19.497 --> 00:00:26.240
文章が横に広がりすぎると一行が長くなり読みにくくなるため、行幅を抑える場面でよく使われます。

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

8
00:00:34.009 --> 00:00:39.580
十八レムと百パーセントを比べて、行幅の上限だけが変わる様子を確認しましょう。

9
00:00:39.580 --> 00:00:41.326
まず基本の書き方です。

10
00:00:41.326 --> 00:00:45.928
スライドのように、対象のクラスにマックスインラインサイズと書き、コロンのあとに値を置き、

11
00:00:45.928 --> 00:00:50.530
最後にセミコロンを付けます。

12
00:00:50.530 --> 00:00:52.911
これは通常の宣言と同じ形です。

13
00:00:52.911 --> 00:01:00.370
例では十八レムを指定しているので、横書きでは要素の幅が十八レムを超えて広がることはありません。

14
00:01:00.370 --> 00:01:04.337
親がそれより狭ければ、要素は親の範囲に収まります。

15
00:01:04.337 --> 00:01:08.702
あくまで上限なので、内容が短ければ要素が無理に十八レムまで広がるわけではない、

16
00:01:08.702 --> 00:01:13.066
という点も押さえておきましょう。

17
00:01:13.066 --> 00:01:17.192
上限を決める、という役割がこのプロパティの中心です。

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

19
00:01:22.081 --> 00:01:29.603
従来のマックスウィドゥスは、画面の横幅という物理的な方向で上限を決めていました。

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

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

22
00:01:42.390 --> 00:01:48.408
横書きで左から右へ読む日本語や英語では、インライン方向は横です。

23
00:01:48.408 --> 00:01:59.878
しかし縦書きでは文字が上から下へ進むため、インライン方向は縦になり、マックスインラインサイズは高さ側の上限として働きます。

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

25
00:02:06.084 --> 00:02:08.223
指定できる値を見てみましょう。

26
00:02:08.223 --> 00:02:11.361
代表的なのは、ノーン、長さ、そして割合です。

27
00:02:11.361 --> 00:02:15.211
ノーンは上限を付けないという意味で、これが初期値です。

28
00:02:15.211 --> 00:02:18.776
長さでは、レムやピクセルなどで上限を直接決めます。

29
00:02:18.776 --> 00:02:22.627
十八レムなら、その寸法がそのまま横幅の上限になります。

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

31
00:02:28.759 --> 00:02:33.037
百パーセントなら親いっぱいまで広がってよい、という指定です。

32
00:02:33.037 --> 00:02:39.740
固定した上限にしたいのか、親に合わせて変えたいのかで、長さと割合を使い分けるのがポイントです。

33
00:02:39.740 --> 00:02:42.592
まずは代表的な三つから試してみましょう。

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

35
00:02:44.625 --> 00:02:49.787
マックスインラインサイズの初期値はノーンで、上限は付いていません。

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

37
00:02:54.010 --> 00:02:59.015
親に上限を付けても、子が自動で同じ上限になるわけではないのです。

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

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

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

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

42
00:03:25.604 --> 00:03:27.124
ここからは実例です。

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

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

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

46
00:03:46.126 --> 00:03:53.119
親のステージがあることで、デモの箱がどこまで広がり、どこで止まるのかを見分けやすくなります。

47
00:03:53.119 --> 00:03:57.071
この土台は変えずに、最後のマックスインラインサイズの行だけを切り替えて比べるのが、

48
00:03:57.071 --> 00:04:01.024
この実例の進め方です。

49
00:04:01.024 --> 00:04:05.736
親と子の関係が見える例ほど、上限の働きは理解しやすくなります。

50
00:04:05.736 --> 00:04:07.765
土台のシーエスエスの続きです。

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

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

53
00:04:20.209 --> 00:04:26.431
この準備があることで、後から上限だけを変えたときの行幅の違いがはっきり見えるようになります。

54
00:04:26.431 --> 00:04:31.030
続く別のルールで、デモに対してマックスインラインサイズを指定します。

55
00:04:31.030 --> 00:04:36.170
同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。

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

57
00:04:40.228 --> 00:04:41.391
では比較です。

58
00:04:41.391 --> 00:04:43.716
最初は十八レムを指定します。

59
00:04:43.716 --> 00:04:48.617
ファイルを保存してブラウザーを再読み込みすると、デモの箱は十八レムで止まり、

60
00:04:48.617 --> 00:04:53.517
文章は早めに折り返して、行が短くなります。

61
00:04:53.517 --> 00:04:58.500
次に、最後の行の値だけを百パーセントに置き換えてみましょう。

62
00:04:58.500 --> 00:05:00.660
他の指定はすべて同じです。

63
00:05:00.660 --> 00:05:08.633
今度は親の幅いっぱいまで広がることが許され、文章は長く一行に並び、折り返す位置も後ろへずれます。

64
00:05:08.633 --> 00:05:16.772
変わったのはインライン方向の上限だけ、文章そのものや内側の余白は同じ、という点に注目してください。

65
00:05:16.772 --> 00:05:22.088
値を一つだけ変えて比べる方法は、ほかのプロパティにも役立ちます。

66
00:05:22.088 --> 00:05:24.427
活用場面をもう少し掘り下げます。

67
00:05:24.427 --> 00:05:31.006
マックスインラインサイズが役立つのは、記事本文のように、読みやすい行幅を保ちたい場面です。

68
00:05:31.006 --> 00:05:37.878
画面が広いからといって文章まで横いっぱいに伸ばすと、視線の移動が大きくなり読みにくくなります。

69
00:05:37.878 --> 00:05:42.118
上限を付ければ、大きな画面でも行は適度な長さに収まります。

70
00:05:42.118 --> 00:05:46.797
行の長さを制限する用途では、シーエイチという単位も比較できます。

71
00:05:46.797 --> 00:05:54.545
ただしシーエイチは数字のゼロの字幅を基準にした単位で、日本語の一文字の幅をそのまま表すものではありません。

72
00:05:54.545 --> 00:06:02.148
日本語の文章でそのまま文字数と読み替えないよう注意し、実際の表示で折り返しを確認しながら調整しましょう。

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

74
00:06:06.256 --> 00:06:13.322
マックスインラインサイズは上限なので、要素がもともとそれより狭ければ変化は見えません。

75
00:06:13.322 --> 00:06:19.237
親の幅が狭い場合も、親の範囲が先に効いて上限の違いが見えにくくなります。

76
00:06:19.237 --> 00:06:25.975
またマックスウィドゥスと混ぜて書くと、どちらが効いているのか分かりにくくなります。

77
00:06:25.975 --> 00:06:28.439
続いて開発者ツールで調べます。

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

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

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

81
00:06:51.280 --> 00:06:53.222
最後に互換性とまとめです。

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

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

84
00:07:06.818 --> 00:07:07.714
まとめます。

85
00:07:07.714 --> 00:07:13.093
マックスインラインサイズはインライン方向の最大寸法で、横書きでは横幅の上限、

86
00:07:13.093 --> 00:07:18.471
縦書きでは高さ側の上限になり、初期値はノーンで継承はしませんでした。

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

88
00:07:26.539 --> 00:07:32.515
関連するミンインラインサイズやインラインサイズもあわせて学ぶと理解が深まります。

89
00:07:32.515 --> 00:07:33.860
お疲れさまでした。