SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フレックス・シュリンクです。
  4. 0:07これはフレックスボックスの項目が、親の幅に収まりきらないときに、どれくらい縮むかを決めるプロパティです。
  5. 0:15幅が足りない場面でだけ働くのが大きな特徴で、親に余裕があるときには何も変わりません。
  6. 0:21この動画では、ゼロとイチという二つの値を比べて、対象の項目が縮むか、縮まずにはみ出してしまうかを確認します。
  7. 0:30たとえばナビゲーションの横並びや、ボタンの並びが狭い画面でつぶれてしまう場面を思い浮かべると、
  8. 0:35イメージがつかみやすいはずです。
  9. 0:40基本の書き方、縮む仕組み、実例、効かないときの確認まで順番に見ていきましょう。
  10. 0:46まず基本の書き方です。
  11. 0:47セレクターのあとに、フレックス・シュリンク、コロン、値、セミコロンを書きます。
  12. 0:53スライドの例では、デモというクラスを持つ項目にゼロを指定しています。
  13. 0:58ここで大切なのは書く場所です。
  14. 1:00フレックス・シュリンクは横並びにしたい親ではなく、並べられる子、つまりフレックスアイテム自身に書きます。
  15. 1:08親にはあらかじめディスプレイ、フレックスを指定しておく必要があります。
  16. 1:13親が並べ方の土台を用意し、子が自分の縮み方を決める、という役割分担をまず覚えてください。
  17. 1:20縮む仕組みを整理します。
  18. 1:22フレックス・シュリンクが働くのは、項目の基準サイズの合計が親の幅を超えたときだけです。
  19. 1:29たとえば基準が12レムの項目が三つ並び、親の幅がそれより狭いと、あふれた分をどこかが引き受けなければ収まりません。
  20. 1:39その不足分を、シュリンクの係数と基準サイズに応じて分け合い、各項目が少しずつ小さくなります。
  21. 1:46ですから実際の縮小量は、係数だけで決まるのではなく、もとの基準サイズであるフレックス・ベイシスの大きさにも依存します。
  22. 1:56係数が同じでも、もとが大きい項目ほど多く縮むと考えてください。
  23. 2:01逆に、親にまだ空きがあるときは、シュリンクではなくグロウの方が関係するので、
  24. 2:06混同しないようにしましょう。
  25. 2:10指定できる値を見ていきます。
  26. 2:12値はゼロ以上の数値で、単位は付けません。
  27. 2:15ゼロは縮まないという指定で、ロゴやアイコンのように形を保ちたい項目によく使われます。
  28. 2:22ただし縮まない分、親からはみ出す場合があるので注意が必要です。
  29. 2:26イチは初期値で、幅が足りなければ状況に応じて縮みます。
  30. 2:31ニやサンなど大きな数ほど、ほかの項目より多く縮む割合が増えます。
  31. 2:36マイナスの値は無効です。
  32. 2:37まずはゼロとイチの違い、つまり縮むか縮まないかから押さえ、比率の調整はそのあとで試すのがおすすめです。
  33. 2:45初期値と継承を確認します。
  34. 2:47フレックス・シュリンクの初期値はイチで、通常の継承はしません。
  35. 2:52親に書いても子へ自動で受け継がれないので、フレックスアイテムごとに指定します。
  36. 2:57一括指定フレックスとの関係も重要です。
  37. 3:00フレックス、ゼロ、イチ、6レムと書いたとき、二番目のイチがまさにこのシュリンクです。
  38. 3:05あとから縮み方だけを変えたいときは、フレックス・シュリンクを単体で書くのが安全です。
  39. 3:11一括指定で書き直すと、伸びる係数や基準サイズまで一緒に変わってしまうからです。
  40. 3:17インヘリットやイニシャルなどの共通キーワードの考え方は、ほかのプロパティと同じです。
  41. 3:22実例を見ていきます。
  42. 3:24まずエイチティーエムエルの用意です。
  43. 3:27ステージという親の箱の中に、項目が三つ入っています。
  44. 3:32一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
  45. 3:40頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  46. 3:46親と子の構造そのものが例の一部です。
  47. 3:50この例では親の幅をあえて狭く用意し、二番目の対象だけ縮み方を変えて、ほかの項目とどう違うかを見比べます。
  48. 3:59対象の幅とはみ出し方に注目してください。
  49. 4:03次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  50. 4:07ステージはディスプレイ、フレックスで項目が横に並びますが、最大幅が24レムに絞られていて、
  51. 4:12基準12レムの項目三つはそのままでは収まりません。
  52. 4:17そして主役は最後の行で、デモだけにフレックス・シュリンク、ゼロを指定し、
  53. 4:21縮小を止めています。
  54. 4:24すると対象は基準の大きさを保とうとし、親からはみ出すか、スクロールで見る形になります。
  55. 4:30土台の指定は共通なので、最後の一行だけに注目してください。
  56. 4:35対象だけ枠線が太く背景が付いているので、ブラウザーで開いたときにどれが縮んでいないか、
  57. 4:39一目で分かるようになっています。
  58. 4:43値を変えて比べてみましょう。
  59. 4:45最後のフレックス・シュリンクの値だけを、ゼロからイチへ置き換えます。
  60. 4:50ファイルを保存してブラウザーを再読み込みすると、二番目の対象もほかの項目と同じように縮むようになり、
  61. 4:55狭い横並びの中に収まります。
  62. 4:59エイチティーエムエルは一切変えていません。
  63. 5:03たった一つの係数を変えるだけで、はみ出していた項目が並びの中に収まるわけです。
  64. 5:08ただし縮む量は基準サイズにも左右されるので、親の幅を変えたときの結果もあわせて観察すると理解が深まります。
  65. 5:16比較のコツは、変える値を一つだけにすることです。
  66. 5:19間違えやすい点を整理します。
  67. 5:22まず、ゼロで縮小を止めると、項目が親からはみ出す場合があります。
  68. 5:26縮まない指定は便利ですが、スマホのような狭い画面では見切れや横スクロールの原因になるので、
  69. 5:31使いどころを選んでください。
  70. 5:36次に、親がフレックスになっていないと、子にシュリンクを書いても効きません。
  71. 5:41親への指定と子への指定を混同しないでください。
  72. 5:45さらに、親の幅に余裕がある場面では、そもそも縮む必要がないため、値を変えても見た目が変わりません。
  73. 5:52効いていないのではなく、発動する条件がそろっていないだけ、という場合も多いのです。
  74. 5:59効かないときの確認手順です。
  75. 6:01まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  76. 6:08次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  77. 6:13スタイルズで宣言が無効になっていないか、フレックスの一括指定など別の宣言に上書きされていないかも重要です。
  78. 6:22コンピューテッドでフレックス・シュリンクの最終的な値を確認し、親の表示方式がフレックスになっているか、
  79. 6:28親の幅と項目の合計を比べて縮む条件がそろっているかも調べましょう。
  80. 6:35最後に三百二十ピクセル程度の画面幅や文字の拡大でも、内容が利用できるかを確かめてください。
  81. 6:42最後に互換性とまとめです。
  82. 6:43フレックス・シュリンクは、クローム、エッジ、ファイアフォックス、サファリなど、
  83. 6:48現在の主要ブラウザーで広く対応しています。
  84. 6:52記事では、クロームは29以降、エッジは12以降、ファイアフォックスは20以降、
  85. 6:56サファリは9以降などの記録が紹介されています。
  86. 7:00練習は、まずゼロとイチの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、
  87. 7:05結果がどう変わるかを比べることです。
  88. 7:09まとめます。
  89. 7:10フレックス・シュリンクは、幅が足りないときに項目が縮む割合を決める係数で、
  90. 7:13初期値はイチ、継承はしません。
  91. 7:17関連するフレックス、フレックス・グロウ、フレックス・ベイシスもあわせて確認すると理解が深まります。
  92. 7:24お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

flex-shrinkの役割と主な指定値を解説。狭い横並びで対象項目が縮むかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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