WEBVTT

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

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

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

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

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

6
00:00:21.415 --> 00:00:26.319
箱がどこまで縮んでよいかを決めるため、狭い画面でも潰れすぎないようにする場面や、

7
00:00:26.319 --> 00:00:31.223
逆に縮むことを許可する場面で使われます。

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

9
00:00:39.887 --> 00:00:45.772
十六レムとゼロを比べて、縮める幅の下限だけが変わる様子を確認しましょう。

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

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

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

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

14
00:00:59.159 --> 00:01:06.833
例では十六レムを指定しているので、横書きでは要素の幅が十六レムより小さくなることはありません。

15
00:01:06.833 --> 00:01:12.710
親がそれより狭くても、この下限が優先され、箱は十六レムを保とうとします。

16
00:01:12.710 --> 00:01:18.587
あくまで下限なので、内容や親の幅によってそれより広くなることはあります。

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

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

19
00:01:27.503 --> 00:01:34.329
従来のミンウィドゥスは、画面の横幅という物理的な方向で下限を決めていました。

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

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

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

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

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

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

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

27
00:02:15.274 --> 00:02:21.031
オートは、要素の種類や配置方法によって自動で下限が決まる指定です。

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

29
00:02:25.392 --> 00:02:30.102
十六レムなら、その寸法がそのまま横幅の下限になります。

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

31
00:02:37.603 --> 00:02:47.023
固定した下限にしたいのか、親に合わせて変えたいのか、あるいは自動に任せたいのかで使い分けるのがポイントです。

32
00:02:47.023 --> 00:02:50.512
まずは代表的な三つから試してみましょう。

33
00:02:50.512 --> 00:02:52.489
初期値と継承を確認します。

34
00:02:52.489 --> 00:02:57.964
ミンインラインサイズの初期値はゼロで、仕様上は下限がゼロになっています。

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

36
00:03:02.070 --> 00:03:06.936
親に下限を付けても、子が自動で同じ下限になるわけではないのです。

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

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

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

40
00:03:25.337 --> 00:03:32.180
ただしフレックスやグリッドでは、自動の最小サイズが別に働く場合がある点にも注意しましょう。

41
00:03:32.180 --> 00:03:33.607
ここからは実例です。

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

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

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

45
00:03:51.447 --> 00:03:57.869
親のステージがあることで、デモの箱がどこまで縮み、どこで止まるのかを見分けやすくなります。

46
00:03:57.869 --> 00:04:02.150
この土台の上に、幅を狭めた条件を重ねて、最後のミンインラインサイズの行だけを切り替えて比べるのが、

47
00:04:02.150 --> 00:04:06.432
この実例の進め方です。

48
00:04:06.432 --> 00:04:09.015
土台のシーエスエスの続きです。

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

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

51
00:04:24.855 --> 00:04:30.709
さらに比較のために、ステージの最大幅を十四レムに狭め、はみ出しが見えるようにオーバーフローをオートにし、

52
00:04:30.709 --> 00:04:36.563
デモの幅を百パーセントにします。

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

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

55
00:04:49.132 --> 00:04:50.294
では比較です。

56
00:04:50.294 --> 00:04:52.618
最初は十六レムを指定します。

57
00:04:52.618 --> 00:04:58.179
親のステージは十四レムまで狭められていますが、デモの箱は十六レムより小さくなれないため、

58
00:04:58.179 --> 00:05:03.739
親からはみ出し、スクロールで見る形になります。

59
00:05:03.739 --> 00:05:08.055
次に、最後の行の値だけをゼロに置き換えてみましょう。

60
00:05:08.055 --> 00:05:10.213
他の指定はすべて同じです。

61
00:05:10.213 --> 00:05:17.351
今度は下限がなくなるので、箱は親の幅に合わせて縮み、文章は親の範囲の中で折り返します。

62
00:05:17.351 --> 00:05:25.152
変わったのはインライン方向の下限だけ、親の幅や文章そのものは同じ、という点に注目してください。

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

64
00:05:30.464 --> 00:05:33.059
活用場面をもう少し掘り下げます。

65
00:05:33.059 --> 00:05:42.143
ミンインラインサイズで特に重要なのが、フレックスボックスやグリッドで、項目が思ったように縮まないときの対処です。

66
00:05:42.143 --> 00:05:48.064
これらの配置では、内容に合わせた自動の最小サイズが働き、長い文章や長い単語があると、

67
00:05:48.064 --> 00:05:53.985
項目が内容より小さくなれず、レイアウトが崩れることがあります。

68
00:05:53.985 --> 00:05:59.013
そんなとき、項目にミンインラインサイズ、ゼロを指定すると、自動の下限が解除され、

69
00:05:59.013 --> 00:06:04.042
親やトラックに合わせて縮めるようになります。

70
00:06:04.042 --> 00:06:09.881
逆に、ボタンやカードを潰したくない場面では、長さで下限を付けて守ります。

71
00:06:09.881 --> 00:06:14.667
なお、物理方向のミンウィドゥスと重ねて書くと、どちらが効いているか分かりにくくなるので、

72
00:06:14.667 --> 00:06:19.452
どちらか一方に統一しましょう。

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

74
00:06:23.734 --> 00:06:30.758
ミンインラインサイズは下限なので、要素がもともとそれより広ければ変化は見えません。

75
00:06:30.758 --> 00:06:40.179
逆に縮まない場合は、フレックスやグリッドの自動最小サイズや、内容そのものの大きさが影響していることがあります。

76
00:06:40.179 --> 00:06:45.660
またミンウィドゥスと混ぜて書くと、競合して分かりにくくなります。

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

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

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

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

81
00:07:12.040 --> 00:07:13.826
最後に互換性とまとめです。

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

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

84
00:07:26.053 --> 00:07:26.878
まとめます。

85
00:07:26.878 --> 00:07:31.617
ミンインラインサイズはインライン方向の最小寸法で、横書きでは横幅の下限、

86
00:07:31.617 --> 00:07:36.357
縦書きでは高さ側の下限になり、初期値はゼロで継承はしませんでした。

87
00:07:36.357 --> 00:07:43.226
練習として、十六レムとゼロの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

88
00:07:43.226 --> 00:07:50.096
関連するマックスインラインサイズやインラインサイズ、ブロックサイズもあわせて学ぶと理解が深まります。

89
00:07:50.096 --> 00:07:51.332
お疲れさまでした。