WEBVTT

1
00:00:00.000 --> 00:00:00.971
こんにちは。

2
00:00:00.971 --> 00:00:03.885
シーエスエス、リファレンス解説です。

3
00:00:03.885 --> 00:00:07.122
今回のテーマは、ボーダーインラインです。

4
00:00:07.122 --> 00:00:14.730
これは、文字が進むインライン方向の、始まり側と終わり側の枠線をまとめて指定するプロパティです。

5
00:00:14.730 --> 00:00:20.719
ふだんの横書きでは、文字は左から右へ進むので、対象になるのは左右の線です。

6
00:00:20.719 --> 00:00:26.385
この動画では、基本の書き方から、論理プロパティという考え方、太さや線の種類、

7
00:00:26.385 --> 00:00:32.050
色の指定、そして効かないときの確認方法までを順番に見ていきます。

8
00:00:32.050 --> 00:00:39.820
太くて目立つ茶色の線と、細い緑の線を比べることで、左右だけが変わる様子をはっきり確認しましょう。

9
00:00:39.820 --> 00:00:41.674
まず基本の書き方です。

10
00:00:41.674 --> 00:00:46.140
スライドのように、対象のクラスにボーダーインラインと書き、値として太さ、

11
00:00:46.140 --> 00:00:50.606
線の種類、色をこの順番で並べます。

12
00:00:50.606 --> 00:00:57.347
プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。

13
00:00:57.347 --> 00:01:01.981
この一文で、インライン方向の始端と終端、横書きなら左と右の両方に、同じ太さ、

14
00:01:01.981 --> 00:01:06.616
同じ種類、同じ色の線が引かれます。

15
00:01:06.616 --> 00:01:13.020
初期値は、太さ、種類、色という個別のプロパティの初期値をそれぞれ参照します。

16
00:01:13.020 --> 00:01:19.592
通常は親から子へ継承しませんので、線が欲しい要素ごとに自分で指定してください。

17
00:01:19.592 --> 00:01:23.755
ここで、論理プロパティという考え方を押さえましょう。

18
00:01:23.755 --> 00:01:29.679
従来のレフトやライトは、画面の左や右という物理的な位置で指定していました。

19
00:01:29.679 --> 00:01:35.763
これに対してインラインやブロックは、文章の流れを基準にした論理的な方向です。

20
00:01:35.763 --> 00:01:41.367
インラインは文字が進む方向、ブロックは段落が積み重なる方向を表します。

21
00:01:41.367 --> 00:01:48.571
横書きではインラインは左右ですが、縦書きに切り替えると、インライン方向は上下に変わります。

22
00:01:48.571 --> 00:01:55.936
つまり同じボーダーインラインの指定でも、書字方向に応じて線の付く辺が自動で切り替わるのです。

23
00:01:55.936 --> 00:02:01.380
多言語や縦書きのページで崩れにくいのが、この考え方の大きな利点です。

24
00:02:01.380 --> 00:02:04.672
値を三つの要素に分けて見てみましょう。

25
00:02:04.672 --> 00:02:06.232
一つ目は太さです。

26
00:02:06.232 --> 00:02:13.684
ピクセルなどの長さのほか、シン、ミディアム、スィックというキーワードでも指定できます。

27
00:02:13.684 --> 00:02:15.590
二つ目は線の種類です。

28
00:02:15.590 --> 00:02:21.308
ソリッドは実線、ダッシュドは破線、ドッテッドは点線などがあります。

29
00:02:21.308 --> 00:02:26.854
特に注意したいのは、種類を指定しなければ線は表示されない点です。

30
00:02:26.854 --> 00:02:30.319
太さだけ書いても見えないことがあります。

31
00:02:30.319 --> 00:02:34.305
三つ目は色で、十六進数や色名などで指定します。

32
00:02:34.305 --> 00:02:41.496
ボーダーインラインは、この太さ、種類、色をまとめた省略記法で、個別に分けたいときは、

33
00:02:41.496 --> 00:02:48.688
ボーダーインラインウィドゥス、スタイル、カラーというプロパティも用意されています。

34
00:02:48.688 --> 00:02:53.997
両側をそろえるのではなく、片側だけ線を引きたい場面もよくあります。

35
00:02:53.997 --> 00:03:02.523
そのときは、始まり側だけのボーダーインラインスタートと、終わり側だけのボーダーインラインエンドを使います。

36
00:03:02.523 --> 00:03:10.406
横書きで文章の左側にだけアクセントの線を引きたいなら、始まり側であるスタートを指定すれば十分です。

37
00:03:10.406 --> 00:03:13.463
引用や補足の目印によく使われる形です。

38
00:03:13.463 --> 00:03:16.520
右側だけ欲しい場合はエンドを選びます。

39
00:03:16.520 --> 00:03:22.070
まとめて指定するボーダーインラインと、片側ずつのスタート、エンドを使い分けることで、

40
00:03:22.070 --> 00:03:27.620
不要な線を引かずに済み、意図も読み取りやすくなります。

41
00:03:27.620 --> 00:03:29.110
ここからは実例です。

42
00:03:29.110 --> 00:03:35.964
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

43
00:03:35.964 --> 00:03:43.711
中には少し長めの文章を入れて、線に囲まれた状態や、文章が折り返す様子も一緒に確認できるようにしています。

44
00:03:43.711 --> 00:03:48.926
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

45
00:03:48.926 --> 00:03:54.886
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けて、舞台を用意します。

46
00:03:54.886 --> 00:03:58.685
この土台は変えずに、最後のボーダーインラインの行だけを切り替えて比べていくのが、

47
00:03:58.685 --> 00:04:02.484
この実例の進め方です。

48
00:04:02.484 --> 00:04:07.848
親子関係を意識すると、線がどの箱の辺に付くのかイメージしやすくなります。

49
00:04:07.848 --> 00:04:10.409
土台のシーエスエスの続きです。

50
00:04:10.409 --> 00:04:14.848
デモの箱には、内側の余白と、四辺すべてに緑色の三ピクセルの枠と、薄い緑の背景、

51
00:04:14.848 --> 00:04:19.287
そして文字色を指定します。

52
00:04:19.287 --> 00:04:26.628
この準備があることで、後から左右だけを変えたときの違いがはっきり見えるようになります。

53
00:04:26.628 --> 00:04:31.920
続く別のルールで、デモに対してボーダーインラインを指定します。

54
00:04:31.920 --> 00:04:38.408
同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。

55
00:04:38.408 --> 00:04:44.896
ですから上下の線は土台のまま残り、左右の線だけが新しい指定に置き換わります。

56
00:04:44.896 --> 00:04:50.188
土台と変更行を分けて書くことが、原因を追いやすくするコツです。

57
00:04:50.188 --> 00:04:51.411
では比較です。

58
00:04:51.411 --> 00:04:55.082
最初は四ピクセル、実線、茶色を指定します。

59
00:04:55.082 --> 00:05:00.150
ファイルを保存してブラウザーを再読み込みすると、箱の左と右だけが太い茶色の線に変わり、

60
00:05:00.150 --> 00:05:05.218
上下は土台の緑のまま残ります。

61
00:05:05.218 --> 00:05:11.335
次に、最後の行の値だけを一ピクセル、実線、緑色に置き換えてみましょう。

62
00:05:11.335 --> 00:05:13.607
他の指定はすべて同じです。

63
00:05:13.607 --> 00:05:18.850
今度は左右の線が細くなり、四辺が同じ緑色でそろって見えます。

64
00:05:18.850 --> 00:05:23.569
変わったのは左右だけ、という点にぜひ注目してください。

65
00:05:23.569 --> 00:05:29.511
前回のボーダーブロックでは上下が変わりましたが、今回はその反対です。

66
00:05:29.511 --> 00:05:37.376
値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。

67
00:05:37.376 --> 00:05:43.596
色や太さ以外の共通値も知っておくと、設定をリセットしたいときに役立ちます。

68
00:05:43.596 --> 00:05:47.967
インヘリットは、親要素の計算された値を使う指定です。

69
00:05:47.967 --> 00:05:52.001
イニシャルは、仕様で決められた初期値に戻します。

70
00:05:52.001 --> 00:05:59.734
アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。

71
00:05:59.734 --> 00:06:06.794
ボーダーインラインは通常継承しないので、アンセットはイニシャルと同じ結果になります。

72
00:06:06.794 --> 00:06:13.855
リバートなどはカスケードの由来を巻き戻す値で、単に直前の行に戻る指定ではありません。

73
00:06:13.855 --> 00:06:22.428
普段は太さと種類と色を直接書くことが多いですが、共通値は上書きを整理したいときに知っていると安心です。

74
00:06:22.428 --> 00:06:26.255
効かないと感じたときは、順番に確認しましょう。

75
00:06:26.255 --> 00:06:29.583
まず多い原因は、線の種類の指定漏れです。

76
00:06:29.583 --> 00:06:35.573
太さと色だけでは、種類が初期状態のままで線が表示されないことがあります。

77
00:06:35.573 --> 00:06:43.061
次に、左右だと思っていたのに縦書きで上下になっていた、という書字方向の違いも考えられます。

78
00:06:43.061 --> 00:06:45.724
続いて開発者ツールで確認します。

79
00:06:45.724 --> 00:06:53.794
ネットワークでスタイルシートが正常に取得されているか、エレメンツで対象のクラスとセレクターが一致しているか、

80
00:06:53.794 --> 00:07:01.864
スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかを見てください。

81
00:07:01.864 --> 00:07:11.848
最後にコンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかもチェックします。

82
00:07:11.848 --> 00:07:13.798
最後に互換性とまとめです。

83
00:07:13.798 --> 00:07:20.400
ボーダーインラインは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

84
00:07:20.400 --> 00:07:27.001
サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。

85
00:07:27.001 --> 00:07:27.902
まとめます。

86
00:07:27.902 --> 00:07:33.753
ボーダーインラインはインライン方向の始端と終端の線をまとめる省略記法で、

87
00:07:33.753 --> 00:07:39.604
横書きでは左右、縦書きでは上下が対象になり、太さ、種類、色の三つを並べて書きました。

88
00:07:39.604 --> 00:07:42.605
片側だけならスタートとエンドも使えます。

89
00:07:42.605 --> 00:07:47.406
練習として、太い茶色と細い緑の違いを言葉で説明してみてください。

90
00:07:47.406 --> 00:07:55.358
関連するボーダーブロックやパディングインラインの記事もあわせて読むと、論理プロパティへの理解が深まります。

91
00:07:55.358 --> 00:07:56.708
お疲れさまでした。