VIDEO LESSON

CSSのmin-inline-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:51動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ミンインラインサイズです。
0:07これは、インライン方向の最小の大きさ、つまり下限を指定するプロパティです。
0:13普段の横書きでは、インライン方向は文字が進む左右の方向なので、対象になるのは要素の横幅の下限です。
0:21箱がどこまで縮んでよいかを決めるため、狭い画面でも潰れすぎないようにする場面や、
0:26逆に縮むことを許可する場面で使われます。
0:31この動画では、基本の書き方から、値の種類、実例での比較、そして効かないときの確認までを順番に見ていきます。
0:39十六レムとゼロを比べて、縮める幅の下限だけが変わる様子を確認しましょう。
0:45まず基本の書き方です。
0:47スライドのように、対象のクラスにミンインラインサイズと書き、コロンのあとに値を置き、
0:52最後にセミコロンを付けます。
0:56これは通常の宣言と同じ形です。
0:59例では十六レムを指定しているので、横書きでは要素の幅が十六レムより小さくなることはありません。
1:06親がそれより狭くても、この下限が優先され、箱は十六レムを保とうとします。
1:12あくまで下限なので、内容や親の幅によってそれより広くなることはあります。
1:18下限を決める、という役割がこのプロパティの中心です。
1:22ここで、論理プロパティという考え方を押さえましょう。
1:27従来のミンウィドゥスは、画面の横幅という物理的な方向で下限を決めていました。
1:34これに対してインラインは、文章の流れを基準にした論理的な方向です。
1:40インラインは文字が進む方向、ブロックは段落が積み重なる方向を表します。
1:46横書きで左から右へ読む日本語や英語では、インライン方向は横です。
1:52しかし縦書きでは文字が上から下へ進むため、インライン方向は縦になり、ミンインラインサイズは高さ側の下限として働きます。
2:02書字方向に応じて効く辺が切り替わるのが、論理プロパティの特徴です。
2:08指定できる値を見てみましょう。
2:11代表的なのは、オート、長さ、そして割合です。
2:15オートは、要素の種類や配置方法によって自動で下限が決まる指定です。
2:21長さでは、レムやピクセルなどで下限を直接決めます。
2:25十六レムなら、その寸法がそのまま横幅の下限になります。
2:30割合では、包含ブロックのインライン方向の大きさ、横書きでは親の幅を基準に計算されます。
2:37固定した下限にしたいのか、親に合わせて変えたいのか、あるいは自動に任せたいのかで使い分けるのがポイントです。
2:47まずは代表的な三つから試してみましょう。
2:50初期値と継承を確認します。
2:52ミンインラインサイズの初期値はゼロで、仕様上は下限がゼロになっています。
2:57そして、このプロパティは通常、親から子へ継承しません。
3:02親に下限を付けても、子が自動で同じ下限になるわけではないのです。
3:06また共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のゼロに戻す指定です。
3:14アンセットは、継承しない項目なのでイニシャルとして扱われます。
3:18リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。
3:25ただしフレックスやグリッドでは、自動の最小サイズが別に働く場合がある点にも注意しましょう。
3:32ここからは実例です。
3:33エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:40中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
3:46頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:51親のステージがあることで、デモの箱がどこまで縮み、どこで止まるのかを見分けやすくなります。
3:57この土台の上に、幅を狭めた条件を重ねて、最後のミンインラインサイズの行だけを切り替えて比べるのが、
4:02この実例の進め方です。
4:06土台のシーエスエスの続きです。
4:09全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。
4:16デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。
4:24さらに比較のために、ステージの最大幅を十四レムに狭め、はみ出しが見えるようにオーバーフローをオートにし、
4:30デモの幅を百パーセントにします。
4:36この準備があることで、後から下限だけを変えたときの違いがはっきり見えるようになります。
4:43土台と変更行を分けて書くのが、原因を追いやすくするコツです。
4:49では比較です。
4:50最初は十六レムを指定します。
4:52親のステージは十四レムまで狭められていますが、デモの箱は十六レムより小さくなれないため、
4:58親からはみ出し、スクロールで見る形になります。
5:03次に、最後の行の値だけをゼロに置き換えてみましょう。
5:08他の指定はすべて同じです。
5:10今度は下限がなくなるので、箱は親の幅に合わせて縮み、文章は親の範囲の中で折り返します。
5:17変わったのはインライン方向の下限だけ、親の幅や文章そのものは同じ、という点に注目してください。
5:25値を一つだけ変えて比べる方法は、ほかのプロパティにも役立ちます。
5:30活用場面をもう少し掘り下げます。
5:33ミンインラインサイズで特に重要なのが、フレックスボックスやグリッドで、項目が思ったように縮まないときの対処です。
5:42これらの配置では、内容に合わせた自動の最小サイズが働き、長い文章や長い単語があると、
5:48項目が内容より小さくなれず、レイアウトが崩れることがあります。
5:53そんなとき、項目にミンインラインサイズ、ゼロを指定すると、自動の下限が解除され、
5:59親やトラックに合わせて縮めるようになります。
6:04逆に、ボタンやカードを潰したくない場面では、長さで下限を付けて守ります。
6:09なお、物理方向のミンウィドゥスと重ねて書くと、どちらが効いているか分かりにくくなるので、
6:14どちらか一方に統一しましょう。
6:19効かないと感じたときは、まず前提を確認しましょう。
6:23ミンインラインサイズは下限なので、要素がもともとそれより広ければ変化は見えません。
6:30逆に縮まない場合は、フレックスやグリッドの自動最小サイズや、内容そのものの大きさが影響していることがあります。
6:40またミンウィドゥスと混ぜて書くと、競合して分かりにくくなります。
6:45続いて開発者ツールで調べます。
6:48ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
6:57スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値と親の寸法を確認します。
7:06三百二十ピクセル程度の狭い画面や文字拡大でも読めるかも確かめましょう。
7:12最後に互換性とまとめです。
7:13ミンインラインサイズは、クローム五十七以降、エッジ七十九以降、ファイアフォックス四十一以降、
7:19サファリ十二点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
7:26まとめます。
7:26ミンインラインサイズはインライン方向の最小寸法で、横書きでは横幅の下限、
7:31縦書きでは高さ側の下限になり、初期値はゼロで継承はしませんでした。
7:36練習として、十六レムとゼロの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。
7:43関連するマックスインラインサイズやインラインサイズ、ブロックサイズもあわせて学ぶと理解が深まります。
7:50お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

min-inline-sizeの役割と主な指定値を解説。横書きの箱が縮める幅の下限を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのmin-inline-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性 →