SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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