WEBVTT

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

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

3
00:00:04.337 --> 00:00:07.770
今回のテーマは、ボーダーブロックです。

4
00:00:07.770 --> 00:00:18.793
これは、文章が進む方向ではなく、段落が積み重なるブロック方向の、始まり側と終わり側の枠線をまとめて指定するプロパティです。

5
00:00:18.793 --> 00:00:25.841
ふだんの横書きでは、ブロック方向は上から下なので、対象になるのは上下の線です。

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

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

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

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

10
00:00:49.211 --> 00:00:54.049
スライドのように、対象のクラスにボーダーブロックと書き、値として太さ、線の種類、

11
00:00:54.049 --> 00:00:58.886
色をこの順番で並べます。

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

13
00:01:06.329 --> 00:01:11.353
この一文で、ブロック方向の始端と終端、横書きなら上と下の両方に、同じ太さ、

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

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

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

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

18
00:01:34.717 --> 00:01:40.427
従来のトップやボトムは、画面の上や下という物理的な位置で指定していました。

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

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

21
00:01:51.694 --> 00:01:58.331
横書きではブロックは上下ですが、縦書きに切り替えると、ブロック方向は左右に変わります。

22
00:01:58.331 --> 00:02:05.276
つまり同じボーダーブロックの指定でも、書字方向に応じて線の付く辺が自動で切り替わるのです。

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

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

25
00:02:13.609 --> 00:02:15.070
一つ目は太さです。

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

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

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

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

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

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

32
00:02:41.370 --> 00:02:47.945
ボーダーブロックは、この太さ、種類、色をまとめた省略記法で、個別に分けたいときは、

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

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

35
00:02:59.759 --> 00:03:07.856
そのときは、始まり側だけのボーダーブロックスタートと、終わり側だけのボーダーブロックエンドを使います。

36
00:03:07.856 --> 00:03:14.524
横書きで見出しの下にだけ線を引きたいなら、終わり側であるエンドを指定すれば十分です。

37
00:03:14.524 --> 00:03:18.176
上の飾り線だけ欲しい場合はスタートを選びます。

38
00:03:18.176 --> 00:03:23.574
まとめて指定するボーダーブロックと、片側ずつのスタート、エンドを使い分けることで、

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

40
00:03:28.972 --> 00:03:34.052
まずは両側か片側か、目的を決めてからプロパティを選んでください。

41
00:03:34.052 --> 00:03:35.620
ここからは実例です。

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

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

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

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

46
00:04:02.742 --> 00:04:06.661
この土台は変えずに、最後のボーダーブロックの行だけを切り替えて比べていくのが、

47
00:04:06.661 --> 00:04:10.580
この実例の進め方です。

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

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

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

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

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

53
00:04:34.203 --> 00:04:39.107
続く別のルールで、デモに対してボーダーブロックを指定します。

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

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

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

57
00:04:56.596 --> 00:04:57.868
では比較です。

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

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

60
00:05:06.956 --> 00:05:12.226
左右は土台の緑のまま残ります。

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

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

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

64
00:05:26.402 --> 00:05:31.309
変わったのは上下だけ、という点にぜひ注目してください。

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

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

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

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

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

70
00:06:01.236 --> 00:06:07.941
ボーダーブロックは通常継承しないので、アンセットはイニシャルと同じ結果になります。

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

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

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

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

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

76
00:06:35.270 --> 00:06:37.571
次に開発者ツールで確認します。

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

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

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

80
00:07:01.661 --> 00:07:04.576
一つずつ確かめれば原因は絞り込めます。

81
00:07:04.576 --> 00:07:06.473
最後に互換性とまとめです。

82
00:07:06.473 --> 00:07:12.822
ボーダーブロックは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

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

84
00:07:19.170 --> 00:07:20.046
まとめます。

85
00:07:20.046 --> 00:07:25.592
ボーダーブロックはブロック方向の始端と終端の線をまとめる省略記法で、横書きでは上下、

86
00:07:25.592 --> 00:07:31.138
縦書きでは左右が対象になり、太さ、種類、色の三つを並べて書きました。

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

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

89
00:07:38.727 --> 00:07:45.003
関連するボーダーインラインの記事もあわせて読むと、論理プロパティへの理解が深まります。

90
00:07:45.003 --> 00:07:46.316
お疲れさまでした。