VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、オーバーフローです。
0:05箱の高さや幅が決まっているのに、中の文章や画像が入りきらず、外へはみ出してしまう。
0:10そんなときに、はみ出した部分をどう扱うかを決めるのが、このプロパティです。
0:15はみ出したまま見せるのか、境界で切り取って隠すのか、それとも箱の中でスクロールして読めるようにするのか。
0:21この違いが今回の中心です。
0:23縦だけのオーバーフローワイ、横だけのオーバーフローエックスを、まとめて指定できる一括指定だと考えてください。
0:30この動画では、オートとヒドゥンを比べながら、値ごとの違いを確認していきます。
0:34まず基本の書き方です。
0:36スライドのように、対象のクラスにオーバーフローと値を書くだけです。
0:42プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
0:49仕様上の初期値はビジブルで、通常は親から子へ継承しません。
0:54ここで大切な前提があります。
0:57この指定の違いがはっきり見えるのは、高さや幅、あるいは最大の高さなどで、
1:01箱に制約があるときだけです。
1:05制約がなければ、箱は内容に合わせて伸びていくので、そもそもはみ出し自体が発生しません。
1:13値の名前は英語の意味そのままなので、ビジブルは見える、ヒドゥンは隠れる、
1:18と読み替えると覚えやすくなります。
1:22最初の値は、初期値のビジブルです。
1:25意味は、そのまま見せることです。
1:28内容が箱を超えても切り取られず、箱の外へあふれた状態で表示されます。
1:33長い文章が下の要素へはみ出したり、長い一行が右へ突き抜けたりすると、隣の要素と重なって、
1:38レイアウトが崩れる原因になります。
1:43スマートフォンで画面が左右にぶれる、といった不具合の裏側にも、このはみ出しが隠れていることも少なくありません。
1:52まずは、これが何も指定しないときの既定の動きだと覚えておきましょう。
1:58内容が短く、はみ出す心配がない場所では問題になりませんが、長さが変わる内容では注意が必要です。
2:06次はヒドゥンです。
2:07ヒドゥンは、はみ出した部分を箱の境界で切り取って、見えなくする値です。
2:12今回の実例でも、オートと並んで比較の中心になる値です。
2:16注意したいのは、切り取られた内容は、スクロールしても読めないという点です。
2:22大事な文章の下の部分が見えなければ、その情報は利用者へ届きません。
2:27見た目をそろえるために隠すのか、それとも読めなくても困らない内容なのかを、
2:31使う前に必ず考えてください。
2:35似た値にクリップがあり、ヒドゥンよりさらに厳密に切り取ります。
2:39大きな違いの一つは、ヒドゥンはスクロールコンテナーになるのに対し、クリップはならない点です。
2:46まずは、隠したら読めない、という原則を押さえましょう。
2:51スクロールさせる値が二つあります。
2:53スクロールは、内容がはみ出しているかどうかに関係なく、常にスクロールバーを表示する値です。
2:59バーがある場所がいつも確保されるので、表示のガタつきは防げますが、短い内容でもバーが見えてしまいます。
3:06もう一つのオートは、必要なときだけバーを出す値です。
3:09内容が収まればバーは出ず、長くなったときだけ自動でスクロールできるようになります。
3:15特別な理由がなければ、まずオートを選ぶのが無難です。
3:18長い文章や、横に広い表など、折り返せない内容を全部読ませたい場所では、特にオートが活躍します。
3:24オーバーフローには、書き方の工夫もあります。
3:28値を一つだけ書くと、その指定が縦と横の両方に適用されます。
3:33値を二つ書くと、順番は横、縦です。
3:35一つ目は横方向のオーバーフローエックス、二つ目は縦方向のオーバーフローワイに当たります。
3:42例えば、横はヒドゥンで切り取り、縦はオートでスクロールさせる、といった組み合わせが一行で書けます。
3:50もちろん、オーバーフローエックスとオーバーフローワイを別々に書いても同じ結果になります。
3:58なお、片方にビジブル以外を指定すると、もう片方のビジブルがオートとして計算される場合があります。
4:05意図せずバーが増えたときは、この仕組みを思い出してください。
4:10ここからは実例です。
4:12土台として、ステージという親の中に、デモという箱を置き、その中に同じ内容の段落を六つ入れます。
4:20デモには余白と枠線と背景色を付けて、箱の範囲が目で分かるようにしておきます。
4:27重要な土台は、高さの上限です。
4:29デモにマックスハイト、十レムを指定して、高さを抑えます。
4:34六つの段落はこの高さには入りきらないので、縦方向へのはみ出しが発生します。
4:40この状態を作って初めて、オートとヒドゥンの違いが見えるようになります。
4:46文章量が少ない場合や、上限を付けていない場合は、値に変えても見た目が変わらないので注意してください。
4:55土台ができたら、今回変更する一行を加えます。
4:59デモにオーバーフロー、オートを指定します。
5:02すると六つの段落は十レムの箱には入りきらないので、箱の右側に縦のスクロールバーが現れ、
5:09箱の中だけを上下に動かして、最後の段落まで読めるようになります。
5:15ページ全体は伸びず、箱の高さも固定されたままです。
5:19お知らせ一覧や、決まった高さで収めたいパネルなど、場所を取りすぎずに全文を読ませたい場面に向いた組み合わせです。
5:29マウスホイールやタッチ操作で、箱の中だけが動く感覚を確認してみてください。
5:35では、最後の一行の値だけをヒドゥンに変えてみましょう。
5:39他の指定はすべて同じです。
5:41今度はスクロールバーが消え、箱の下側の段落は境界でぱつんと切り取られて、
5:44まったく見えなくなります。
5:48スクロールもできないので、続きを読む手段はありません。
5:52オートとヒドゥンの違いは、まさにこの一点、はみ出した分を読めるか、読めないかです。
5:58値を切り替えるときは、見た目のすっきり感だけでなく、隠れた内容への行き方が残っているかも一緒に確認してください。
6:06続きがあることに気付けない見た目なら、利用者は内容がそこで終わったと誤解してしまいます。
6:13効かないと感じたときの確認です。
6:15一番多い原因は、高さや幅の上限がないことです。
6:18その場合は箱が内容に合わせて伸びるため、はみ出し自体が発生せず、スクロールも生まれません。
6:25次に、開発者ツールで順番に調べます。
6:28ネットワークでスタイルシートが読み込めているか、エレメンツでクラスとセレクターが一致しているか、
6:35スタイルズで宣言が打ち消されていないか、そしてコンピューテッドで最終的な値がどうなっているかを確認します。
6:43あわせて、三百二十ピクセル程度の狭い画面や、文字を拡大した状態、キーボード操作でも内容を利用できるかも見ておきましょう。
6:51ヒドゥンで隠す場合は、別の到達方法があるかも忘れずに確認してください。
6:57最後に互換性とまとめです。
6:58オーバーフローは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、
7:03サファリ一以降と、古くから主要ブラウザーで広く対応しています。
7:08今回比べたオートとヒドゥンも、サファリ三以降を含め、同じく広く使えます。
7:14まとめます。
7:15このプロパティは縦と横のはみ出しを、見せる、切り取る、スクロールさせるのどれにするかを決めるもので、
7:19前提は高さや幅の上限でした。
7:24練習として、実例の値をオートとヒドゥンで切り替え、違いを自分の言葉で説明してみてください。
7:30お疲れさまでした。
7:32横だけ、縦だけを変えたいときは、オーバーフローエックスとオーバーフローワイも合わせて覚えておきましょう。

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

この動画で学べること

overflowの役割と主な指定値を解説。長い内容をスクロールで読めるか、切り取るかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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