SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、カラーです。
  4. 0:05これは、文字の色を決める、とても基本的なプロパティです。
  5. 0:09背景の色を変える背景色とは役割が違い、カラーが変えるのは文字そのものの色です。
  6. 0:15同じ文章でも、文字の色が変われば印象も読みやすさも大きく変わります。
  7. 0:20今回は、深い緑と茶色という二つの例を比べながら、基本の書き方から色の指定方法、
  8. 0:25効かないときの確認まで、初心者向けに分かりやすく解説します。
  9. 0:30シーエスエスの色の入り口として、しっかり押さえましょう。
  10. 0:34文字の色は、見出しと本文で分けて考えることも多く、サイト全体の統一感を作る土台にもなります。
  11. 0:41まず基本の書き方です。
  12. 0:42カラーと書いてコロンを置き、その後ろに色の値を書き、最後にセミコロンを付けます。
  13. 0:48スライドの例では、デモというクラスを持つ要素の文字を、シャープ、二八五シー、
  14. 0:53四ゼロという十六進数で表した深い緑にしています。
  15. 0:58ドットで始まるクラス名や、コロンとセミコロンの書き忘れがあると効かなくなるので、
  16. 1:03まずはこの三行をそのまま書いてみましょう。
  17. 1:07そしてブラウザーで、ハローシーエスエスという文章の色がどう変わるか確かめてください。
  18. 1:14この形が、すべての色指定の出発点です。
  19. 1:16指定できる値の読み方を確認します。
  20. 1:19色の表し方にはいくつか種類があります。
  21. 1:22レッドやグリーンといった色の名前、シャープで始まる十六進数、アールジービー関数、
  22. 1:26エイチエスエル関数などが代表的です。
  23. 1:30さらに、今の文字色そのものを指すカレントカラーというキーワードや、透明度を持つ色も指定できます。
  24. 1:38どれを使っても、最終的にはブラウザーが一つの色として解釈します。
  25. 1:42最初は十六進数に慣れるのがおすすめですが、場面によって書き方を使い分けられるようになると、
  26. 1:47色の調整がぐっと楽になります。
  27. 1:51迷ったときは、まず色名か十六進数から始めて、慣れてきたら関数にも挑戦してみてください。
  28. 1:58色の書き方をもう少し比べます。
  29. 2:00十六進数は、赤と緑と青の量を二桁ずつ並べたもので、デザインの資料でよく使われます。
  30. 2:08アールジービー関数は、その三つの量を十進数の数値でそのまま書く方法で、透明度を加えることもできます。
  31. 2:17エイチエスエル関数は、色合いと鮮やかさと明るさで色を捉える方法で、少し明るくしたい、
  32. 2:23少し淡くしたいといった調整が直感的に行えます。
  33. 2:29どの書き方でも色そのものは同じように扱われるので、自分が調整しやすい方法を選んで大丈夫です。
  34. 2:38まずは一つの書き方を使いこなしましょう。
  35. 2:42透明度を扱うときは、背景と重なったときの見え方まで含めて、実際の画面で確かめることが大切です。
  36. 2:50初期値と継承を確認します。
  37. 2:52仕様上の初期値はキャンバステキストで、要素の標準の文字色を表す値です。
  38. 2:57ただし、ブラウザーの既定スタイルや別のクラスが付いていれば、画面ではそちらが優先されることもあります。
  39. 3:04そして、このプロパティは親から子へ継承します。
  40. 3:07たとえばボディ要素に文字色を書けば、その中にある見出しや段落にも同じ色が引き継がれます。
  41. 3:14そのため、ページ全体の文字色は広い範囲に一度だけ書き、強調したい場所だけ個別に上書きする使い方が効率的です。
  42. 3:21インヘリットやイニシャルといった共通キーワードも使えます。
  43. 3:25ここからは記事の実例です。
  44. 3:27エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  45. 3:34デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
  46. 3:40頭の部分では、スタイルシートをリンクで読み込んでください。
  47. 3:44この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  48. 3:49まずは土台をそのまま用意しましょう。
  49. 3:51背景や余白は土台として固定されているので、文字色の変化だけに集中して見ることができます。
  50. 3:57土台のシーエスエスです。
  51. 3:59ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  52. 4:05最後の行でカラーに、深い緑を指定します。
  53. 4:09この緑は、枠線の色ともそろえられていて、落ち着いた印象になります。
  54. 4:14ファイルを保存してブラウザーを再読み込みし、まずは文章の色をよく観察してください。
  55. 4:20背景や余白は変えていないので、違いはこの一行だけが生むものです。
  56. 4:25文字色と背景色の組み合わせで、読みやすさがどう感じるかも合わせて確かめておきましょう。
  57. 4:32この段階では、色の名前を覚えるよりも、値と見た目の対応を体で覚えることを意識してください。
  58. 4:39次に最後の行だけを、シャープ、九ビー、四五一ディーという茶色へ置き換えます。
  59. 4:46すると文章の色が深い緑から茶色へ変わり、同じ文章でも温かみのある、まったく違う印象になります。
  60. 4:54変更したのは文字色だけなのに、ページ全体の雰囲気が変わって見えるのが、色の力です。
  61. 5:01変更後はファイルを保存してブラウザーを再読み込みし、違いを自分の言葉で説明してみてください。
  62. 5:08二つの表示を並べて比べると、背景とのコントラストや、読みやすさの差もはっきり分かります。
  63. 5:16間違えやすい点と、効かないときの確認方法です。
  64. 5:20このプロパティで大切なのは、背景と文字の組み合わせで読みやすさが大きく変わる点です。
  65. 5:28薄い背景に薄い文字色では、内容が読めなくなってしまいます。
  66. 5:33また、リンクやエラーの区別を色だけに頼ると、色の違いが分かりにくい人には伝わりません。
  67. 5:40下線や説明文も一緒に添える工夫をしましょう。
  68. 5:44色が効かないと感じたら、開発者ツールでネットワーク、要素、スタイルズ、コンピューテッドの順に確認し、
  69. 5:51セレクターの一致や上書きがないかを調べましょう。
  70. 5:58三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも読めるかどうかも、
  71. 6:02合わせて確認しましょう。
  72. 6:06ブラウザー互換性を確認します。
  73. 6:09記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  74. 6:14エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  75. 6:20アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  76. 6:26とても歴史の長いプロパティなので、今回使った基本の書き方は安心して使えるでしょう。
  77. 6:32ただし、プロパティが使えることと、すべての色の書き方や新しい関数が使えることは別です。
  78. 6:38新しい書き方を使うときは、対象の値まで含めて対応状況を確認しましょう。
  79. 6:44最後に練習とまとめです。
  80. 6:46まとめます。
  81. 6:47カラーは文字の色を決めるプロパティで、色名や十六進数、関数など複数の書き方で指定できました。
  82. 6:54初期値はキャンバステキストで、親から子へ継承しました。
  83. 6:58背景とのコントラストを確認し、色だけに頼らない工夫も大切でした。
  84. 7:03練習として、まず深い緑と茶色の違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
  85. 7:11お疲れさまでした。
  86. 7:13これでシーエスエスのプロパティ編は最終回です。
  87. 7:16関連する背景色やフォントまわりのプロパティも合わせて振り返ると、文字と色の整え方がより確かなものになります。
  88. 7:25自分のページでも、本文はそのままに文字色だけを切り替えて、印象と読みやすさの変化を確かめてみましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

colorの役割と主な指定値を解説。文章の色が深緑から茶色へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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