VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、バックグラウンドポジションです。
0:06これは、背景画像を要素の中のどこに置くかを指定するプロパティです。
0:11たとえば、小さなドット模様なら、その模様が始まる位置がずれますし、大きな写真なら、
0:15見せたい部分がどこに来るかが変わります。
0:20この動画では、基本の書き方から、左や中央などのキーワード、ピクセルやパーセントでの指定、
0:25そして割合の計算でつまずきやすいポイントまでを順番に見ていきます。
0:31背景画像の位置は、大きさや繰り返しとセットで考えることが多いので、それらのプロパティとの組み合わせも意識しながら聞いてみてください。
0:40まず基本の書き方です。
0:42スライドのように、対象のクラスにバックグラウンドポジションと、位置を表す値を書きます。
0:49プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
0:56クラス名は、エイチティーエムエルのクラス属性と一致させてください。
1:01大切なのは初期値です。
1:03何も指定しなければ、値はゼロパーセント、ゼロパーセント、つまり背景は左上に置かれます。
1:10左上以外に置きたい場合は、必ず自分で値を書く必要があります。
1:15通常は親から子へ継承しませんので、背景が欲しい要素ごとに指定しましょう。
1:20位置の指定で最も分かりやすいのが、キーワードです。
1:25横方向は、レフトで左端、センターで中央、ライトで右端を表します。
1:31縦方向は、トップで上端、センターで中央、ボトムで下端です。
1:36値を二つ並べると、原則として最初が横方向、二番目が縦方向になります。
1:42たとえば、ライト、ボトムと書けば、画像は右下に置かれます。
1:47値を一つだけ書いた場合は、もう一方は自動でセンターとして扱われます。
1:53まずはこのキーワードで、九つの基本位置、左上から右下までをイメージできるようになることが目標です。
2:02直感的に読めるので、端や中央に寄せたいときは迷わずキーワードを使いましょう。
2:09キーワードでは足りないときは、長さや割合で細かく指定します。
2:14たとえば、二十ピクセル、二十ピクセルと書くと、左上を基準に、横へ二十ピクセル、
2:19縦へ二十ピクセルずらした位置に画像が置かれます。
2:24少しだけずらしたいときに便利です。
2:27割合で書くこともでき、五十パーセント、五十パーセントは中央、つまりセンター、
2:31センターと同じ意味になります。
2:35キーワードと数値を混ぜて書くこともできます。
2:39ただし、割合の計算には独特のルールがあり、単純に箱の幅の何パーセント、とはならない点に注意が必要です。
2:47その仕組みは次のセクションでしっかり確認します。
2:51割合の計算は、このプロパティで一番つまずきやすいところです。
2:56基準は、箱全体の座標ではありません。
2:59領域の大きさから画像の大きさを引いた、余りの幅に対して割合がかかります。
3:05具体的に言うと、五十パーセントを指定すると、画像の中心が領域の中心に重なる位置に置かれます。
3:12百パーセントでは、画像の右端が領域の右端にぴったり合います。
3:17ゼロパーセントでは左端どうしが合います。
3:21つまり割合は、画像を動かせる範囲の中での位置を表しているのです。
3:26この考え方を知っていると、なぜ五十パーセントで中央になるのかが、暗記ではなく理解で説明できるようになります。
3:35ここからは実例です。
3:36エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:43中には文章が入っていて、背景の上で文字がどう見えるかも一緒に確認できるようにしています。
3:49頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:54シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠と文字色を付けます。
4:02この土台は変えずに、最後のバックグラウンドポジションの行だけを切り替えて比べていくのが、
4:06この実例の進め方です。
4:10土台のシーエスエスの続きです。
4:12デモの箱には、高さの下限と、背景画像として円形のグラデーションを指定します。
4:18これで緑色の小さなドットが一つの模様になります。
4:22バックグラウンドサイズは四十ピクセルかける四十ピクセルで、この小さなタイルが繰り返し並ぶ設定です。
4:30ここで大切なのは、繰り返される模様にも、並び始める起点があるということです。
4:35バックグラウンドポジションは、その起点を決める役割も持っています。
4:40模様が小さいからこそ、起点がずれると全体の並びがずれて見えます。
4:45この準備が、次の比較を分かりやすくしてくれます。
4:49では、今回変更するプロパティとして、バックグラウンドポジションにゼロ、ゼロを指定した状態を見てみましょう。
4:57ファイルを保存してブラウザーを再読み込みすると、ドットの模様は左上を起点に、
5:01きれいに並び始めます。
5:05箱の左端や上端に沿って模様がそろって見えるのが特徴です。
5:10これは初期値のゼロパーセント、ゼロパーセントと同じ位置です。
5:14まずはこの状態を基準として覚えてください。
5:18次に値を変えたとき、模様全体がどれだけ動いたかを比べる物差しになります。
5:23位置の指定は、画像を一枚だけ置く場合だけでなく、繰り返し模様の起点にも効いている、
5:28という点がここでの学びです。
5:32次に、最後の行の値だけを、二十ピクセル、二十ピクセルに置き換えてみましょう。
5:39他の指定はすべて同じです。
5:41今度は模様の起点が右へ二十ピクセル、下へ二十ピクセル動き、それに合わせてドット全体の並びが右下へずれます。
5:50タイル一枚が四十ピクセルなので、ちょうど半タイル分ずれたことになり、左端や上端ではドットが半分だけ顔を出す形になります。
6:00たった一つの値で模様の位相が変わる、というのが実感できると思います。
6:06値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
6:14効かないと感じたときの確認です。
6:16まず大前提として、位置を変える対象、つまり背景画像がなければ何も動きません。
6:21背景色だけの要素では、このプロパティを指定しても見た目は変わらないので、
6:26イメージが指定されているか確認してください。
6:30次に多いのが、割合の思い違いです。
6:32五十パーセントは箱の半分の位置ではなく、中央に一致する位置だという計算ルールを思い出しましょう。
6:39あわせて基本の確認として、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、
6:47開発者ツールのスタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値を確認します。
6:55最後に互換性とまとめです。
6:57バックグラウンドポジションは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
7:02サファリいち以降と、非常に古くからすべての主要ブラウザーで対応している、
7:08安心して使えるプロパティです。
7:14まとめます。
7:15初期値はゼロパーセント、ゼロパーセントで継承はせず、キーワード、長さ、割合で位置を指定でき、
7:20割合は領域と画像の差が基準でした。
7:25練習として、ゼロ、ゼロと、二十ピクセル、二十ピクセルの違いを言葉で説明してみてください。
7:33関連するサイズ、リピート、イメージの記事もあわせて読むと、背景の理解がぐっと深まります。
7:40お疲れさまでした。

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

この動画で学べること

background-positionの役割と主な指定値を解説。背景模様の開始位置がずれます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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