SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、バックグラウンドイメージです。
  4. 0:06これは、要素の背景に画像やグラデーションを指定するプロパティです。
  5. 0:11単色の背景色だけでは作れない、写真の質感や、色がなめらかに移り変わるグラデーションを、
  6. 0:15背景として敷くことができます。
  7. 0:19この動画では、基本の書き方から、画像ファイルを指定する方法、グラデーションの作り方、
  8. 0:24そして背景を消すノーンの役割までを順番に見ていきます。
  9. 0:29特に、グラデーションを付けた状態と、背景画像がない状態を比べることで、指定の違いがはっきり分かるように解説します。
  10. 0:37まず基本の書き方です。
  11. 0:39スライドのように、対象のクラスにバックグラウンドイメージと、画像やグラデーションを表す値を書きます。
  12. 0:48プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  13. 0:55クラス名は、エイチティーエムエルのクラス属性と一致させてください。
  14. 1:01大切なのは初期値です。
  15. 1:02何も指定しなければ値はノーンで、背景画像はありません。
  16. 1:07背景を付けたい場合は、必ず自分で値を書く必要があります。
  17. 1:12通常は親から子へ継承しませんので、背景が欲しい要素ごとに指定しましょう。
  18. 1:18代表的な指定の一つが、ユーアールエルを使った画像ファイルの指定です。
  19. 1:24ユーアールエルのかっこの中に、画像ファイルへのパスを書くことで、その画像が背景として表示されます。
  20. 1:31ヒーローイメージのような大きな写真や、繰り返し使う模様の画像などに使われます。
  21. 1:38ただし、パスを一文字でも間違えると画像は読み込まれず、背景は空っぽになってしまいます。
  22. 1:45また、画像が表示されない場合でも文字が読めるように、あわせて背景色を指定しておくのが安全です。
  23. 1:52ファイルの場所と名前は、開発者ツールのネットワークで読み込みを確認すると安心です。
  24. 1:59もう一つの代表がグラデーションです。
  25. 2:01リニアグラデーションは、直線方向へ色がなめらかに移り変わる背景を作ります。
  26. 2:07最初に角度、一三五度のような方向を指定し、続けて始まりの色と終わりの色を並べます。
  27. 2:13今回の例では、薄い緑から薄い青へ、斜め方向に色が変わっていきます。
  28. 2:18画像ファイルを用意しなくても、コードだけで奥行きのある背景が作れるのが大きな利点です。
  29. 2:25色の数を増やせば、より複雑な変化も作れます。
  30. 2:28まずは二色の基本形から試して、角度を変えたときの見え方の違いを確かめてみてください。
  31. 2:34バックグラウンドイメージは、一つだけではなく、複数のレイヤーを重ねることもできます。
  32. 2:41値をカンマで区切って並べると、先に書いたものほど手前に表示されます。
  33. 2:46たとえば、写真の上に半透明のグラデーションを重ねれば、写真を少し暗くして、
  34. 2:51その上の文字を読みやすくする、といった工夫ができます。
  35. 2:56逆に順番を間違えると、大切な画像が隠れてしまうこともあるので、重なり順は意識して書きましょう。
  36. 3:04最初は一つの指定から始めて、必要になったときにレイヤーを足していく進め方がおすすめです。
  37. 3:11ノーンは、背景画像を表示しない、という指定です。
  38. 3:14初期値でもある値なので、はっきりと画像を消したい場面で使います。
  39. 3:19今回の実例でも、グラデーションを指定した状態と、このノーンに置き換えた状態を比べて、
  40. 3:23違いを確認します。
  41. 3:27ノーンに変えても、背景色まで消えるわけではありません。
  42. 3:31背景色はバックグラウンドカラーという別のプロパティが担当しているので、画像だけが消えて、
  43. 3:35下地の色が残ります。
  44. 3:39画像と色は別々に考える、という点を押さえておくと、背景まわりの指定が整理しやすくなります。
  45. 3:46ここからは実例です。
  46. 3:48エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  47. 3:54中には文章が入っていて、背景のグラデーションの上で文字がどう見えるかも一緒に確認できるようにしています。
  48. 4:02頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  49. 4:07シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けます。
  50. 4:11この土台は変えずに、最後のバックグラウンドイメージの行だけを切り替えて比べていくのが、
  51. 4:15この実例の進め方です。
  52. 4:19土台のシーエスエスの続きです。
  53. 4:21デモの箱には、内側の余白と、緑色の太い枠と、背景の下地になる薄い緑、そして文字色を指定します。
  54. 4:28この準備があることで、背景画像が付いたときと消えたときの違いが、はっきり見えるようになります。
  55. 4:35続く別のルールで、デモに対してバックグラウンドイメージにグラデーションを指定します。
  56. 4:42同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されるので、
  57. 4:46この最後の行が比較の対象になります。
  58. 4:50土台と変更行を分けて書くことが、原因を追いやすくするコツです。
  59. 4:55では比較です。
  60. 4:56最初はグラデーションを指定します。
  61. 4:59ファイルを保存してブラウザーを再読み込みすると、箱の背景が薄い緑から薄い青へ、
  62. 5:04斜めになめらかに変わって見えます。
  63. 5:08次に、最後の行の値だけをノーンに置き換えてみましょう。
  64. 5:13他の指定はすべて同じです。
  65. 5:15今度はグラデーションが消えて、下地として用意していた単色の背景だけが残ります。
  66. 5:22写真や色の変化が消えたことで、印象が大きく変わるのが分かります。
  67. 5:27値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
  68. 5:35効かないと感じたときと、間違えやすい点の確認です。
  69. 5:39まず大切な注意として、背景画像には代替テキストのオルトを付けられません。
  70. 5:46内容として重要な画像は、背景ではなくイメージ要素で表示し、説明を付けられる形にしてください。
  71. 5:55背景はあくまで装飾として使い、文字が読める背景色も別に指定しておきましょう。
  72. 6:02表示されない場合は、スタイルシートが読み込めているか、セレクターとクラスが一致しているか、
  73. 6:11開発者ツールで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値を確認します。
  74. 6:20最後に互換性とまとめです。
  75. 6:22バックグラウンドイメージは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
  76. 6:28サファリいち以降と、主要ブラウザーで古くから広く対応している、安心して使えるプロパティです。
  77. 6:34グラデーションについても、主要ブラウザーで対応が進んでいます。
  78. 6:38まとめます。
  79. 6:39初期値はノーンで継承はせず、ユーアールエルで画像を、グラデーションで色の変化を指定でき、
  80. 6:43複数を重ねることもできました。
  81. 6:46練習として、グラデーションとノーンの違いを言葉で説明してみてください。
  82. 6:51関連するカラー、サイズ、ポジション、リピートの記事もあわせて読むと理解が深まります。
  83. 6:57お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

background-imageの役割と主な指定値を解説。グラデーションの背景が付いた状態と、背景画像なしを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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