WEBVTT

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

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

3
00:00:03.669 --> 00:00:06.421
今回のテーマは、ボーダーカラーです。

4
00:00:06.421 --> 00:00:10.396
これは、要素の枠線の色だけを指定するプロパティです。

5
00:00:10.396 --> 00:00:17.581
太さや線の種類は変えずに、色だけを差し替えられるので、デザインの調整がとてもしやすくなります。

6
00:00:17.581 --> 00:00:24.766
たとえば、注意を引く枠は温かい茶色に、落ち着いた案内は深い緑色に、といった使い分けができます。

7
00:00:24.766 --> 00:00:29.429
この動画では、基本の書き方、値を四つまで並べる方法、文字色を参照する仕組み、

8
00:00:29.429 --> 00:00:34.092
効かないときの注意点までを順番に見ていきます。

9
00:00:34.092 --> 00:00:38.984
記事の実例に沿って、シャープ九ビー四五一ディーという茶色と、シャープ二八五シー四〇という緑色を比べて、

10
00:00:38.984 --> 00:00:43.876
違いを目で確かめましょう。

11
00:00:43.876 --> 00:00:45.429
まず基本の書き方です。

12
00:00:45.429 --> 00:00:51.641
対象のクラスにボーダーカラーと書き、コロンのあとに色を書き、最後にセミコロンを付けます。

13
00:00:51.641 --> 00:00:56.723
スライドの例では、シャープ九ビー四五一ディーという茶色を指定しています。

14
00:00:56.723 --> 00:01:00.253
これだけで、四辺すべての枠線が同じ茶色になります。

15
00:01:00.253 --> 00:01:06.183
クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。

16
00:01:06.183 --> 00:01:09.289
ただし、色を指定しただけでは線は見えません。

17
00:01:09.289 --> 00:01:13.948
線そのものを描くには、太さと線の種類がそろっている必要があります。

18
00:01:13.948 --> 00:01:17.336
その条件は後のセクションでも繰り返し確認します。

19
00:01:17.336 --> 00:01:19.736
まずはこの一行の形を覚えましょう。

20
00:01:19.736 --> 00:01:22.137
色の書き方は一つではありません。

21
00:01:22.137 --> 00:01:26.790
レッドやブルーといった色の名前でも書けますし、シャープで始まる十六進数のカラーコードや、

22
00:01:26.790 --> 00:01:31.443
アールジービー関数でも指定できます。

23
00:01:31.443 --> 00:01:38.797
プロジェクトで決めた色を正確に再現したいときは、コードや関数で数値をそろえる書き方が向いています。

24
00:01:38.797 --> 00:01:43.299
特別な値として、トランスペアレントを指定すると枠線は透明になり、色は見えなくなりますが、

25
00:01:43.299 --> 00:01:47.802
太さ分の場所はそのまま残ります。

26
00:01:47.802 --> 00:01:52.154
逆に、後で出てくるカレントカラーは文字色と連動する値です。

27
00:01:52.154 --> 00:01:58.908
まずは、普段使っている色の指定方法でボーダーカラーが書ける、ということを押さえてください。

28
00:01:58.908 --> 00:02:03.021
値は一つだけでなく、最大で四つまで並べられます。

29
00:02:03.021 --> 00:02:07.819
一つ書けば上、右、下、左の四辺すべてが同じ色になります。

30
00:02:07.819 --> 00:02:12.960
二つ書くと、一つ目が上下、二つ目が左右というペアになります。

31
00:02:12.960 --> 00:02:16.730
三つ書くと、真ん中の値が左右で共用されます。

32
00:02:16.730 --> 00:02:22.042
四つ書けば、上、右、下、左の順に、一つずつ個別に決められます。

33
00:02:22.042 --> 00:02:30.268
たとえば、上辺だけ赤くして見出しのように強調したり、下辺だけ違う色にして区切りにしたりできます。

34
00:02:30.268 --> 00:02:35.237
順番は上から時計回りと覚えると、読み間違えにくくなります。

35
00:02:35.237 --> 00:02:43.120
辺ごとに色を変えるときは、ブラウザーでどの辺が変わったか、一辺ずつ確かめながら進めましょう。

36
00:02:43.120 --> 00:02:45.695
ここで大切なのがカレントカラーです。

37
00:02:45.695 --> 00:02:52.706
これは、その要素に指定された文字の色、つまりカラープロパティの値をそのまま参照するキーワードです。

38
00:02:52.706 --> 00:02:57.428
ボーダーカラーの初期値は、構成する四つの個別プロパティの初期値を参照すると定義されていて、

39
00:02:57.428 --> 00:03:02.150
実質的にはカレントカラーが基準になります。

40
00:03:02.150 --> 00:03:09.876
そのため、枠線の色を特に指定していない要素では、文字色を変えると枠の色も一緒に変わって見えることがあります。

41
00:03:09.876 --> 00:03:16.458
また、辺ごとに専用の個別プロパティもあり、上辺だけならボーダートップカラーのように書けます。

42
00:03:16.458 --> 00:03:22.610
普段はまとめて書き、特定の辺だけ変えたいときに個別の指定を使うと管理しやすくなります。

43
00:03:22.610 --> 00:03:24.528
初期値と継承を確認します。

44
00:03:24.528 --> 00:03:30.873
先ほど触れたとおり、初期値は四辺に対応する個別プロパティの初期値を参照して決まります。

45
00:03:30.873 --> 00:03:34.857
そして、このプロパティは通常、親から子へ継承しません。

46
00:03:34.857 --> 00:03:40.464
親の箱の枠線を赤くしても、中の子要素の枠が自動で赤くなるわけではないのです。

47
00:03:40.464 --> 00:03:47.252
共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。

48
00:03:47.252 --> 00:03:51.826
アンセットは、継承しない項目なのでイニシャルとして扱われます。

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

50
00:03:58.024 --> 00:04:02.598
必要な要素それぞれに指定する、という前提を覚えておきましょう。

51
00:04:02.598 --> 00:04:04.214
ここからは実例です。

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

53
00:04:11.645 --> 00:04:18.754
中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。

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

55
00:04:24.409 --> 00:04:29.417
今回確認したいのは文章そのものではなく、箱を囲む枠線の色です。

56
00:04:29.417 --> 00:04:34.425
文章量は枠の色に直接影響しませんが、土台の状態を先に固定してから値を比べると、

57
00:04:34.425 --> 00:04:39.434
色だけが変わったことをはっきり確かめられます。

58
00:04:39.434 --> 00:04:45.250
親のステージは、比較のための余白と背景を用意する役割だと考えてください。

59
00:04:45.250 --> 00:04:47.190
土台のシーエスエスです。

60
00:04:47.190 --> 00:04:55.110
全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。

61
00:04:55.110 --> 00:05:02.223
デモの箱には一レムの内側余白と、三ピクセルの実線の枠、薄い緑の背景と文字色を指定します。

62
00:05:02.223 --> 00:05:06.102
土台の枠の色は緑色のシャープ二八五シー四〇です。

63
00:05:06.102 --> 00:05:11.921
そのうえで、最後の行でボーダーカラーに茶色のシャープ九ビー四五一ディーを指定すると、

64
00:05:11.921 --> 00:05:17.740
太さも実線という種類もそのままに、色だけが茶色へ変わります。

65
00:05:17.740 --> 00:05:20.973
次に値だけを元の緑色へ戻してみましょう。

66
00:05:20.973 --> 00:05:25.499
内容も位置もまったく動かず、枠の色だけが切り替わります。

67
00:05:25.499 --> 00:05:29.702
変えたのはこの一行だけ、という点に注目してください。

68
00:05:29.702 --> 00:05:31.410
使うときの注意点です。

69
00:05:31.410 --> 00:05:36.380
もっとも多いつまずきは、色だけを指定して線が見えないケースです。

70
00:05:36.380 --> 00:05:45.077
枠線を描くには、ボーダースタイルでソリッドなどの種類を指定し、ボーダーウィドゥスで太さも確保する必要があります。

71
00:05:45.077 --> 00:05:52.221
スタイルがノーンだったり、太さがゼロだったりすると、どんな色を指定しても線は表示されません。

72
00:05:52.221 --> 00:05:56.725
記事も、線を描くにはスタイルと幅も必要だと強調しています。

73
00:05:56.725 --> 00:05:59.675
もう一つは、カレントカラーの連動です。

74
00:05:59.675 --> 00:06:05.577
色をカレントカラーにしていると、文字色を変えたときに枠まで一緒に変わります。

75
00:06:05.577 --> 00:06:10.236
意図した連動なのか、固定したい色なのかを分けて考えましょう。

76
00:06:10.236 --> 00:06:14.274
色、種類、太さの三点セットで確認する習慣が大切です。

77
00:06:14.274 --> 00:06:16.868
効かないと感じたときの確認手順です。

78
00:06:16.868 --> 00:06:19.318
まず開発者ツールで順番に調べます。

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

80
00:06:25.515 --> 00:06:31.712
スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、

81
00:06:31.712 --> 00:06:37.909
最後にコンピューテッドで最終的な四辺の色を確認します。

82
00:06:37.909 --> 00:06:44.106
特に、ショートハンドのボーダーで後から色まで上書きしていないかは見落としやすい点です。

83
00:06:44.106 --> 00:06:47.925
三百二十ピクセル程度の狭い画面や文字の拡大、キーボード操作でも内容を利用できるか、

84
00:06:47.925 --> 00:06:51.744
あわせて確認しましょう。

85
00:06:51.744 --> 00:06:56.644
一度に全部を直さず、一か所ずつ原因を切り分けると解決が早くなります。

86
00:06:56.644 --> 00:06:58.499
最後に互換性とまとめです。

87
00:06:58.499 --> 00:07:04.849
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

88
00:07:04.849 --> 00:07:11.199
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、とても長く安心して使えるプロパティです。

89
00:07:11.199 --> 00:07:12.055
まとめます。

90
00:07:12.055 --> 00:07:17.549
ボーダーカラーは枠線の色だけを指定するプロパティで、色を最大四つまで並べて辺ごとに変えられ、

91
00:07:17.549 --> 00:07:23.042
カレントカラーで文字色とも連動でき、通常は継承しませんでした。

92
00:07:23.042 --> 00:07:27.894
練習として、シャープ九ビー四五一ディーとシャープ二八五シー四〇の違いを言葉で説明し、

93
00:07:27.894 --> 00:07:32.745
文章量や親の幅だけを変えて結果を比べてみてください。

94
00:07:32.745 --> 00:07:39.452
関連するボーダースタイルやボーダーウィドゥスも学ぶと、枠線の調整が一通りできるようになります。

95
00:07:39.452 --> 00:07:40.736
お疲れさまでした。

96
00:07:40.736 --> 00:07:46.016
まずは手元のカードの枠線の色だけを変えて、印象の変化を試してみてください。