VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、バックグラウンドカラーです。
0:06これは、要素の背景に色を付ける、とても基本的なプロパティです。
0:10文字の色を変えるカラーとは役割が違い、こちらは文字の後ろ側、下地になる色を担当します。
0:16この動画では、基本の書き方から、色の指定方法、透明や半透明の扱い、そして効かないときの確認方法までを順番に見ていきます。
0:25特に、薄い緑と薄いオレンジという二つの色を比べることで、背景だけが変わり、
0:29文字はそのまま残る様子をはっきり確認します。
0:33背景色はサイトの印象を決める土台でもあるので、最初にしっかり身につけておきましょう。
0:39まず基本の書き方です。
0:41スライドのように、対象のクラスにバックグラウンドカラーと、色を表す値を書きます。
0:47プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
0:54クラス名は、エイチティーエムエルのクラス属性と一致させてください。
0:59大切なのは初期値です。
1:01何も指定しなければ値はトランスペアレント、つまり透明で、後ろが透けて見えます。
1:07通常は親から子へ継承しませんので、背景色が欲しい要素ごとに、自分で指定する必要があります。
1:14セミコロンを忘れると次の宣言まで影響することがあるので、書き終わったら見直す習慣を付けましょう。
1:22色の書き方には、いくつか種類があります。
1:26一つ目は色名です。
1:28トマトやスカイブルーのような、あらかじめ用意された名前で指定できます。
1:35二つ目は十六進数です。
1:37シャープの後ろに六桁の英数字を並べる書き方で、今回の薄い緑もこの形で書かれています。
1:46三つ目はアールジービーです。
1:48赤、緑、青の三色の量を数値で指定します。
1:52どの書き方を選んでも、最終的に表示される色が同じなら結果は同じです。
1:59細かく色を調整したいときほど、十六進数やアールジービーが便利です。
2:06迷ったときは、デザインで使っている色を十六進数で統一しておくと、後から探しやすくなります。
2:15透明に関する指定も押さえておきましょう。
2:18トランスペアレントは、完全に透明な背景を表すキーワードで、初期値でもあります。
2:23もう少し応用として、背景だけを半透明にしたい場合は、アルファ値付きの色を使います。
2:29たとえばアールジービーエーでは、四つ目の値で不透明度を調整でき、ゼロに近いほど透けて見えます。
2:35背景色の下に写真や別の色があるとき、この半透明がとても役立ちます。
2:40色そのものを薄く見せたいのか、透けさせたいのかで、書き方を使い分けてください。
2:46透明度を変えたら、必ず実際の背景の上で文字の読みやすさを確認してください。
2:51ここで間違えやすいのが、オパシティとの違いです。
2:55オパシティは要素全体の不透明度を変えるプロパティなので、背景だけでなく、
2:59中の文字や画像までまとめて薄くなってしまいます。
3:04読みやすさを保ちたい場面でこれを使うと、文字までぼんやりしてしまうことがあります。
3:11背景だけを薄くしたいなら、先ほど紹介したアルファ値付きの色でバックグラウンドカラーを指定するのが正解です。
3:19何を薄くしたいのか、背景だけか全体かを先に決めてから、プロパティを選ぶようにしましょう。
3:27この違いを覚えておくと、意図せず文字が読みにくくなる失敗を防げます。
3:32ここからは実例です。
3:33エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:40中には文章が入っていて、背景色の上で文字がどう見えるか、文章が折り返す様子も一緒に確認できるようにしています。
3:49頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:54シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けます。
3:59この土台は変えずに、最後のバックグラウンドカラーの行だけを切り替えて比べていくのが、
4:03この実例の進め方です。
4:07親子関係を意識して書くことで、背景がどの範囲に付くのかがイメージしやすくなります。
4:13土台のシーエスエスの続きです。
4:15デモの箱には、内側の余白と、緑色の太い枠と、背景の下地になる薄い緑、そして文字色を指定します。
4:22この準備があることで、背景色が変わったときの違いが、はっきり見えるようになります。
4:29続く別のルールで、デモに対してバックグラウンドカラーに同じ薄い緑を指定します。
4:34同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されるので、
4:39この最後の行が比較の対象になります。
4:43土台と変更行を分けて書くことが、原因を追いやすくするコツです。
4:48特に文字色との組み合わせは、背景を変えるたびにコントラストを確認するのが大切です。
4:54では比較です。
4:55最初は薄い緑、シャープ、イーろく、エフに、シーイーを指定します。
5:01ファイルを保存してブラウザーを再読み込みすると、箱の背景がやさしい緑色で表示され、
5:05文字は濃い緑のまま読めます。
5:10次に、最後の行の値だけを薄いオレンジ、シャープ、エフエー、イーご、ディーろくに置き換えてみましょう。
5:18他の指定はすべて同じです。
5:21今度は背景だけが温かみのある色に変わり、文字の色や余白、枠はそのままです。
5:27値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
5:34色が変わるだけで、同じ文章でも受ける印象が大きく変わる点にも注目してください。
5:41色以外の共通値も知っておくと、設定をリセットしたいときに役立ちます。
5:46インヘリットは、親要素の計算された背景色をそのまま使う指定です。
5:51イニシャルは、仕様で決められた初期値、つまりトランスペアレントに戻します。
5:57アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。
6:05バックグラウンドカラーは通常継承しないので、アンセットはイニシャルと同じ結果になります。
6:12リバートなどはカスケードの由来を巻き戻す値で、単に直前の行に戻る指定ではない点も覚えておきましょう。
6:20普段は色を直接書くことが多いですが、共通値は上書きを整理したいときに知っていると安心です。
6:27効かないと感じたときは、順番に確認しましょう。
6:31まず開発者ツールのネットワークで、スタイルシートが正常に取得されているかを見ます。
6:37次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを確認します。
6:44続いてスタイルズで、宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見てください。
6:52最後にコンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかもチェックします。
7:02一つずつ確かめれば、原因は必ず絞り込めます。
7:06焦らず上から順に原因を潰していくことが、初心者のうちから身につけたい確かめ方です。
7:12最後に互換性とまとめです。
7:14バックグラウンドカラーは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
7:20サファリいち以降と、主要ブラウザーで古くから広く対応している、安心して使えるプロパティです。
7:26まとめます。
7:26初期値はトランスペアレントで継承はせず、色名や十六進数、アールジービーで色を指定でき、
7:31アルファ値で背景だけを半透明にもできました。
7:35練習として、薄い緑と薄いオレンジの違いを言葉で説明してみてください。
7:39関連するバックグラウンドやバックグラウンドイメージの記事もあわせて読むと理解が深まります。
7:45まずは自分の手で二色を切り替える練習から始めてみてください。
7:49お疲れさまでした。

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

この動画で学べること

background-colorの役割と主な指定値を解説。文字の色を保ったまま背景色が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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