VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

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

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