WEBVTT

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

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

3
00:00:03.764 --> 00:00:06.116
今回のテーマは、ボーダーです。

4
00:00:06.116 --> 00:00:13.173
これは、要素の周りに付く枠線の、太さ、種類、色を、一行でまとめて指定できるプロパティです。

5
00:00:13.173 --> 00:00:21.485
箱と箱の区切りを付けたり、カードやボタンの輪郭をはっきりさせたりと、画面の見分けを作る場面でよく使います。

6
00:00:21.485 --> 00:00:25.798
この動画では、基本の書き方、三つの要素の見分け方、省略したときの注意点、

7
00:00:25.798 --> 00:00:30.110
効かない原因までを順番に見ていきます。

8
00:00:30.110 --> 00:00:34.031
記事の実例に沿って、二ピクセルの細い実線と、四ピクセルの太い破線を比べて、

9
00:00:34.031 --> 00:00:37.951
違いを目で確かめましょう。

10
00:00:37.951 --> 00:00:46.420
枠線は地味に見えますが、情報のまとまりを伝える大切な手がかりで、初心者が最初に覚える装飾の一つでもあります。

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

12
00:00:48.268 --> 00:00:53.477
クラスを指定したら、ボーダーと書き、コロンのあとに、太さ、線の種類、色という順に三つの値を並べ、

13
00:00:53.477 --> 00:00:58.685
最後にセミコロンを付けます。

14
00:00:58.685 --> 00:01:06.246
スライドの例は、二ピクセルの太さで、ソリッドという実線を引き、色は濃い緑色にする指定です。

15
00:01:06.246 --> 00:01:10.782
たった一行で、四辺すべての枠線が同じ見た目になります。

16
00:01:10.782 --> 00:01:16.578
実はこの三つの値、書く順番は入れ替えても読み取ってくれますが、太さ、種類、

17
00:01:16.578 --> 00:01:22.375
色の順でそろえた方が読みやすく、間違いにも気付きやすくなります。

18
00:01:22.375 --> 00:01:25.399
まずはこの形をそのまま覚えましょう。

19
00:01:25.399 --> 00:01:34.808
慣れてきたら、色の部分を変数に置き換える書き方もありますが、まずは直接値を書いて動きを確かめるのがおすすめです。

20
00:01:34.808 --> 00:01:38.157
ボーダーの中身を分解してみましょう。

21
00:01:38.157 --> 00:01:45.040
一番目の太さは、別々に書くとボーダーウィドゥス、二番目の種類はボーダースタイル、

22
00:01:45.040 --> 00:01:51.924
三番目の色はボーダーカラーという、個別のプロパティが担当しています。

23
00:01:51.924 --> 00:01:58.621
ボーダーは、この三つをまとめて書ける、いわゆる一括指定のプロパティです。

24
00:01:58.621 --> 00:02:04.482
普段は一行で済ませて問題ありませんが、あとから色だけ変えたい、太さだけ変えたいというときは、

25
00:02:04.482 --> 00:02:10.342
個別のプロパティで上書きできます。

26
00:02:10.342 --> 00:02:16.295
仕組みを知っておくと、設定を部分的に直すときに迷わなくなります。

27
00:02:16.295 --> 00:02:20.388
このあと、三つの要素を一つずつ見ていきます。

28
00:02:20.388 --> 00:02:22.093
一つ目の要素、太さです。

29
00:02:22.093 --> 00:02:27.277
シンは細い、ミディアムは中くらい、シックは太い、というキーワードでも書けますし、

30
00:02:27.277 --> 00:02:32.462
二ピクセルや四ピクセルのように、長さで正確に決めることもできます。

31
00:02:32.462 --> 00:02:34.734
太さは枠線の存在感を左右します。

32
00:02:34.734 --> 00:02:38.569
細ければ控えめな区切り、太ければ目立つ強調になります。

33
00:02:38.569 --> 00:02:42.973
ただし、太くすれば箱の外側の大きさにも影響する場合があります。

34
00:02:42.973 --> 00:02:45.246
その点は後の注意点でも触れます。

35
00:02:45.246 --> 00:02:53.058
実務では、デザインに合わせてピクセルで決めることが多く、まず二ピクセル前後から試すとバランスを取りやすいです。

36
00:02:53.058 --> 00:02:55.757
逆に、太さをゼロにすれば線は消えます。

37
00:02:55.757 --> 00:03:00.160
消すときは種類をノーンにする方法と合わせて覚えておきましょう。

38
00:03:00.160 --> 00:03:02.285
二つ目の要素、線の種類です。

39
00:03:02.285 --> 00:03:06.079
ソリッドは切れ目のない実線で、最もよく使われます。

40
00:03:06.079 --> 00:03:10.329
ダッシュドは破線、ドッテッドは点線、ダブルは二重線です。

41
00:03:10.329 --> 00:03:15.337
ほかにも、溝のように見えるグルーブなど、いくつかの種類があります。

42
00:03:15.337 --> 00:03:17.917
そして特に大切なのが、ノーンです。

43
00:03:17.917 --> 00:03:23.077
ノーンは線を表示しない指定で、実はこれが種類の初期値になっています。

44
00:03:23.077 --> 00:03:28.389
つまり、太さと色だけを決めて種類を書き忘れると、線は一本も見えません。

45
00:03:28.389 --> 00:03:34.460
枠線が出ないときは、まず種類がソリッドなどになっているかを確かめるのが近道です。

46
00:03:34.460 --> 00:03:36.230
三つ目の要素、色です。

47
00:03:36.230 --> 00:03:43.472
色は、井げたで始まる十六進数の値や、色の名前、アールジービー関数などで自由に指定できます。

48
00:03:43.472 --> 00:03:50.714
枠線の色を変えても、中の文字や背景は変わらないので、輪郭だけを目立たせたいときに便利です。

49
00:03:50.714 --> 00:03:57.795
もし色を省略すると、初期値として、その要素の文字色と同じ色、カレントカラーが使われます。

50
00:03:57.795 --> 00:04:02.221
文字色まで変えると枠の色も一緒に変わってしまうので、枠だけ色を固定したい場合は、

51
00:04:02.221 --> 00:04:06.647
色を明記しておくのが安全です。

52
00:04:06.647 --> 00:04:10.992
色、太さ、種類の組み合わせで、印象は大きく変わります。

53
00:04:10.992 --> 00:04:14.197
ここで、一括指定ならではの注意点です。

54
00:04:14.197 --> 00:04:20.102
ボーダーで書き忘れた要素は、そのまま残るのではなく、初期値に戻ります。

55
00:04:20.102 --> 00:04:24.488
たとえば、ボーダー、二ピクセル、と太さだけを書くと、種類は初期値のノーンに戻るため、

56
00:04:24.488 --> 00:04:28.874
線は表示されません。

57
00:04:28.874 --> 00:04:31.405
色もカレントカラーに戻ります。

58
00:04:31.405 --> 00:04:35.369
あとから太さだけを変えたいなら、ボーダーではなくボーダーウィドゥスを使う、

59
00:04:35.369 --> 00:04:39.334
と使い分けましょう。

60
00:04:39.334 --> 00:04:47.432
また、上の辺だけ線を引きたい場合は、ボーダートップのように、辺ごとの一括指定も用意されています。

61
00:04:47.432 --> 00:04:52.324
四辺まとめてか、一辺だけか、目的に合わせて選んでください。

62
00:04:52.324 --> 00:04:54.405
ここからは記事の実例です。

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

64
00:05:01.770 --> 00:05:08.335
中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。

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

66
00:05:13.938 --> 00:05:18.421
今回比べたいのは文章ではなく、箱を囲む枠線そのものです。

67
00:05:18.421 --> 00:05:22.984
土台を固定してから枠線だけを差し替えると、太さと種類と色のうち、どれが印象を変えたのかを、

68
00:05:22.984 --> 00:05:27.547
一つずつ確かめられます。

69
00:05:27.547 --> 00:05:34.592
この土台は、記事が用意した比較用のもので、枠線以外の色や余白は最初から固定されています。

70
00:05:34.592 --> 00:05:36.549
土台のシーエスエスです。

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

72
00:05:44.051 --> 00:05:48.291
デモの箱には余白と薄い緑の背景を用意し、最後の行でボーダーに、二ピクセル、

73
00:05:48.291 --> 00:05:52.532
ソリッド、濃い緑を指定します。

74
00:05:52.532 --> 00:05:54.652
これが細い実線の状態です。

75
00:05:54.652 --> 00:06:01.338
次に、最後の行だけを、四ピクセル、ダッシュド、茶色、へ置き換えて再読み込みします。

76
00:06:01.338 --> 00:06:06.720
すると、太くて途切れた破線の枠に変わり、印象がぐっと強くなります。

77
00:06:06.720 --> 00:06:09.167
変えたのは枠線の一行だけです。

78
00:06:09.167 --> 00:06:14.712
三つの要素がそろって初めて線が見えることを、ここで実感してください。

79
00:06:14.712 --> 00:06:19.686
ブラウザーで保存と再読み込みを繰り返し、細い実線と太い破線を見比べると、

80
00:06:19.686 --> 00:06:24.660
太さと種類の両方が効いていることがよく分かります。

81
00:06:24.660 --> 00:06:26.533
効かないときの確認です。

82
00:06:26.533 --> 00:06:31.214
最も多い原因は、線の種類がノーンのままになっていることです。

83
00:06:31.214 --> 00:06:35.427
太さや色をいくら変えても、種類がなければ線は出ません。

84
00:06:35.427 --> 00:06:40.889
次に、同じ要素へ後から別のボーダーが書かれていないかも確認しましょう。

85
00:06:40.889 --> 00:06:44.634
詳細度が同じなら、後に書いた宣言が優先されます。

86
00:06:44.634 --> 00:06:50.408
また、枠線を太くすると箱の外側が広がり、レイアウトがずれることがあります。

87
00:06:50.408 --> 00:06:56.182
大きさを変えずに強調したいときは、輪郭線のアウトラインを使う手もあります。

88
00:06:56.182 --> 00:06:58.679
記事もこの比較を紹介しています。

89
00:06:58.679 --> 00:07:05.545
開発者ツールでは、セレクターの一致と、打ち消し線の付いた宣言がないかを順に調べましょう。

90
00:07:05.545 --> 00:07:14.128
また、狭い画面幅や文字を拡大した状態でも、枠線に囲まれた内容が読みにくくならないかを合わせて確認してください。

91
00:07:14.128 --> 00:07:16.160
最後に互換性とまとめです。

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

93
00:07:23.036 --> 00:07:29.913
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。

94
00:07:29.913 --> 00:07:30.851
まとめます。

95
00:07:30.851 --> 00:07:35.149
ボーダーは、太さ、種類、色をまとめて指定する一括指定で、省略した要素は初期値に戻り、

96
00:07:35.149 --> 00:07:39.447
通常は継承しませんでした。

97
00:07:39.447 --> 00:07:44.448
練習として、二ピクセルの実線と四ピクセルの破線の違いを言葉で説明し、太さ、

98
00:07:44.448 --> 00:07:49.449
種類、色を一つずつだけ変えて結果を比べてみてください。

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

100
00:07:56.795 --> 00:07:58.201
お疲れさまでした。

101
00:07:58.201 --> 00:08:01.796
まずは手元のカードに枠線を付けてみてください。