WEBVTT

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

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

3
00:00:03.542 --> 00:00:06.494
今回のテーマは、ボーダーウィドゥスです。

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

5
00:00:10.479 --> 00:00:18.006
線の種類や色は変えずに、細くしたり太くしたりできるので、カードやボタンの強調具合を細かく調整できます。

6
00:00:18.006 --> 00:00:23.909
たとえば、通常の区切りは細く、注目させたい枠は太く、といった使い分けができます。

7
00:00:23.909 --> 00:00:28.411
この動画では、基本の書き方、キーワードと長さの指定、値を四つまで並べる方法、

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

9
00:00:32.912 --> 00:00:38.668
記事の実例に沿って、四ピクセルと一ピクセルを比べて、違いを目で確かめましょう。

10
00:00:38.668 --> 00:00:40.396
まず基本の書き方です。

11
00:00:40.396 --> 00:00:47.782
対象のクラスにボーダーウィドゥスと書き、コロンのあとに太さを書き、最後にセミコロンを付けます。

12
00:00:47.782 --> 00:00:51.396
スライドの例では、四ピクセルを指定しています。

13
00:00:51.396 --> 00:00:55.953
これだけで、四辺すべての枠線が四ピクセルの太さになります。

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

15
00:01:02.552 --> 00:01:06.952
ただし、太さを指定しただけでは線が見えるとは限りません。

16
00:01:06.952 --> 00:01:11.038
線の種類が表示される状態になっている必要もあります。

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

18
00:01:14.809 --> 00:01:17.480
まずはこの一行の形を覚えましょう。

19
00:01:17.480 --> 00:01:20.592
主な値のうち、まずキーワードを紹介します。

20
00:01:20.592 --> 00:01:26.372
シンは細い線、ミディアムは中くらいの太さ、シックは太い線を表すキーワードです。

21
00:01:26.372 --> 00:01:33.041
具体的なピクセル数はブラウザーが決めるため、環境によって見え方が少し変わることがあります。

22
00:01:33.041 --> 00:01:39.118
その代わり、細い、中くらい、太い、という関係だけをざっくり決めたいときに便利です。

23
00:01:39.118 --> 00:01:46.676
正確な太さをデザインどおりにそろえたい場面では、次のセクションで紹介する長さの指定の方が向いています。

24
00:01:46.676 --> 00:01:52.308
キーワードは手軽さ、長さは正確さ、と使い分けを意識すると迷いにくくなります。

25
00:01:52.308 --> 00:01:55.839
もう一つの指定方法が、長さによる指定です。

26
00:01:55.839 --> 00:02:01.555
ピクセルやレムといった単位付きの数値で、太さをそのまま決められます。

27
00:02:01.555 --> 00:02:07.607
一ピクセルなら細く控えめに、四ピクセルならはっきりと目立つ枠になります。

28
00:02:07.607 --> 00:02:12.147
ゼロを指定すると太さがなくなり、線は見えなくなります。

29
00:02:12.147 --> 00:02:18.872
注意点として、ボーダーウィドゥスには負の値は使えず、パーセント指定もできません。

30
00:02:18.872 --> 00:02:26.269
幅や余白で使える指定がそのまま使えるとは限らないので、この点は分けて覚えておきましょう。

31
00:02:26.269 --> 00:02:29.800
実務ではピクセル指定が最もよく使われます。

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

33
00:02:33.946 --> 00:02:38.955
一つ書けば上、右、下、左の四辺すべてが同じ太さになります。

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

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

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

37
00:02:53.292 --> 00:03:01.757
たとえば、上辺だけ太くして見出しらしく強調したり、下辺だけ細くして控えめな区切りにしたりできます。

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

39
00:03:06.766 --> 00:03:12.812
辺ごとに太さを変えるときは、どの辺が変わったか一辺ずつ確かめましょう。

40
00:03:12.812 --> 00:03:15.068
初期値と継承を確認します。

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

42
00:03:22.355 --> 00:03:29.816
個別プロパティとは、たとえば上辺だけならボーダートップウィドゥスのように書く指定です。

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

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

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

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

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

48
00:03:59.832 --> 00:04:01.489
ここからは実例です。

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

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

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

52
00:04:22.196 --> 00:04:27.497
今回確認したいのは文章そのものではなく、箱を囲む枠線の太さです。

53
00:04:27.497 --> 00:04:32.633
文章量は太さに直接影響しませんが、土台の状態を先に固定してから値を比べると、

54
00:04:32.633 --> 00:04:37.768
太さだけが変わったことをはっきり確かめられます。

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

56
00:04:43.732 --> 00:04:45.511
土台のシーエスエスです。

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

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

59
00:04:59.298 --> 00:05:03.819
そのうえで、最後の行でボーダーウィドゥスに四ピクセルを指定すると、種類も色もそのままに、

60
00:05:03.819 --> 00:05:08.341
太さだけが四ピクセルへ変わります。

61
00:05:08.341 --> 00:05:11.454
次に値だけを一ピクセルへ変えてみましょう。

62
00:05:11.454 --> 00:05:14.863
枠線が細くなり、印象がぐっと控えめになります。

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

64
00:05:18.718 --> 00:05:22.424
同じ実線でも太さで存在感が変わることが分かります。

65
00:05:22.424 --> 00:05:23.918
使うときの注意点です。

66
00:05:23.918 --> 00:05:30.031
まず、ボーダースタイルがノーンになっていると、太さをいくら大きくしても線は表示されません。

67
00:05:30.031 --> 00:05:34.921
太くしたのに見えないときは、種類が有効かどうかを真っ先に確認しましょう。

68
00:05:34.921 --> 00:05:41.577
次に、ボックスサイジングがコンテンツボックスの場合は、枠線の太さの分だけ箱の外側の寸法が増えます。

69
00:05:41.577 --> 00:05:47.825
四辺を太くすれば、その分だけ全体が広がって、隣の要素との間隔が詰まって見えることがあります。

70
00:05:47.825 --> 00:05:54.888
ボーダーボックスを指定しておけば、枠線は幅の中に含めて計算されるので、太さを変えても外寸は変わりません。

71
00:05:54.888 --> 00:05:58.284
記事もこの二点を間違えやすい点として挙げています。

72
00:05:58.284 --> 00:06:00.921
効かないと感じたときの確認手順です。

73
00:06:00.921 --> 00:06:03.412
まず開発者ツールで順番に調べます。

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

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

76
00:06:16.111 --> 00:06:22.461
最後にコンピューテッドで最終的な四辺の太さを確認します。

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

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

79
00:06:32.791 --> 00:06:36.674
あわせて確認しましょう。

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

81
00:06:41.656 --> 00:06:43.626
最後に互換性とまとめです。

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

83
00:06:48.424 --> 00:06:53.222
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、とても古くから使える、

84
00:06:53.222 --> 00:06:58.021
安心して使えるプロパティです。

85
00:06:58.021 --> 00:06:58.930
まとめます。

86
00:06:58.930 --> 00:07:04.688
ボーダーウィドゥスは枠線の太さだけを指定するプロパティで、キーワードや長さで指定でき、

87
00:07:04.688 --> 00:07:10.446
値を最大四つまで並べて辺ごとに変えられ、通常は継承しませんでした。

88
00:07:10.446 --> 00:07:18.628
練習として、四ピクセルと一ピクセルの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

89
00:07:18.628 --> 00:07:24.992
関連するボーダーやボーダースタイルも学ぶと、枠線の調整が一通りできるようになります。

90
00:07:24.992 --> 00:07:26.356
お疲れさまでした。

91
00:07:26.356 --> 00:07:31.508
まずは手元のカードの枠線を太くして、印象の変化を試してみてください。