SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、オーバーフローワイです。
  4. 0:06箱の高さが決まっているのに、中の文章が長くて入りきらない。
  5. 0:11そんなときに、はみ出した下の部分をどう扱うかを決めるのが、このプロパティです。
  6. 0:17はみ出したまま見せるのか、切り取って隠すのか、それとも箱の中で縦にスクロールして読めるようにするのか。
  7. 0:25この三つの違いが今回の中心です。
  8. 0:27横方向を担当するオーバーフローエックスの、縦方向版だと考えてください。
  9. 0:33この動画では、値ごとの違いを、同じ長文の実例で切り替えながら確認していきます。
  10. 0:39まず基本の書き方です。
  11. 0:41スライドのように、対象のクラスにオーバーフローワイと値を書くだけです。
  12. 0:46プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  13. 0:53仕様上の初期値はビジブルで、通常は親から子へ継承しません。
  14. 0:57ここで大切な前提があります。
  15. 1:00この指定の違いがはっきり見えるのは、高さや最大の高さで箱に制約があるときだけです。
  16. 1:06制約がなければ、箱は内容に合わせて下へ伸びていくので、そもそもはみ出し自体が発生しません。
  17. 1:14値の名前は英語の意味そのままなので、ビジブルは見える、ヒドゥンは隠れる、
  18. 1:18と読み替えると覚えやすくなります。
  19. 1:22最初の値は、初期値のビジブルです。
  20. 1:25意味は、そのまま見せることです。
  21. 1:28内容が箱の高さを超えても切り取られず、箱の外へあふれた状態で表示されます。
  22. 1:33一見すると親切なようですが、実際には、下にある別の要素と重なってしまったり、
  23. 1:39ページ全体のレイアウトが崩れて見えたりする原因になります。
  24. 1:44文章量が日によって変わる場所では、意図せずはみ出すこともあります。
  25. 1:49まずは、これが何も指定しないときの既定の動きだと覚えておきましょう。
  26. 1:54ただし、隣の要素と重なった部分は読みにくくなるため、本文のような大切な内容では注意が必要です。
  27. 2:02次はヒドゥンです。
  28. 2:03ヒドゥンは、はみ出した部分を箱の境界で切り取って、見えなくする値です。
  29. 2:08今回の実例でも、オートと並んで比較の中心になる値です。
  30. 2:12注意したいのは、切り取られた下の内容は、スクロールしても読めないという点です。
  31. 2:18見た目をそろえるために隠すのか、それとも読めなくても困らない内容なのかを、
  32. 2:21使う前に必ず考えてください。
  33. 2:25似た値にクリップがあり、ヒドゥンよりさらに厳密に切り取る指定ですが、まずはヒドゥンとの違いより、
  34. 2:30隠したら読めないという原則を押さえましょう。
  35. 2:35画像の見せたい範囲を決めるような、見た目を優先する場面では役立つこともあります。
  36. 2:40スクロールさせる値が二つあります。
  37. 2:43スクロールは、内容がはみ出しているかどうかに関係なく、常に縦のスクロールバーを表示する値です。
  38. 2:49バーがある場所がいつも確保されるので、表示のガタつきは防げますが、短い内容でもバーが見えてしまいます。
  39. 2:56もう一つのオートは、必要なときだけバーを出す値です。
  40. 3:00内容が収まればバーは出ず、長くなったときだけ自動でスクロールできるようになります。
  41. 3:06特別な理由がなければ、まずオートを選ぶのが無難です。
  42. 3:09使うブラウザーや端末によって、バーの太さや表示のされ方が少し違う点も知っておきましょう。
  43. 3:15ここからは実例です。
  44. 3:17土台として、ステージという親の中に、デモという箱を置き、その中に六つの段落を入れます。
  45. 3:23デモには余白と枠線と背景色を付けて、箱の範囲が目で分かるようにしておきます。
  46. 3:29そして最も重要な土台が、高さの上限です。
  47. 3:32マックスハイトで上限を決めないと、箱は六段落分の長さに合わせてどこまでも伸びてしまい、
  48. 3:37オーバーフローワイを変えても何も変わりません。
  49. 3:42値の比較の前に、まず上限があるかを確認する癖を付けましょう。
  50. 3:47段落を六つにしているのは、短い文章でははみ出しが起きず、違いが分からなくなるためです。
  51. 3:53土台ができたら、今回変更する一行を加えます。
  52. 3:57デモにマックスハイト、十レムで高さの上限を与え、オーバーフローワイ、オートを指定します。
  53. 4:03すると六段落は十レムの箱には入りきらないので、箱の右側に縦のスクロールバーが現れ、
  54. 4:09箱の中だけを上下に動かして、最後の段落まで読めるようになります。
  55. 4:15ページ全体は伸びず、箱の高さも固定されたままです。
  56. 4:18コメント欄やお知らせ一覧のように、高さを保ちながら長い内容を全部読ませたい場所に向いた組み合わせです。
  57. 4:26マウスホイールでも、箱に触れたまま上下に動かすタッチ操作でも、同じように読み進められます。
  58. 4:33では、最後の一行の値だけをヒドゥンに変えてみましょう。
  59. 4:37他の指定はすべて同じです。
  60. 4:39今度はスクロールバーが消え、箱の下のほうの段落は境界でぱつんと切り取られて、
  61. 4:43まったく見えなくなります。
  62. 4:47スクロールもできないので、残りの文章を読む手段はありません。
  63. 4:51オートとヒドゥンの違いは、まさにこの一点、はみ出した分を読めるか、読めないかです。
  64. 4:57値を切り替えるときは、見た目のすっきり感だけでなく、隠れた内容への行き方が残っているかも一緒に確認してください。
  65. 5:06もし下に続きがあること自体に気付けない見た目なら、利用者は内容が終わったと誤解してしまいます。
  66. 5:13使い分けを整理します。
  67. 5:15長い文章や一覧を最後まで読ませたいならオート、バーが要らない短い内容なら初期値のままでも構いません。
  68. 5:22高さをそろえるためだけにヒドゥンで切るのは、内容が読めなくなるリスクがあるので慎重に使ってください。
  69. 5:29もう一つ大切なのがキーボード操作です。
  70. 5:31スクロールできる箱は、タブキーで中へ入って、矢印キーなどで操作位置を動かせる場合があります。
  71. 5:38実際にキーボードだけで最後まで読めるか、操作している場所が見えているかも、
  72. 5:41公開前に試しておきましょう。
  73. 5:45逆に、装飾だけを切り取るような場所では、ヒドゥンがレイアウトを守る味方になることもあります。
  74. 5:52効かないと感じたときの確認です。
  75. 5:54一番多い原因は、やはり高さの上限がないことです。
  76. 5:57上限がなければ箱が内容に合わせて伸びるため、スクロール自体が発生しません。
  77. 6:03次に、開発者ツールで順番に調べます。
  78. 6:05ネットワークでスタイルシートが読み込めているか、エレメンツでクラスとセレクターが一致しているか、
  79. 6:13スタイルズで宣言が打ち消されていないか、そしてコンピューテッドで最終的な値がどうなっているかを確認します。
  80. 6:20あわせて、幅の狭い画面や文字を拡大した状態でも内容を読めるかも見ておきましょう。
  81. 6:26親要素の高さや、別のクラスによる上書きが原因のこともあるので、対象の箱だけで判断しないことも大切です。
  82. 6:34最後に互換性とまとめです。
  83. 6:35オーバーフローワイは、クローム一以降、エッジ十二以降、ファイアフォックス三点五以降、
  84. 6:41サファリ三以降と、古くから主要ブラウザーで広く対応しています。
  85. 6:47今回比べたオートとヒドゥンも、同じく広く使えます。
  86. 6:50まとめます。
  87. 6:51このプロパティは縦のはみ出しを、見せる、切り取る、スクロールさせるのどれにするかを決めるもので、
  88. 6:56前提は高さの上限でした。
  89. 7:00練習として、実例の値をオートとヒドゥンで切り替え、違いを自分の言葉で説明してみてください。
  90. 7:07お疲れさまでした。
  91. 7:09横方向のオーバーフローエックスと組み合わせると、縦と横を別々に制御できることも、
  92. 7:13あわせて覚えておきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

overflow-yの役割と主な指定値を解説。長文の縦スクロールの有無が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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