VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ウィドスです。
0:06これは要素の横幅を決める、最も基本的なプロパティの一つです。
0:10箱をどれくらいの幅で表示するかを指定でき、指定しなければ、要素の種類や中身に合わせて幅が決まります。
0:18この動画では、基本の書き方、指定できる値の種類、親の幅を基準にする割合の考え方、
0:25そしてインライン要素やフレックスボックスで思い通りにならない理由まで、順番に見ていきます。
0:31高さを決めるハイトと対になるプロパティとして、イメージしながら聞いてください。
0:37まずは幅を変えると見た目がどう変わるのか、感覚をつかむところから始めましょう。
0:43幅はレイアウトの土台になるので、最初にしっかり理解しておくと後の学習が楽になります。
0:50まず基本の書き方です。
0:51セレクターを書いたら、ウィドスと書き、コロンのあとに幅の値を書き、最後にセミコロンを付けます。
0:58スライドの例では、幅を親の七十パーセントに指定しています。
1:02パーセントで書くと、親要素の幅を基準に計算されるので、画面や親の大きさが変われば、
1:06子の幅も一緒に変わります。
1:10エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:19まずはこの一行を書いて、箱の横幅がどう変わるか確かめてみましょう。
1:24次に、指定できる値を確認します。
1:26代表的なのは、長さ、割合、そしてオートです。
1:30ピクセルやレムといった長さで書けば、その幅がそのまま使われます。
1:35パーセントなどの割合は、親要素の幅を基準に計算されます。
1:40たとえば七十パーセントなら、親の幅の七割になります。
1:45オートは、要素の内容や種類に応じて幅が自動で決まる指定で、初期状態の値でもあります。
1:52このほか、内容の最小幅に合わせるミンコンテンツ、最大幅に合わせるマックスコンテンツ、
1:58親に収まるよう調整するフィットコンテンツといった値もあります。
2:04まずは長さと割合とオートの三つを押さえましょう。
2:08値の意味を一つずつ言葉で説明できると、指定ミスにも早めに気付けます。
2:13慣れてきたら、内容に合わせる値も試してみてください。
2:18初期値と継承について整理します。
2:21ウィドスの初期値はオートです。
2:23ブロック要素なら、オートのときは親の幅いっぱいに広がることが多く、文章が入ればその中で折り返します。
2:32そして、このプロパティは親から通常は継承しません。
2:37親に幅を付けても、子要素に自動で同じ幅が伝わるわけではないので、幅を決めたい要素そのものに指定する必要があります。
2:47また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
2:53普段は長さや割合を直接書くことがほとんどです。
2:58この決まりを知ると、親と子で幅がそろわない理由も説明できます。
3:04割合で指定するときの考え方を押さえます。
3:07ウィドスのパーセントは、常に親要素の幅が基準です。
3:12親が広い画面では子も広く、親が狭い画面では子も狭くなります。
3:18そのため、スマートフォンとパソコンで画面幅が大きく変わるページでも、はみ出しにくいのが利点です。
3:26ただし、親自体の幅がどう決まっているかで結果が変わります。
3:32親が画面いっぱいに広がる要素なのか、最大幅で抑えられているのかを合わせて確認してください。
3:40迷ったら、まず親の幅を開発者ツールで数値として確認してみると、計算の仕組みが見えてきます。
3:48割合と長さを比べると、基準が親なのか文字サイズなのかで結果が大きく違うことが分かります。
3:56記事の比較ポイントである、七十パーセントと十二レムの違いを比べます。
4:02七十パーセントは親幅に比例するので、親が広がれば箱も広がり、親が狭くなれば箱も狭くなります。
4:09レイアウト全体の中で割合を保ちたいときに便利です。
4:13一方、十二レムは文字サイズを基準にした長さなので、親の幅が変わっても、基本的には同じ幅を保ちます。
4:21ボタンや入力欄のように、大きさを保ちたい部品に向いています。
4:26ただし、狭い画面では固定幅が親を超えてはみ出すこともあるので、最大幅と組み合わせるなどの工夫も大切です。
4:34ここからは記事の実例です。
4:36エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
4:42その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。
4:49頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:54親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。
4:58比べたいのは幅だけなので、文章などの土台は固定したままにします。
5:03構造をシーエスエスと対応させて見ておきましょう。
5:06土台のシーエスエスです。
5:08ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意して、
5:13違いが見えるようにします。
5:17最後の行でウィドスを七十パーセントにすると、箱は親の幅の七割の広さになります。
5:24親の幅を変えると、それに合わせて箱も伸び縮みします。
5:28次に最後の行だけを十二レムへ置き換えると、幅は文字サイズ基準で保たれ、親を広げても箱の幅は変わりません。
5:37この一行の違いが実例の比較ポイントです。
5:40保存して再読み込みし、箱の横の大きさに注目してください。
5:45ブラウザーで実際の幅を見比べると、言葉だけの説明よりずっと理解が深まります。
5:51親の幅も一緒に変えて試すのがおすすめです。
5:55活用場面を考えてみましょう。
5:57本文の箱では、幅を広げ過ぎると一行が長くなって読みにくくなるので、ウィドスに最大幅であるマックスウィドスを組み合わせて、
6:04読みやすい行の長さに抑える使い方がよくあります。
6:11画像やカードでは、幅をそろえることでレイアウトが整って見えます。
6:16フォームの入力欄では、入力内容に合った幅を指定すると使いやすくなります。
6:22逆に、幅を細かく固定し過ぎると、画面サイズが変わったときに崩れやすくなります。
6:29割合と最大幅を組み合わせる考え方が、実務では特に役立ちます。
6:34効かないと感じたときの注意点です。
6:36まず、通常のインライン要素には、ウィドスが想定通り効きません。
6:41幅を指定したい場合は、表示方式をブロックやインラインブロックに変える必要があります。
6:47次に、フレックスボックスの中では、縮小の計算やミンウィドスの影響で、ウィドスだけで最終的な幅が決まらない場合があります。
6:56そのうえで、開発者ツールで順番に調べます。
6:59ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、
7:04コンピューテッドで最終的な値を確認してください。
7:09最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容がはみ出さずに読めるかを試しましょう。
7:16一つずつ順番に確認すれば、原因はほとんどの場合どこかに見つかります。
7:21最後に互換性とまとめです。
7:23記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
7:30ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
7:37まとめます。
7:38ウィドスは要素の横幅で、初期値はオート、継承はせず、割合は親の幅を基準に計算されるのが特徴でした。
7:45練習として、七十パーセントと十二レムの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
7:53関連するボックスサイジングやマックスウィドスも学ぶと、幅の制御がより正確になります。
7:59お疲れさまでした。

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

この動画で学べること

widthの役割と主な指定値を解説。親幅に比例する箱と、文字サイズ基準の固定幅の箱を比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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