SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ボーダーカラーです。
  4. 0:06これは、要素の枠線の色だけを指定するプロパティです。
  5. 0:10太さや線の種類は変えずに、色だけを差し替えられるので、デザインの調整がとてもしやすくなります。
  6. 0:17たとえば、注意を引く枠は温かい茶色に、落ち着いた案内は深い緑色に、といった使い分けができます。
  7. 0:24この動画では、基本の書き方、値を四つまで並べる方法、文字色を参照する仕組み、
  8. 0:29効かないときの注意点までを順番に見ていきます。
  9. 0:34記事の実例に沿って、シャープ九ビー四五一ディーという茶色と、シャープ二八五シー四〇という緑色を比べて、
  10. 0:38違いを目で確かめましょう。
  11. 0:43まず基本の書き方です。
  12. 0:45対象のクラスにボーダーカラーと書き、コロンのあとに色を書き、最後にセミコロンを付けます。
  13. 0:51スライドの例では、シャープ九ビー四五一ディーという茶色を指定しています。
  14. 0:56これだけで、四辺すべての枠線が同じ茶色になります。
  15. 1:00クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。
  16. 1:06ただし、色を指定しただけでは線は見えません。
  17. 1:09線そのものを描くには、太さと線の種類がそろっている必要があります。
  18. 1:13その条件は後のセクションでも繰り返し確認します。
  19. 1:17まずはこの一行の形を覚えましょう。
  20. 1:19色の書き方は一つではありません。
  21. 1:22レッドやブルーといった色の名前でも書けますし、シャープで始まる十六進数のカラーコードや、
  22. 1:26アールジービー関数でも指定できます。
  23. 1:31プロジェクトで決めた色を正確に再現したいときは、コードや関数で数値をそろえる書き方が向いています。
  24. 1:38特別な値として、トランスペアレントを指定すると枠線は透明になり、色は見えなくなりますが、
  25. 1:43太さ分の場所はそのまま残ります。
  26. 1:47逆に、後で出てくるカレントカラーは文字色と連動する値です。
  27. 1:52まずは、普段使っている色の指定方法でボーダーカラーが書ける、ということを押さえてください。
  28. 1:58値は一つだけでなく、最大で四つまで並べられます。
  29. 2:03一つ書けば上、右、下、左の四辺すべてが同じ色になります。
  30. 2:07二つ書くと、一つ目が上下、二つ目が左右というペアになります。
  31. 2:12三つ書くと、真ん中の値が左右で共用されます。
  32. 2:16四つ書けば、上、右、下、左の順に、一つずつ個別に決められます。
  33. 2:22たとえば、上辺だけ赤くして見出しのように強調したり、下辺だけ違う色にして区切りにしたりできます。
  34. 2:30順番は上から時計回りと覚えると、読み間違えにくくなります。
  35. 2:35辺ごとに色を変えるときは、ブラウザーでどの辺が変わったか、一辺ずつ確かめながら進めましょう。
  36. 2:43ここで大切なのがカレントカラーです。
  37. 2:45これは、その要素に指定された文字の色、つまりカラープロパティの値をそのまま参照するキーワードです。
  38. 2:52ボーダーカラーの初期値は、構成する四つの個別プロパティの初期値を参照すると定義されていて、
  39. 2:57実質的にはカレントカラーが基準になります。
  40. 3:02そのため、枠線の色を特に指定していない要素では、文字色を変えると枠の色も一緒に変わって見えることがあります。
  41. 3:09また、辺ごとに専用の個別プロパティもあり、上辺だけならボーダートップカラーのように書けます。
  42. 3:16普段はまとめて書き、特定の辺だけ変えたいときに個別の指定を使うと管理しやすくなります。
  43. 3:22初期値と継承を確認します。
  44. 3:24先ほど触れたとおり、初期値は四辺に対応する個別プロパティの初期値を参照して決まります。
  45. 3:30そして、このプロパティは通常、親から子へ継承しません。
  46. 3:34親の箱の枠線を赤くしても、中の子要素の枠が自動で赤くなるわけではないのです。
  47. 3:40共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
  48. 3:47アンセットは、継承しない項目なのでイニシャルとして扱われます。
  49. 3:51リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻る指定ではありません。
  50. 3:58必要な要素それぞれに指定する、という前提を覚えておきましょう。
  51. 4:02ここからは実例です。
  52. 4:04エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  53. 4:11中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  54. 4:18頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  55. 4:24今回確認したいのは文章そのものではなく、箱を囲む枠線の色です。
  56. 4:29文章量は枠の色に直接影響しませんが、土台の状態を先に固定してから値を比べると、
  57. 4:34色だけが変わったことをはっきり確かめられます。
  58. 4:39親のステージは、比較のための余白と背景を用意する役割だと考えてください。
  59. 4:45土台のシーエスエスです。
  60. 4:47全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
  61. 4:55デモの箱には一レムの内側余白と、三ピクセルの実線の枠、薄い緑の背景と文字色を指定します。
  62. 5:02土台の枠の色は緑色のシャープ二八五シー四〇です。
  63. 5:06そのうえで、最後の行でボーダーカラーに茶色のシャープ九ビー四五一ディーを指定すると、
  64. 5:11太さも実線という種類もそのままに、色だけが茶色へ変わります。
  65. 5:17次に値だけを元の緑色へ戻してみましょう。
  66. 5:20内容も位置もまったく動かず、枠の色だけが切り替わります。
  67. 5:25変えたのはこの一行だけ、という点に注目してください。
  68. 5:29使うときの注意点です。
  69. 5:31もっとも多いつまずきは、色だけを指定して線が見えないケースです。
  70. 5:36枠線を描くには、ボーダースタイルでソリッドなどの種類を指定し、ボーダーウィドゥスで太さも確保する必要があります。
  71. 5:45スタイルがノーンだったり、太さがゼロだったりすると、どんな色を指定しても線は表示されません。
  72. 5:52記事も、線を描くにはスタイルと幅も必要だと強調しています。
  73. 5:56もう一つは、カレントカラーの連動です。
  74. 5:59色をカレントカラーにしていると、文字色を変えたときに枠まで一緒に変わります。
  75. 6:05意図した連動なのか、固定したい色なのかを分けて考えましょう。
  76. 6:10色、種類、太さの三点セットで確認する習慣が大切です。
  77. 6:14効かないと感じたときの確認手順です。
  78. 6:16まず開発者ツールで順番に調べます。
  79. 6:19ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとシーエスエスのセレクターが一致しているか、
  80. 6:25スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、
  81. 6:31最後にコンピューテッドで最終的な四辺の色を確認します。
  82. 6:37特に、ショートハンドのボーダーで後から色まで上書きしていないかは見落としやすい点です。
  83. 6:44三百二十ピクセル程度の狭い画面や文字の拡大、キーボード操作でも内容を利用できるか、
  84. 6:47あわせて確認しましょう。
  85. 6:51一度に全部を直さず、一か所ずつ原因を切り分けると解決が早くなります。
  86. 6:56最後に互換性とまとめです。
  87. 6:58記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  88. 7:04ファイアフォックス一以降、サファリ一以降などで対応が示されていて、とても長く安心して使えるプロパティです。
  89. 7:11まとめます。
  90. 7:12ボーダーカラーは枠線の色だけを指定するプロパティで、色を最大四つまで並べて辺ごとに変えられ、
  91. 7:17カレントカラーで文字色とも連動でき、通常は継承しませんでした。
  92. 7:23練習として、シャープ九ビー四五一ディーとシャープ二八五シー四〇の違いを言葉で説明し、
  93. 7:27文章量や親の幅だけを変えて結果を比べてみてください。
  94. 7:32関連するボーダースタイルやボーダーウィドゥスも学ぶと、枠線の調整が一通りできるようになります。
  95. 7:39お疲れさまでした。
  96. 7:40まずは手元のカードの枠線の色だけを変えて、印象の変化を試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

border-colorの役割と主な指定値を解説。内容を動かさず、枠線の色だけが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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