SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、ボーダーブロックです。
  4. 0:07これは、文章が進む方向ではなく、段落が積み重なるブロック方向の、始まり側と終わり側の枠線をまとめて指定するプロパティです。
  5. 0:18ふだんの横書きでは、ブロック方向は上から下なので、対象になるのは上下の線です。
  6. 0:25この動画では、基本の書き方から、論理プロパティという考え方、太さや線の種類、
  7. 0:32色の指定、そして効かないときの確認方法までを順番に見ていきます。
  8. 0:38太くて目立つ茶色の線と、細い緑の線を比べることで、上下だけが変わる様子をはっきり確認しましょう。
  9. 0:47まず基本の書き方です。
  10. 0:49スライドのように、対象のクラスにボーダーブロックと書き、値として太さ、線の種類、
  11. 0:54色をこの順番で並べます。
  12. 0:58プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
  13. 1:06この一文で、ブロック方向の始端と終端、横書きなら上と下の両方に、同じ太さ、
  14. 1:11同じ種類、同じ色の線が引かれます。
  15. 1:16初期値は、太さ、種類、色という個別のプロパティの初期値をそれぞれ参照します。
  16. 1:23通常は親から子へ継承しませんので、線が欲しい要素ごとに自分で指定してください。
  17. 1:30ここで、論理プロパティという考え方を押さえましょう。
  18. 1:34従来のトップやボトムは、画面の上や下という物理的な位置で指定していました。
  19. 1:40これに対してブロックやインラインは、文章の流れを基準にした論理的な方向です。
  20. 1:46ブロックは段落が積み重なる方向、インラインは文字が進む方向を表します。
  21. 1:51横書きではブロックは上下ですが、縦書きに切り替えると、ブロック方向は左右に変わります。
  22. 1:58つまり同じボーダーブロックの指定でも、書字方向に応じて線の付く辺が自動で切り替わるのです。
  23. 2:05多言語や縦書きのページで崩れにくいのが、この考え方の大きな利点です。
  24. 2:10値を三つの要素に分けて見てみましょう。
  25. 2:13一つ目は太さです。
  26. 2:15ピクセルなどの長さのほか、シン、ミディアム、スィックというキーワードでも指定できます。
  27. 2:22二つ目は線の種類です。
  28. 2:23ソリッドは実線、ダッシュドは破線、ドッテッドは点線などがあります。
  29. 2:29特に注意したいのは、種類を指定しなければ線は表示されない点です。
  30. 2:34太さだけ書いても見えないことがあります。
  31. 2:37三つ目は色で、十六進数や色名などで指定します。
  32. 2:41ボーダーブロックは、この太さ、種類、色をまとめた省略記法で、個別に分けたいときは、
  33. 2:47ボーダーブロックウィドゥス、スタイル、カラーというプロパティも用意されています。
  34. 2:54両側をそろえるのではなく、片側だけ線を引きたい場面もよくあります。
  35. 2:59そのときは、始まり側だけのボーダーブロックスタートと、終わり側だけのボーダーブロックエンドを使います。
  36. 3:07横書きで見出しの下にだけ線を引きたいなら、終わり側であるエンドを指定すれば十分です。
  37. 3:14上の飾り線だけ欲しい場合はスタートを選びます。
  38. 3:18まとめて指定するボーダーブロックと、片側ずつのスタート、エンドを使い分けることで、
  39. 3:23不要な線を引かずに済み、意図も読み取りやすくなります。
  40. 3:28まずは両側か片側か、目的を決めてからプロパティを選んでください。
  41. 3:34ここからは実例です。
  42. 3:35エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  43. 3:42中には少し長めの文章を入れて、線に囲まれた状態や、文章が折り返す様子も一緒に確認できるようにしています。
  44. 3:50頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  45. 3:56シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けて、舞台を用意します。
  46. 4:02この土台は変えずに、最後のボーダーブロックの行だけを切り替えて比べていくのが、
  47. 4:06この実例の進め方です。
  48. 4:10親子関係を意識すると、線がどの箱の辺に付くのかイメージしやすくなります。
  49. 4:16土台のシーエスエスの続きです。
  50. 4:18デモの箱には、内側の余白と、四辺すべてに緑色の三ピクセルの枠と、薄い緑の背景、
  51. 4:22そして文字色を指定します。
  52. 4:27この準備があることで、後から上下だけを変えたときの違いがはっきり見えるようになります。
  53. 4:34続く別のルールで、デモに対してボーダーブロックを指定します。
  54. 4:39同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。
  55. 4:45ですから左右の線は土台のまま残り、上下の線だけが新しい指定に置き換わります。
  56. 4:51土台と変更行を分けて書くことが、原因を追いやすくするコツです。
  57. 4:56では比較です。
  58. 4:57最初は四ピクセル、実線、茶色を指定します。
  59. 5:01ファイルを保存してブラウザーを再読み込みすると、箱の上と下だけが太い茶色の線に変わり、
  60. 5:06左右は土台の緑のまま残ります。
  61. 5:12次に、最後の行の値だけを一ピクセル、実線、緑色に置き換えてみましょう。
  62. 5:18他の指定はすべて同じです。
  63. 5:20今度は上下の線が細くなり、四辺が同じ緑色でそろって見えます。
  64. 5:26変わったのは上下だけ、という点にぜひ注目してください。
  65. 5:31値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
  66. 5:39色や太さ以外の共通値も知っておくと、設定をリセットしたいときに役立ちます。
  67. 5:45インヘリットは、親要素の計算された値を使う指定です。
  68. 5:49イニシャルは、仕様で決められた初期値に戻します。
  69. 5:53アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。
  70. 6:01ボーダーブロックは通常継承しないので、アンセットはイニシャルと同じ結果になります。
  71. 6:07リバートなどはカスケードの由来を巻き戻す値で、単に直前の行に戻る指定ではありません。
  72. 6:14普段は太さと種類と色を直接書くことが多いですが、共通値は上書きを整理したいときに知っていると安心です。
  73. 6:23効かないと感じたときは、順番に確認しましょう。
  74. 6:26まず多い原因は、線の種類の指定漏れです。
  75. 6:29太さと色だけでは、種類が初期状態のままで線が表示されないことがあります。
  76. 6:35次に開発者ツールで確認します。
  77. 6:37ネットワークでスタイルシートが正常に取得されているか、エレメンツで対象のクラスとセレクターが一致しているか、
  78. 6:45スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを見てください。
  79. 6:52最後にコンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかもチェックします。
  80. 7:01一つずつ確かめれば原因は絞り込めます。
  81. 7:04最後に互換性とまとめです。
  82. 7:06ボーダーブロックは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、
  83. 7:12サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
  84. 7:19まとめます。
  85. 7:20ボーダーブロックはブロック方向の始端と終端の線をまとめる省略記法で、横書きでは上下、
  86. 7:25縦書きでは左右が対象になり、太さ、種類、色の三つを並べて書きました。
  87. 7:31片側だけならスタートとエンドも使えます。
  88. 7:34練習として、太い茶色と細い緑の違いを言葉で説明してみてください。
  89. 7:38関連するボーダーインラインの記事もあわせて読むと、論理プロパティへの理解が深まります。
  90. 7:45お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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