WEBVTT

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

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

3
00:00:03.595 --> 00:00:06.441
今回のテーマは、ボーダースタイルです。

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

5
00:00:10.485 --> 00:00:14.605
太さや色は変えずに、実線や破線といった線の見た目だけを差し替えられるので、

6
00:00:14.605 --> 00:00:18.724
デザインの印象を細かく調整できます。

7
00:00:18.724 --> 00:00:25.315
たとえば、通常の区切りは実線に、仮の状態やガイドには破線に、といった使い分けができます。

8
00:00:25.315 --> 00:00:33.703
この動画では、基本の書き方、主な値の種類、値を四つまで並べる方法、効かないときの注意点までを順番に見ていきます。

9
00:00:33.703 --> 00:00:37.373
記事の実例に沿って、ダッシュドという破線と、ソリッドという実線を比べて、

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

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

12
00:00:42.625 --> 00:00:49.241
対象のクラスにボーダースタイルと書き、コロンのあとに種類を書き、最後にセミコロンを付けます。

13
00:00:49.241 --> 00:00:52.549
スライドの例では、ダッシュドを指定しています。

14
00:00:52.549 --> 00:00:55.856
これだけで、四辺すべての枠線が破線になります。

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

16
00:01:01.897 --> 00:01:05.492
ただし、種類を指定しただけでは十分とは限りません。

17
00:01:05.492 --> 00:01:10.238
線を実際に見せるには、太さがある程度確保されている必要もあります。

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

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

20
00:01:16.135 --> 00:01:17.771
主な値を紹介します。

21
00:01:17.771 --> 00:01:23.822
まずノーンは線を表示しない値で、太さや色を指定していても線は描かれません。

22
00:01:23.822 --> 00:01:27.748
ソリッドは途切れない実線で、最も標準的な線です。

23
00:01:27.748 --> 00:01:33.800
ダッシュドは少し長めの線が繰り返す破線、ドッテッドは丸い点が並ぶ点線です。

24
00:01:33.800 --> 00:01:40.015
ダブルは二本の線が並ぶ二重線で、はっきり見せるにはある程度の太さが必要です。

25
00:01:40.015 --> 00:01:46.803
普段のカードや区切りにはソリッド、入力欄の仮枠やドラッグ中の目安にはダッシュド、

26
00:01:46.803 --> 00:01:53.591
控えめな区切りにはドッテッド、といった具合に、役割に合わせて選ぶと迷いにくくなります。

27
00:01:53.591 --> 00:01:55.839
もう少し特殊な値もあります。

28
00:01:55.839 --> 00:02:02.101
グルーブは溝のように彫り込んで見える線、リッジは逆に盛り上がって見える線です。

29
00:02:02.101 --> 00:02:09.327
インセットは要素全体がへこんで見え、アウトセットは要素全体が浮き出て見える効果になります。

30
00:02:09.327 --> 00:02:17.195
これらは枠線の色と明暗をブラウザーが組み合わせて表現するため、色や太さによって見え方が変わります。

31
00:02:17.195 --> 00:02:26.027
ヒドゥンはノーンと似て線を表示しませんが、主に表のセルの境界が重なったときの優先順位の決め方に違いがあります。

32
00:02:26.027 --> 00:02:30.523
日常のデザインでは出番は少なめですが、値の名前と見た目の対応を知っておくと、

33
00:02:30.523 --> 00:02:35.019
既存のコードを読むときに役立ちます。

34
00:02:35.019 --> 00:02:39.100
値は一つだけでなく、最大で四つまで並べられます。

35
00:02:39.100 --> 00:02:44.031
一つ書けば上、右、下、左の四辺すべてが同じ種類になります。

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

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

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

39
00:02:58.143 --> 00:03:06.645
たとえば、下辺だけ破線にして区切りの目安にしたり、上辺だけ実線にして見出しらしく強調したりできます。

40
00:03:06.645 --> 00:03:11.576
順番は上から時計回りと覚えると、読み間違えにくくなります。

41
00:03:11.576 --> 00:03:19.567
辺ごとに種類を変えるときは、ブラウザーでどの辺が変わったか、一辺ずつ確かめながら進めましょう。

42
00:03:19.567 --> 00:03:21.651
初期値と継承を確認します。

43
00:03:21.651 --> 00:03:28.386
初期値は、上、右、下、左に対応する四つの個別プロパティの初期値を参照して決まります。

44
00:03:28.386 --> 00:03:35.120
個別プロパティとは、たとえば上辺だけならボーダートップスタイルのように書く指定です。

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

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

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

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

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

50
00:04:03.179 --> 00:04:04.842
ここからは実例です。

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

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

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

54
00:04:25.631 --> 00:04:30.953
今回確認したいのは文章そのものではなく、箱を囲む枠線の種類です。

55
00:04:30.953 --> 00:04:36.109
文章量は線種に直接影響しませんが、土台の状態を先に固定してから値を比べると、

56
00:04:36.109 --> 00:04:41.265
種類だけが変わったことをはっきり確かめられます。

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

58
00:04:47.252 --> 00:04:49.064
土台のシーエスエスです。

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

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

61
00:05:03.109 --> 00:05:07.413
そのうえで、最後の行でボーダースタイルにダッシュドを指定すると、太さも色もそのままに、

62
00:05:07.413 --> 00:05:11.716
種類だけが破線へ変わります。

63
00:05:11.716 --> 00:05:14.737
次に値だけをソリッドへ戻してみましょう。

64
00:05:14.737 --> 00:05:19.569
内容も位置もまったく動かず、枠線が破線から実線へ切り替わります。

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

66
00:05:23.496 --> 00:05:27.120
同じ太さでも線種で印象が変わることが分かります。

67
00:05:27.120 --> 00:05:29.054
使うときの注意点です。

68
00:05:29.054 --> 00:05:38.021
まず、ボーダースタイルがノーンやヒドゥンになっていると、太さや色をいくら指定しても線は表示されません。

69
00:05:38.021 --> 00:05:43.648
線が見えないときは、種類が有効かどうかを真っ先に確認しましょう。

70
00:05:43.648 --> 00:05:50.505
次に、ダブルなどの線種は、十分な太さがないと二本線の違いが見えにくくなります。

71
00:05:50.505 --> 00:05:58.065
一ピクセルのような細さでは実線とほぼ同じに見えるので、太さとセットで調整してください。

72
00:05:58.065 --> 00:06:02.285
記事もこの点を間違えやすい点として挙げています。

73
00:06:02.285 --> 00:06:07.911
もう一つ大切なのは、デザインの状態を線種だけで伝えないことです。

74
00:06:07.911 --> 00:06:12.659
破線だから仮、実線だから確定、といった区別は、色や文字の説明も併用すると、

75
00:06:12.659 --> 00:06:17.406
誰にとっても分かりやすくなります。

76
00:06:17.406 --> 00:06:19.893
効かないと感じたときの確認手順です。

77
00:06:19.893 --> 00:06:22.242
まず開発者ツールで順番に調べます。

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

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

80
00:06:34.217 --> 00:06:40.205
最後にコンピューテッドで最終的な四辺の種類を確認します。

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

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

83
00:06:49.946 --> 00:06:53.608
あわせて確認しましょう。

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

85
00:06:58.306 --> 00:07:00.318
最後に互換性とまとめです。

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

87
00:07:06.097 --> 00:07:11.877
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、ダッシュドもソリッドも同じく古くから対応している、

88
00:07:11.877 --> 00:07:17.656
とても安心して使えるプロパティです。

89
00:07:17.656 --> 00:07:18.584
まとめます。

90
00:07:18.584 --> 00:07:23.306
ボーダースタイルは枠線の種類だけを指定するプロパティで、値を最大四つまで並べて辺ごとに変えられ、

91
00:07:23.306 --> 00:07:28.027
通常は継承しませんでした。

92
00:07:28.027 --> 00:07:36.231
練習として、ダッシュドとソリッドの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

93
00:07:36.231 --> 00:07:43.352
関連するボーダーウィドゥスやボーダーカラーも学ぶと、枠線の調整が一通りできるようになります。

94
00:07:43.352 --> 00:07:44.745
お疲れさまでした。

95
00:07:44.745 --> 00:07:50.318
まずは手元のカードの枠線を破線に変えて、印象の変化を試してみてください。