SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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