SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:34動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、マックスインラインサイズです。
  4. 0:06これは、インライン方向の最大の大きさ、つまり上限を指定するプロパティです。
  5. 0:12普段の横書きでは、インライン方向は文字が進む左右の方向なので、対象になるのは要素の横幅の上限です。
  6. 0:19文章が横に広がりすぎると一行が長くなり読みにくくなるため、行幅を抑える場面でよく使われます。
  7. 0:26この動画では、基本の書き方から、値の種類、実例での比較、そして効かないときの確認までを順番に見ていきます。
  8. 0:34十八レムと百パーセントを比べて、行幅の上限だけが変わる様子を確認しましょう。
  9. 0:39まず基本の書き方です。
  10. 0:41スライドのように、対象のクラスにマックスインラインサイズと書き、コロンのあとに値を置き、
  11. 0:45最後にセミコロンを付けます。
  12. 0:50これは通常の宣言と同じ形です。
  13. 0:52例では十八レムを指定しているので、横書きでは要素の幅が十八レムを超えて広がることはありません。
  14. 1:00親がそれより狭ければ、要素は親の範囲に収まります。
  15. 1:04あくまで上限なので、内容が短ければ要素が無理に十八レムまで広がるわけではない、
  16. 1:08という点も押さえておきましょう。
  17. 1:13上限を決める、という役割がこのプロパティの中心です。
  18. 1:17ここで、論理プロパティという考え方を押さえましょう。
  19. 1:22従来のマックスウィドゥスは、画面の横幅という物理的な方向で上限を決めていました。
  20. 1:29これに対してインラインは、文章の流れを基準にした論理的な方向です。
  21. 1:35インラインは文字が進む方向、ブロックは段落が積み重なる方向を表します。
  22. 1:42横書きで左から右へ読む日本語や英語では、インライン方向は横です。
  23. 1:48しかし縦書きでは文字が上から下へ進むため、インライン方向は縦になり、マックスインラインサイズは高さ側の上限として働きます。
  24. 1:59書字方向に応じて効く辺が切り替わるのが、論理プロパティの特徴です。
  25. 2:06指定できる値を見てみましょう。
  26. 2:08代表的なのは、ノーン、長さ、そして割合です。
  27. 2:11ノーンは上限を付けないという意味で、これが初期値です。
  28. 2:15長さでは、レムやピクセルなどで上限を直接決めます。
  29. 2:18十八レムなら、その寸法がそのまま横幅の上限になります。
  30. 2:22割合では、包含ブロックのインライン方向の大きさ、横書きでは親の幅を基準に計算されます。
  31. 2:28百パーセントなら親いっぱいまで広がってよい、という指定です。
  32. 2:33固定した上限にしたいのか、親に合わせて変えたいのかで、長さと割合を使い分けるのがポイントです。
  33. 2:39まずは代表的な三つから試してみましょう。
  34. 2:42初期値と継承を確認します。
  35. 2:44マックスインラインサイズの初期値はノーンで、上限は付いていません。
  36. 2:49そして、このプロパティは通常、親から子へ継承しません。
  37. 2:54親に上限を付けても、子が自動で同じ上限になるわけではないのです。
  38. 2:59また共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のノーンに戻す指定です。
  39. 3:06アンセットは、継承しない項目なのでイニシャルとして扱われます。
  40. 3:11リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。
  41. 3:18仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点にも注意しましょう。
  42. 3:25ここからは実例です。
  43. 3:27エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  44. 3:34中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  45. 3:40頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  46. 3:46親のステージがあることで、デモの箱がどこまで広がり、どこで止まるのかを見分けやすくなります。
  47. 3:53この土台は変えずに、最後のマックスインラインサイズの行だけを切り替えて比べるのが、
  48. 3:57この実例の進め方です。
  49. 4:01親と子の関係が見える例ほど、上限の働きは理解しやすくなります。
  50. 4:05土台のシーエスエスの続きです。
  51. 4:07全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。
  52. 4:13デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。
  53. 4:20この準備があることで、後から上限だけを変えたときの行幅の違いがはっきり見えるようになります。
  54. 4:26続く別のルールで、デモに対してマックスインラインサイズを指定します。
  55. 4:31同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。
  56. 4:36土台と変更行を分けて書くのが、原因を追いやすくするコツです。
  57. 4:40では比較です。
  58. 4:41最初は十八レムを指定します。
  59. 4:43ファイルを保存してブラウザーを再読み込みすると、デモの箱は十八レムで止まり、
  60. 4:48文章は早めに折り返して、行が短くなります。
  61. 4:53次に、最後の行の値だけを百パーセントに置き換えてみましょう。
  62. 4:58他の指定はすべて同じです。
  63. 5:00今度は親の幅いっぱいまで広がることが許され、文章は長く一行に並び、折り返す位置も後ろへずれます。
  64. 5:08変わったのはインライン方向の上限だけ、文章そのものや内側の余白は同じ、という点に注目してください。
  65. 5:16値を一つだけ変えて比べる方法は、ほかのプロパティにも役立ちます。
  66. 5:22活用場面をもう少し掘り下げます。
  67. 5:24マックスインラインサイズが役立つのは、記事本文のように、読みやすい行幅を保ちたい場面です。
  68. 5:31画面が広いからといって文章まで横いっぱいに伸ばすと、視線の移動が大きくなり読みにくくなります。
  69. 5:37上限を付ければ、大きな画面でも行は適度な長さに収まります。
  70. 5:42行の長さを制限する用途では、シーエイチという単位も比較できます。
  71. 5:46ただしシーエイチは数字のゼロの字幅を基準にした単位で、日本語の一文字の幅をそのまま表すものではありません。
  72. 5:54日本語の文章でそのまま文字数と読み替えないよう注意し、実際の表示で折り返しを確認しながら調整しましょう。
  73. 6:02効かないと感じたときは、まず前提を確認しましょう。
  74. 6:06マックスインラインサイズは上限なので、要素がもともとそれより狭ければ変化は見えません。
  75. 6:13親の幅が狭い場合も、親の範囲が先に効いて上限の違いが見えにくくなります。
  76. 6:19またマックスウィドゥスと混ぜて書くと、どちらが効いているのか分かりにくくなります。
  77. 6:25続いて開発者ツールで調べます。
  78. 6:28ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
  79. 6:36スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値と親の寸法を確認します。
  80. 6:45三百二十ピクセル程度の狭い画面や文字拡大でも読めるかも確かめましょう。
  81. 6:51最後に互換性とまとめです。
  82. 6:53マックスインラインサイズは、クローム五十七以降、エッジ七十九以降、ファイアフォックス四十一以降、
  83. 7:00サファリ十二点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
  84. 7:06まとめます。
  85. 7:07マックスインラインサイズはインライン方向の最大寸法で、横書きでは横幅の上限、
  86. 7:13縦書きでは高さ側の上限になり、初期値はノーンで継承はしませんでした。
  87. 7:18練習として、十八レムと百パーセントの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。
  88. 7:26関連するミンインラインサイズやインラインサイズもあわせて学ぶと理解が深まります。
  89. 7:32お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

max-inline-sizeの役割と主な指定値を解説。文章の行幅の上限が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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