VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、マックスウィドスです。
0:06これは、要素の幅の上限を決めるプロパティです。
0:10画面が広いからといって文章が横に長く広がりすぎると、目が左右へ大きく移動して読みにくくなります。
0:18そこで上限を付けると、広い領域でも箱がその幅までに抑えられます。
0:23この動画では、基本の書き方、指定できる値、ウィドスやミンウィドスとの違い、
0:29上限ならではの柔軟な動き、そして効かないときの確認方法まで順番に見ていきます。
0:35高さの上限を決めるマックスハイトの、横向き版と考えるとイメージしやすくなります。
0:41幅の制御はレイアウトの基本なので、ここでしっかり押さえておきましょう。
0:47まず基本の書き方です。
0:48セレクターを書いたら、マックスウィドスと書き、コロンのあとに上限の値を書き、
0:52最後にセミコロンを付けます。
0:56スライドの例では、上限を十八レムに指定しています。
1:00レムは文字サイズを基準にした単位なので、文字を大きくする設定でも上限が一緒に広がり、
1:04読みやすさを保ちやすくなります。
1:09エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:19まずはこの一行をそのまま書いて、広い画面で箱がどこまでで止まるかをブラウザーで確かめてみましょう。
1:26次に、指定できる値を確認します。
1:28代表的なのは、長さ、割合、そしてナンです。
1:32ピクセルやレムといった長さで書けば、その幅がそのまま上限になります。
1:37パーセントなどの割合も書けますが、この場合は親要素の幅を基準に計算される点に注意してください。
1:44たとえば百分率百パーセントなら、親の幅を超えて広がることはありません。
1:49そしてナンは、上限を付けないという意味で、初期状態の指定です。
1:54まずはレムやピクセルで分かりやすく試し、親に合わせたい場面で割合を使う、
1:58と使い分けると失敗が少なくなります。
2:02値の意味を知ると、デザインの意図に合った書き方を選べます。
2:07初期値と継承について整理します。
2:09マックスウィドスの初期値はナン、つまり幅の上限は付いていない状態です。
2:15そして、このプロパティは親から通常は継承しません。
2:19親に上限を付けても、子要素に自動で伝わるわけではないので、抑えたい要素そのものに指定する必要があります。
2:28また、共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
2:33普段は長さを直接書くことがほとんどです。
2:39仕様上の初期値と、ブラウザーの既定のスタイルで見えている値が同じとは限らない点も、
2:43あわせて覚えておきましょう。
2:48この初期値と継承の考え方は、ほかのサイズ系のプロパティでも共通する大切な土台です。
2:55似たプロパティとの違いを整理しましょう。
2:58ウィドスは幅そのものを指定するもの、ミンウィドスはこれより狭くならないという下限、
3:04そしてマックスウィドスはこれより広くならないという上限です。
3:09マックスウィドスだけを指定した場合、実際の幅は内容や親の広さに合わせて決まりますが、
3:14上限を超えることはありません。
3:19もしウィドスで決めた幅が上限より大きい場合は、上限の方が優先されます。
3:24下限と上限を両方使えば、その範囲の中でだけ幅が変化する、柔軟で崩れにくい箱を作ることもできます。
3:32役割を分けて考えると、指定の意図が伝わりやすくなります。
3:37マックスウィドスの大切な特徴は、ウィドスとの違いにあります。
3:42上限はあくまで上限なので、親の領域が狭いときは、その狭さに合わせて箱も狭くなります。
3:49記事でも注意されているように、マックスウィドスだけでは、必ずその幅になるわけではありません。
3:57たとえばウィドス百分率百パーセントと組み合わせると、親いっぱいに広がろうとしつつも、
4:02上限で止まる動きになります。
4:07大きな画面では読みやすい幅を保ち、小さな画面でははみ出さずに縮む。
4:13この柔軟さが、レスポンシブなレイアウトで長く使われてきた理由です。
4:19固定幅との違いを意識して使いましょう。
4:22ここからは記事の実例です。
4:24エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
4:30その中には、ハロー、シーエスエスから始まる文章を入れ、文字を増やして折り返しも確認できるようにしています。
4:37頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:42今回比べたいのは上限の違いそのものなので、文章や余白といった土台は固定し、
4:46上限だけを差し替えて観察するのがポイントです。
4:50親が十分に広いときに、子の箱がどこまでで止まるか。
4:54そこが今回の確認どころです。
4:56親と子の入れ子構造も、後のシーエスエスと対応させて見ておきましょう。
5:00土台のシーエスエスです。
5:02ステージには幅の上限三十レムと内側の余白、点線の枠を付けます。
5:08デモの箱には濃い緑の枠線と薄い緑の背景、文字色を用意します。
5:13最後の行でマックスウィドスを十八レムにすると、親は広くても、文章の箱は十八レムまでに抑えられ、
5:18行が短く折り返されます。
5:23次に最後の行だけを百分率百パーセントへ置き換えて再読み込みすると、上限が親の幅まで広がり、
5:29箱は親いっぱいに伸びます。
5:34この一行の違いが、実例の比較ポイントです。
5:37保存して再読み込みするたびに、行の長さと折り返し位置がどう変わるかにも注目してください。
5:45違いが出た理由を、上限という言葉で説明できるかも、あわせて試してみてください。
5:52活用場面を考えてみましょう。
5:54まず、記事や説明文の本文です。
5:57一行が長すぎると読みにくいので、上限を付けて行幅を整え、左右の余白を自動にして中央に置くと、
6:03広い画面でも読みやすいレイアウトになります。
6:09次に画像です。
6:10記事でも紹介されているように、画像にはマックスウィドス百分率百パーセントと、
6:14ハイト、オートを組み合わせます。
6:19そうすると、親より大きな画像は縮んで収まり、縦横比も保たれます。
6:24ただし上限を大きくし過ぎると効果が見えにくくなるので、実際の文章や画像を入れて、
6:30画面幅を変えながら調整するのがおすすめです。
6:35迷ったときは、まず控えめな上限から始めて、少しずつ広げていくのが安全です。
6:41効かないと感じたときは、開発者ツールで順番に調べます。
6:46まずネットワークで、スタイルシートが正常に取得されているかを確認します。
6:52次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。
6:58続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
7:03コンピューテッドで最終的な値を見ます。
7:08親の幅自体が上限より狭い場合は、指定が効いていても箱が上限まで広がらない点にも注意してください。
7:16最後に、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかを試しましょう。
7:23最後に互換性とまとめです。
7:25記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
7:31ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
7:37まとめます。
7:38マックスウィドスは幅の上限で、初期値はナン、継承はせず、親が狭ければ上限より狭くもなるのが特徴でした。
7:45練習として、十八レムと百分率百パーセントの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
7:53関連するミンウィドスやウィドスも学ぶと、サイズの制御が一通りできるようになります。
7:59お疲れさまでした。
8:00幅の上限と下限をセットで理解すると、読みやすく崩れにくいページ作りに役立ちます。

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

この動画で学べること

max-widthの役割と主な指定値を解説。広い領域でも文章の箱が18remまでに抑えられます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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