VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、バックグラウンドサイズです。
0:07これは、背景画像をどのくらいの大きさで表示するかを指定するプロパティです。
0:12小さな模様を繰り返す場合は、模様一枚分のタイルの大きさが変わりますし、大きな写真の場合は、
0:17写真がどれだけ拡大されて見えるかが変わります。
0:23大きすぎても小さすぎても印象は大きく変わるので、背景デザインの要になる指定です。
0:29この動画では、基本の書き方から、長さや割合、オート、カバーとコンテインの違い、
0:33そして実例での比較までを順番に見ていきます。
0:38特に、写真を全面に表示する場面と、模様を繰り返す場面では、同じ指定でも見え方が大きく違うので、
0:43その違いも意識してみてください。
0:48まず基本の書き方です。
0:50スライドのように、対象のクラスにバックグラウンドサイズと、大きさを表す値を書きます。
0:56プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
1:03クラス名は、エイチティーエムエルのクラス属性と一致させてください。
1:08大切なのは初期値です。
1:10何も指定しなければ、値はオート、オートで、画像は元の大きさのまま表示されます。
1:16本来の大きさと違うサイズで見せたい場合は、必ず自分で値を書く必要があります。
1:22通常は親から子へ継承しませんので、背景が欲しい要素ごとに指定しましょう。
1:28最も基本的な指定は、長さや割合で大きさを直接書く方法です。
1:33値を二つ並べると、最初が横幅、二番目が縦の高さになります。
1:37たとえば、四十ピクセル、四十ピクセルなら、一枚が四十ピクセル四方の正方形に引き伸ばされます。
1:45割合で書くと、要素の背景領域に対する比率で大きさが決まります。
1:50値を一つだけ書いた場合は、縦は自動でオートとして扱われ、後で説明するように元の縦横比を保ちながら大きさが決まります。
2:00細かくサイズを決めたいときは、この長さと割合の指定が土台になります。
2:06慣れてきたら、横だけをパーセント、縦をオートにするような組み合わせも試してみると、
2:11画面幅に合わせた柔軟な調整ができるようになります。
2:17オートは、地味ですがとても大切な値です。
2:20両方ともオートなら、画像は本来持っている大きさで表示されます。
2:25片方だけを数値で指定し、もう片方をオートにすると、画像本来の縦横比を保ったまま、
2:30指定した大きさに合わせて拡大や縮小が行われます。
2:36写真が縦に伸びたり横に潰れたりしないのは、この仕組みのおかげです。
2:41ただし、グラデーションのように画像自体に決まった大きさがない場合は、オートだけではサイズが定まらないこともあります。
2:51迷ったら、片方をオートにして比率を保つ書き方から始めるのが安全です。
2:57カバーは、ヒーローイメージなどによく使われる値です。
3:00背景領域に隙間ができないよう、画像の縦横比を保ったまま、領域全体を覆える大きさまで拡大します。
3:07その代わり、領域からはみ出した部分は切り取られて見えなくなります。
3:12写真の端が多少切れてもよいので、とにかく全面に敷き詰めたい、という場面に向いています。
3:19ただし、大切な人物の顔や文字が端にある写真では、切れてしまう部分に注意が必要です。
3:25位置を調整するバックグラウンドポジションと組み合わせて使うことも多い指定です。
3:30スマートフォンとパソコンで領域の形が変わる場合でも、カバーなら隙間なく表示し続けられるので、
3:35レスポンシブなデザインでも重宝します。
3:40コンテインは、カバーと対になる考え方です。
3:43画像の縦横比を保ったまま、画像全体が領域の中にすっぽり収まる大きさに調整します。
3:49ロゴやイラストのように、端まで全部見せたい画像に向いています。
3:54その代わり、画像と領域の比率が合わない場合は、上下や左右に余白が残り、そこには背景色が見えることがあります。
4:02まとめると、隙間なく覆いたいならカバー、全体を見せたいならコンテイン、と覚えましょう。
4:09どちらが正解かは、画像の内容と見せたい目的で決まります。
4:13逆に、全面に敷き詰める必要がないバナーやサムネイルでは、あえてコンテインを選ぶことで、
4:18画像の大切な部分が切れる事故を防げます。
4:23ここからは実例です。
4:24エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
4:31中には文章が入っていて、背景の模様の上で文字がどう見えるかも一緒に確認できるようにしています。
4:39頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:44シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠と文字色を付けます。
4:53この土台は変えずに、最後のバックグラウンドサイズの行だけを切り替えて比べていくのが、
4:57この実例の進め方です。
5:01土台のシーエスエスの続きです。
5:04デモの箱には、高さの下限と、背景画像として円形のグラデーションを指定します。
5:10これで緑色の小さなドットが一つの模様になります。
5:14この模様が繰り返し並ぶとき、一枚分のタイルの大きさを決めるのがバックグラウンドサイズです。
5:22タイルが小さければドットは細かく密に並び、タイルが大きければドットも大きく間隔も広がります。
5:30写真一枚の場合と違い、繰り返し模様では、サイズの変更が模様全体の密度として表れるのがポイントです。
5:38この準備が、次の比較を分かりやすくしてくれます。
5:42背景色も薄い緑を指定しておくことで、ドットの間から下地が見え、タイルの区切りがより分かりやすくなるようにしています。
5:52では比較です。
5:53最初はバックグラウンドサイズに四十ピクセル、四十ピクセルを指定します。
5:59ファイルを保存してブラウザーを再読み込みすると、小さなドットが細かく、密に並んで見えます。
6:06次に、最後の行の値だけを八十ピクセル、八十ピクセルに置き換えてみましょう。
6:12他の指定はすべて同じです。
6:14今度はタイル一枚が縦横ともに二倍になるので、ドット自体も大きくなり、並ぶ数も減って、
6:19全体が粗い模様に見えます。
6:23値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
6:30効かないと感じたときの確認です。
6:33まず大前提として、大きさを変える対象、つまり背景画像がなければ何も変わりません。
6:38背景色だけの要素では、このプロパティを指定しても見た目は変わらないので、
6:42イメージが指定されているか確認してください。
6:46次に注意したいのが、背景をまとめて指定するバックグラウンドの一括指定です。
6:51サイズより後に書くと、サイズが初期値へ戻ってしまうことがあります。
6:56あわせて、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、
7:02開発者ツールで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値を確認します。
7:09最後に互換性とまとめです。
7:10バックグラウンドサイズは、クロームさん以降、エッジじゅうに以降、ファイアフォックスよん以降、
7:16サファリご以降と、主要ブラウザーで広く対応している、安心して使えるプロパティです。
7:22まとめます。
7:23初期値はオート、オートで継承はせず、長さや割合で直接指定でき、カバーは領域を覆って一部が切り取られ、
7:28コンテインは全体を収めて余白が残る場合がありました。
7:34練習として、四十ピクセルと八十ピクセルの違いを言葉で説明してみてください。
7:39関連するイメージ、ポジション、リピートの記事もあわせて読むと、背景の理解がぐっと深まります。
7:45お疲れさまでした。

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

この動画で学べること

background-sizeの役割と主な指定値を解説。背景の模様の1単位の大きさが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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