SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ミンウィドスです。
  4. 0:06これは、要素の幅の下限、つまりこれより細くならないという最小幅を決めるプロパティです。
  5. 0:13画面を狭くしたり、親要素が小さくなったりしても、箱がある幅を保つので、中の文字やボタンがつぶれて読めなくなる事態を防げます。
  6. 0:23この動画では、基本の書き方、指定できる値、ウィドスやマックスウィドスとの違い、
  7. 0:29そしてフレックスボックスで重要になるゼロの使い方まで順番に見ていきます。
  8. 0:35幅の上限を決めるマックスウィドスの、反対の役割と考えるとイメージしやすくなります。
  9. 0:41まず基本の書き方です。
  10. 0:43セレクターを書いたら、ミンウィドスと書き、コロンのあとに下限の値を書き、
  11. 0:46最後にセミコロンを付けます。
  12. 0:50スライドの例では、下限を十六レムに指定しています。
  13. 0:53レムは文字サイズを基準にした単位なので、文字を大きくする設定でも下限が一緒に広がり、
  14. 0:58読みやすさを保ちやすくなります。
  15. 1:02エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  16. 1:11まずはこの一行をそのまま書いて、ブラウザーの幅を狭くしたときに箱がどこで止まるかを確かめてみましょう。
  17. 1:18次に、指定できる値を確認します。
  18. 1:21代表的なのは、長さ、割合、そしてオートです。
  19. 1:25ピクセルやレムといった長さで書けば、その幅がそのまま下限になります。
  20. 1:31パーセントなどの割合も書けますが、この場合は親要素の幅を基準に計算される点に注意してください。
  21. 1:39たとえば五十パーセントなら、親の半分より細くはなりません。
  22. 1:45オートは、要素の種類や内容に応じて下限が決まる指定で、初期状態の値です。
  23. 1:51そしてゼロは、下限をなくす特別な値として、後のセクションで大切になります。
  24. 1:58まずはレムやピクセルで分かりやすく試すのがおすすめです。
  25. 2:03初期値と継承について整理します。
  26. 2:05ミンウィドスの初期値はオートです。
  27. 2:08オートのとき、通常の要素では下限は実質ゼロのように振る舞いますが、フレックスボックスやグリッドの子要素では、
  28. 2:15内容に合わせた自動の最小サイズが働くことがあります。
  29. 2:21そして、このプロパティは親から通常は継承しません。
  30. 2:25親に下限を付けても、子要素に自動で伝わるわけではないので、保ちたい要素そのものに指定する必要があります。
  31. 2:34また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
  32. 2:39普段は長さを直接書くことがほとんどです。
  33. 2:44似たプロパティとの違いを整理しましょう。
  34. 2:47ウィドスは幅そのものを指定するもの、ミンウィドスはこれより細くならないという下限、
  35. 2:53そしてマックスウィドスはこれより広くならないという上限です。
  36. 2:58もしウィドスで決めた幅が下限より小さい場合は、下限の方が優先されます。
  37. 3:04下限と上限を両方使えば、その範囲の中でだけ幅が変化する、柔軟で崩れにくい箱を作ることもできます。
  38. 3:12たとえば本文の箱に下限と上限を両方付けると、極端に細くも広くもならない読みやすい幅を保てます。
  39. 3:19役割を分けて考えると、指定の意図が伝わりやすくなります。
  40. 3:24ミンウィドスで特に大切なのが、フレックスボックスやグリッドとの関係です。
  41. 3:29この二つのレイアウトでは、子要素が自動の最小サイズを持つため、親が狭くなっても内容の幅より縮まないことがあります。
  42. 3:37結果として、長い文章や長い単語がはみ出してしまうのです。
  43. 3:41そんなときにミンウィドス、ゼロを指定すると、その制約を外して、要素を小さく縮められるようになります。
  44. 3:48記事でも強調されているポイントです。
  45. 3:51ただし、ゼロにしただけでは中身がはみ出す場合もあるので、文章の折り返しの設定もあわせて確認してください。
  46. 3:58困ったときの定番の対処法として覚えておきましょう。
  47. 4:01ここからは記事の実例です。
  48. 4:03エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
  49. 4:10その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。
  50. 4:17頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  51. 4:22今回の親はわざと狭く設定されているので、子の下限が効くとどう見えるかがはっきり分かります。
  52. 4:29親と子の入れ子構造を、後のシーエスエスと対応させて見ておきましょう。
  53. 4:34比べたいのは下限だけなので、文章などの土台は固定します。
  54. 4:38土台のシーエスエスです。
  55. 4:40ステージは最大幅を十四レムに絞り、あふれた分はスクロールできるようにします。
  56. 4:45デモの箱には濃い緑の枠線と薄い緑の背景を用意し、幅は親いっぱいにします。
  57. 4:50最後の行でミンウィドスを十六レムにすると、親より広い下限が優先され、箱は十六レムを保ったまま、
  58. 4:54親側がスクロールする形になります。
  59. 4:58次に最後の行だけをゼロへ置き換えると、下限がなくなり、箱は親の狭さに合わせて縮みます。
  60. 5:04この一行の違いが実例の比較ポイントです。
  61. 5:07保存して再読み込みし、箱の幅とスクロールの有無がどう変わるか注目してください。
  62. 5:12活用場面を考えてみましょう。
  63. 5:14ボタンに下限を付けると、文字が短いボタンでも一定の幅が保たれ、並べたときに大きさがそろって押しやすくなります。
  64. 5:23カードや入力欄でも、画面が狭くなったときに極端に細くつぶれるのを防げます。
  65. 5:28一方で、下限を大きくし過ぎると、スマートフォンのような狭い画面では箱がはみ出して、
  66. 5:32横スクロールの原因になります。
  67. 5:37ですから、実際の文章や部品を入れて、画面幅を変えながら調整するのが大切です。
  68. 5:42迷ったときは、まず控えめな下限から始めて、少しずつ広げていくのが安全です。
  69. 5:48効かないと感じたときは、開発者ツールで順番に調べます。
  70. 5:52まずネットワークで、スタイルシートが正常に取得されているかを確認します。
  71. 5:58次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。
  72. 6:04続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
  73. 6:09コンピューテッドで最終的な値を見ます。
  74. 6:13思ったより縮まない場合は、フレックスやグリッドの自動最小サイズが関係していないかも疑ってください。
  75. 6:21最後に、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかを試しましょう。
  76. 6:27最後に互換性とまとめです。
  77. 6:29記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  78. 6:35ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
  79. 6:41まとめます。
  80. 6:42ミンウィドスは幅の下限で、初期値はオート、継承はせず、そしてフレックスやグリッドではゼロが縮めるための鍵になるのが特徴でした。
  81. 6:51練習として、十六レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
  82. 6:58関連するマックスウィドスやウィドスも学ぶと、サイズの制御が一通りできるようになります。
  83. 7:04お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

min-widthの役割と主な指定値を解説。狭い親でも保つ最小幅が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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