SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:26動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、バックグラウンドです。
  4. 0:05これは、要素の背景に関する設定を、色や画像、位置、大きさ、繰り返しまで、
  5. 0:09一行でまとめて指定できるショートハンドプロパティです。
  6. 0:14たとえば、背景をなめらかなグラデーションからやさしい単色へ、まとめて切り替えるような使い方をします。
  7. 0:20この動画では、バックグラウンドで何がまとまるのか、スラッシュで区切る書き方、
  8. 0:25そして知らないとハマる初期化の注意点まで、順番に見ていきます。
  9. 0:30背景はすべてのページで使う基本中の基本ですので、最初に全体像をつかみましょう。
  10. 0:35色と画像の両方を一度に切り替えられる手軽さが、このプロパティの魅力です。
  11. 0:40まず基本の書き方です。
  12. 0:41スライドのように、対象のクラスにバックグラウンドと、色や画像などの値を並べて書きます。
  13. 0:48プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  14. 0:54クラス名は、エイチティーエムエルのクラス属性と一致させてください。
  15. 0:59このプロパティ自体に単一の初期値があるわけではなく、まとめている個別プロパティそれぞれの初期値に戻ります。
  16. 1:07通常は親から子へ継承しません。
  17. 1:09背景は要素ごとに自分で指定するものだと覚えておきましょう。
  18. 1:13書く場所は通常のスタイルシートで、他のプロパティと同じルールで大丈夫です。
  19. 1:19バックグラウンドでまとめて指定できるのは、全部で八つの個別プロパティです。
  20. 1:24背景色のバックグラウンドカラー、背景画像のバックグラウンドイメージ、位置のポジション、
  21. 1:29大きさのサイズ、繰り返しのリピート、基準のオリジン、表示範囲のクリップ、
  22. 1:34そしてスクロールへの追従を決めるアタッチメントです。
  23. 1:38これらを一行に並べられるのがショートハンドの便利さです。
  24. 1:42すべてを毎回書く必要はなく、必要なものだけを書けますが、書かなかった分は初期値に戻る、
  25. 1:47という点が次の大切なポイントになります。
  26. 1:51まずは八つの名前と役割の対応を、ざっくり頭に入れておきましょう。
  27. 1:55名前が長いので、最初はこのスライドで見比べながら書くのがおすすめです。
  28. 2:00値の例を見てみましょう。
  29. 2:02一番シンプルなのは、色だけを指定する書き方です。
  30. 2:05カラーコードを一つ書けば、その単色が背景になります。
  31. 2:09もう一つが、リニアグラデーションを使う書き方です。
  32. 2:13角度と二つの色を指定すると、色がなめらかに移り変わるグラデーションが背景画像として表示されます。
  33. 2:19ここが面白いところで、グラデーションは画像の一種として扱われます。
  34. 2:24単色は背景色、グラデーションは背景画像、と役割が分かれるのです。
  35. 2:29この違いが、後で学ぶ重なりや初期化を理解するカギになります。
  36. 2:33迷ったら、まず単色から試して、物足りなければグラデーションに変えてみましょう。
  37. 2:39位置と大きさを両方指定するときに、特別なルールがあります。
  38. 2:43まず位置を書き、スラッシュを挟んで、その直後に大きさを書きます。
  39. 2:48たとえば、センター、スラッシュ、カバー、と書けば、画像を中央に置き、全体を覆う大きさにします。
  40. 2:55スラッシュがないと、大きさとして解釈されず、指定が無効になってしまうこともあります。
  41. 3:02順番にも注意してください。
  42. 3:04大きさだけを単独で書くことはできず、必ず位置の後ろにスラッシュとセットで書くのが決まりです。
  43. 3:11最初は戸惑いますが、この組み合わせだけ覚えれば十分です。
  44. 3:15他の値、たとえば繰り返しは、スラッシュの後ろに続けて書くことができます。
  45. 3:21ここからは実例です。
  46. 3:23エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  47. 3:29中には短い文章が入っています。
  48. 3:32シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠、
  49. 3:36文字色、そして薄い緑の背景を付けます。
  50. 3:41この土台があるからこそ、背景の変化が見えるようになります。
  51. 3:45土台はそのままにして、最後のバックグラウンドの行だけを切り替えて比べていくのが、
  52. 3:49この実例の進め方です。
  53. 3:53文章があることで、背景の上で文字が読めるかどうかも一緒に確認できます。
  54. 3:58土台に、バックグラウンドでリニアグラデーションを指定した状態がこちらです。
  55. 4:04百三十五度の角度で、薄い緑から薄い青へ、色が斜めになめらかに移り変わります。
  56. 4:10背景いっぱいにグラデーションが広がり、単色のときとは印象が大きく変わります。
  57. 4:16ファイルを保存してブラウザーを再読み込みし、まずこのグラデーションの見た目をしっかり確認してください。
  58. 4:24この状態が、次の単色との比較の基準になります。
  59. 4:27ヒーロー領域や見出しの帯など、少し目立たせたい場所でよく使われる表現です。
  60. 4:33色の境目がはっきりせず、柔らかい印象になるのがグラデーションの特徴です。
  61. 4:39では、最後の値だけを単色に変えてみましょう。
  62. 4:42他の指定はすべて同じです。
  63. 4:44今度はグラデーションが消えて、やさしいオレンジ系の単色が背景全体に広がります。
  64. 4:50画像から色へ、まとめて切り替わったことが分かります。
  65. 4:54画像ファイルを使いたい場合は、ユーアールエルの形でファイルの場所を書き、
  66. 4:59繰り返しや位置を続けて指定することもできます。
  67. 5:03色だけ、画像だけ、あるいは画像と色の両方、というように、組み合わせを一行で表現できるのが、
  68. 5:08バックグラウンドの強みです。
  69. 5:13背景色は画像が読み込めないときの下地にもなるので、合わせて書くと安心です。
  70. 5:18ここで一番大切な注意点です。
  71. 5:20バックグラウンドは、書かなかった個別の値をすべて初期値に戻してしまいます。
  72. 5:25たとえば、先にバックグラウンドサイズやリピートを丁寧に設定していても、後からバックグラウンドで色だけを書くと、
  73. 5:30そのサイズや繰り返しの設定まで消えてしまうのです。
  74. 5:35これが、背景が急に崩れた、というトラブルの代表的な原因です。
  75. 5:39色だけを変えたいときは、ショートハンドではなく、バックグラウンドカラーだけを使ってください。
  76. 5:45まとめる指定は、まとめて書き直すときに使う、と覚えておきましょう。
  77. 5:49順番を入れ替えて、ショートハンドを先に書き、個別指定を後に書く手もあります。
  78. 5:54効かないと感じたときの確認です。
  79. 5:57まず、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを確かめます。
  80. 6:04次に、開発者ツールのスタイルズで、宣言が無効になっていないか、後の宣言に上書きされていないかを見ます。
  81. 6:13特に、スラッシュの書き忘れや、値の順番の間違いは無効になりやすい部分です。
  82. 6:19コンピューテッドで最終的な値を確認し、要素に幅や高さがあるかも合わせて調べましょう。
  83. 6:26小さな画面幅や文字を拡大した状態でも、文字が背景の上で読みやすいかどうかの確認も大切です。
  84. 6:33ネットワークで画像ファイル自体が取得できているかも、あわせて確認しましょう。
  85. 6:39最後に互換性とまとめです。
  86. 6:42バックグラウンドは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
  87. 6:46サファリいち以降と、非常に古くからすべての主要ブラウザーで対応している、
  88. 6:51安心して使えるプロパティです。
  89. 6:56まとめます。
  90. 6:57バックグラウンドは背景の八つの設定をまとめるショートハンドで、継承はしませんでした。
  91. 7:04位置と大きさはスラッシュで区切り、書かなかった値は初期化される点が最重要でした。
  92. 7:10練習として、グラデーションと単色の違いを言葉で説明し、色だけを変えるときに使うプロパティも言えるか、
  93. 7:15確かめてみてください。
  94. 7:19次のリピートの記事で、繰り返しの詳しい指定も学んでいきましょう。
  95. 7:24お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

backgroundの役割と主な指定値を解説。背景を画像から単色へまとめて切り替えます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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