SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ボーダーです。
  4. 0:06これは、要素の周りに付く枠線の、太さ、種類、色を、一行でまとめて指定できるプロパティです。
  5. 0:13箱と箱の区切りを付けたり、カードやボタンの輪郭をはっきりさせたりと、画面の見分けを作る場面でよく使います。
  6. 0:21この動画では、基本の書き方、三つの要素の見分け方、省略したときの注意点、
  7. 0:25効かない原因までを順番に見ていきます。
  8. 0:30記事の実例に沿って、二ピクセルの細い実線と、四ピクセルの太い破線を比べて、
  9. 0:34違いを目で確かめましょう。
  10. 0:37枠線は地味に見えますが、情報のまとまりを伝える大切な手がかりで、初心者が最初に覚える装飾の一つでもあります。
  11. 0:46まず基本の書き方です。
  12. 0:48クラスを指定したら、ボーダーと書き、コロンのあとに、太さ、線の種類、色という順に三つの値を並べ、
  13. 0:53最後にセミコロンを付けます。
  14. 0:58スライドの例は、二ピクセルの太さで、ソリッドという実線を引き、色は濃い緑色にする指定です。
  15. 1:06たった一行で、四辺すべての枠線が同じ見た目になります。
  16. 1:10実はこの三つの値、書く順番は入れ替えても読み取ってくれますが、太さ、種類、
  17. 1:16色の順でそろえた方が読みやすく、間違いにも気付きやすくなります。
  18. 1:22まずはこの形をそのまま覚えましょう。
  19. 1:25慣れてきたら、色の部分を変数に置き換える書き方もありますが、まずは直接値を書いて動きを確かめるのがおすすめです。
  20. 1:34ボーダーの中身を分解してみましょう。
  21. 1:38一番目の太さは、別々に書くとボーダーウィドゥス、二番目の種類はボーダースタイル、
  22. 1:45三番目の色はボーダーカラーという、個別のプロパティが担当しています。
  23. 1:51ボーダーは、この三つをまとめて書ける、いわゆる一括指定のプロパティです。
  24. 1:58普段は一行で済ませて問題ありませんが、あとから色だけ変えたい、太さだけ変えたいというときは、
  25. 2:04個別のプロパティで上書きできます。
  26. 2:10仕組みを知っておくと、設定を部分的に直すときに迷わなくなります。
  27. 2:16このあと、三つの要素を一つずつ見ていきます。
  28. 2:20一つ目の要素、太さです。
  29. 2:22シンは細い、ミディアムは中くらい、シックは太い、というキーワードでも書けますし、
  30. 2:27二ピクセルや四ピクセルのように、長さで正確に決めることもできます。
  31. 2:32太さは枠線の存在感を左右します。
  32. 2:34細ければ控えめな区切り、太ければ目立つ強調になります。
  33. 2:38ただし、太くすれば箱の外側の大きさにも影響する場合があります。
  34. 2:42その点は後の注意点でも触れます。
  35. 2:45実務では、デザインに合わせてピクセルで決めることが多く、まず二ピクセル前後から試すとバランスを取りやすいです。
  36. 2:53逆に、太さをゼロにすれば線は消えます。
  37. 2:55消すときは種類をノーンにする方法と合わせて覚えておきましょう。
  38. 3:00二つ目の要素、線の種類です。
  39. 3:02ソリッドは切れ目のない実線で、最もよく使われます。
  40. 3:06ダッシュドは破線、ドッテッドは点線、ダブルは二重線です。
  41. 3:10ほかにも、溝のように見えるグルーブなど、いくつかの種類があります。
  42. 3:15そして特に大切なのが、ノーンです。
  43. 3:17ノーンは線を表示しない指定で、実はこれが種類の初期値になっています。
  44. 3:23つまり、太さと色だけを決めて種類を書き忘れると、線は一本も見えません。
  45. 3:28枠線が出ないときは、まず種類がソリッドなどになっているかを確かめるのが近道です。
  46. 3:34三つ目の要素、色です。
  47. 3:36色は、井げたで始まる十六進数の値や、色の名前、アールジービー関数などで自由に指定できます。
  48. 3:43枠線の色を変えても、中の文字や背景は変わらないので、輪郭だけを目立たせたいときに便利です。
  49. 3:50もし色を省略すると、初期値として、その要素の文字色と同じ色、カレントカラーが使われます。
  50. 3:57文字色まで変えると枠の色も一緒に変わってしまうので、枠だけ色を固定したい場合は、
  51. 4:02色を明記しておくのが安全です。
  52. 4:06色、太さ、種類の組み合わせで、印象は大きく変わります。
  53. 4:10ここで、一括指定ならではの注意点です。
  54. 4:14ボーダーで書き忘れた要素は、そのまま残るのではなく、初期値に戻ります。
  55. 4:20たとえば、ボーダー、二ピクセル、と太さだけを書くと、種類は初期値のノーンに戻るため、
  56. 4:24線は表示されません。
  57. 4:28色もカレントカラーに戻ります。
  58. 4:31あとから太さだけを変えたいなら、ボーダーではなくボーダーウィドゥスを使う、
  59. 4:35と使い分けましょう。
  60. 4:39また、上の辺だけ線を引きたい場合は、ボーダートップのように、辺ごとの一括指定も用意されています。
  61. 4:47四辺まとめてか、一辺だけか、目的に合わせて選んでください。
  62. 4:52ここからは記事の実例です。
  63. 4:54エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  64. 5:01中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。
  65. 5:08頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  66. 5:13今回比べたいのは文章ではなく、箱を囲む枠線そのものです。
  67. 5:18土台を固定してから枠線だけを差し替えると、太さと種類と色のうち、どれが印象を変えたのかを、
  68. 5:22一つずつ確かめられます。
  69. 5:27この土台は、記事が用意した比較用のもので、枠線以外の色や余白は最初から固定されています。
  70. 5:34土台のシーエスエスです。
  71. 5:36全体にボックスサイジングを指定し、ステージには幅の上限と余白、点線の枠と薄い背景を付けます。
  72. 5:44デモの箱には余白と薄い緑の背景を用意し、最後の行でボーダーに、二ピクセル、
  73. 5:48ソリッド、濃い緑を指定します。
  74. 5:52これが細い実線の状態です。
  75. 5:54次に、最後の行だけを、四ピクセル、ダッシュド、茶色、へ置き換えて再読み込みします。
  76. 6:01すると、太くて途切れた破線の枠に変わり、印象がぐっと強くなります。
  77. 6:06変えたのは枠線の一行だけです。
  78. 6:09三つの要素がそろって初めて線が見えることを、ここで実感してください。
  79. 6:14ブラウザーで保存と再読み込みを繰り返し、細い実線と太い破線を見比べると、
  80. 6:19太さと種類の両方が効いていることがよく分かります。
  81. 6:24効かないときの確認です。
  82. 6:26最も多い原因は、線の種類がノーンのままになっていることです。
  83. 6:31太さや色をいくら変えても、種類がなければ線は出ません。
  84. 6:35次に、同じ要素へ後から別のボーダーが書かれていないかも確認しましょう。
  85. 6:40詳細度が同じなら、後に書いた宣言が優先されます。
  86. 6:44また、枠線を太くすると箱の外側が広がり、レイアウトがずれることがあります。
  87. 6:50大きさを変えずに強調したいときは、輪郭線のアウトラインを使う手もあります。
  88. 6:56記事もこの比較を紹介しています。
  89. 6:58開発者ツールでは、セレクターの一致と、打ち消し線の付いた宣言がないかを順に調べましょう。
  90. 7:05また、狭い画面幅や文字を拡大した状態でも、枠線に囲まれた内容が読みにくくならないかを合わせて確認してください。
  91. 7:14最後に互換性とまとめです。
  92. 7:16記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  93. 7:23ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
  94. 7:29まとめます。
  95. 7:30ボーダーは、太さ、種類、色をまとめて指定する一括指定で、省略した要素は初期値に戻り、
  96. 7:35通常は継承しませんでした。
  97. 7:39練習として、二ピクセルの実線と四ピクセルの破線の違いを言葉で説明し、太さ、
  98. 7:44種類、色を一つずつだけ変えて結果を比べてみてください。
  99. 7:49関連するボーダーウィドゥスやボーダースタイルも学ぶと、枠線の調整が一通りできるようになります。
  100. 7:56お疲れさまでした。
  101. 7:58まずは手元のカードに枠線を付けてみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

borderの役割と主な指定値を解説。細い実線と太い破線の枠を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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