WEBVTT

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

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

3
00:00:03.918 --> 00:00:07.347
今回のテーマは、ボーダーレイディアスです。

4
00:00:07.347 --> 00:00:11.102
これは、箱の角の丸みを指定するプロパティです。

5
00:00:11.102 --> 00:00:16.653
四角い箱の角を少し丸めるだけで、画面の印象はぐっと柔らかくなります。

6
00:00:16.653 --> 00:00:22.204
ボタンやカード、画像の枠など、身近な部品でとてもよく使われています。

7
00:00:22.204 --> 00:00:27.265
この動画では、基本の書き方、値の個数による角の決まり方、楕円形の丸みの作り方、

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

9
00:00:32.326 --> 00:00:36.408
記事の実例に沿って、一レムを指定した丸い角と、ゼロを指定した直角を比べて、

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

11
00:00:40.489 --> 00:00:47.020
小さな指定ですが、使いどころが多いので、仕組みからしっかり押さえていきましょう。

12
00:00:47.020 --> 00:00:48.656
まず基本の書き方です。

13
00:00:48.656 --> 00:00:52.523
対象のクラスにボーダーレイディアスと書き、コロンのあとに丸みの大きさを書き、

14
00:00:52.523 --> 00:00:56.391
最後にセミコロンを付けます。

15
00:00:56.391 --> 00:00:59.365
スライドの例では一レムを指定しています。

16
00:00:59.365 --> 00:01:03.381
これだけで、四つの角すべてが同じ大きさで丸くなります。

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

18
00:01:09.629 --> 00:01:13.198
値がゼロなら丸みは付かず、直角のままになります。

19
00:01:13.198 --> 00:01:18.999
まずはこの一行の形を覚え、数値を変えたときの見え方の変化を追っていきましょう。

20
00:01:18.999 --> 00:01:24.800
迷ったときは、まず一レム前後から試し、画面で見て調整する進め方がおすすめです。

21
00:01:24.800 --> 00:01:26.873
値の読み方を確認しましょう。

22
00:01:26.873 --> 00:01:33.242
丸みの大きさは、ピクセルやレムといった長さでも、パーセントという割合でも指定できます。

23
00:01:33.242 --> 00:01:37.685
長さで書けば、要素の大きさが変わっても丸みの半径は一定です。

24
00:01:37.685 --> 00:01:43.757
一方、割合で書くと、横方向は要素の幅、縦方向は要素の高さを基準に半径が決まります。

25
00:01:43.757 --> 00:01:50.570
特に、幅と高さが等しい正方形に五十パーセントを指定すると、角が最大まで丸まって円になります。

26
00:01:50.570 --> 00:01:53.828
長方形で五十パーセントなら楕円に近づきます。

27
00:01:53.828 --> 00:01:59.012
固定の丸みか、大きさに追随する丸みか、目的に合わせて選び分けましょう。

28
00:01:59.012 --> 00:02:04.788
単位の意味が分かると、レスポンシブな画面でも意図した丸みを保ちやすくなります。

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

30
00:02:08.519 --> 00:02:12.094
一つ書けば四つの角すべてに同じ丸みが付きます。

31
00:02:12.094 --> 00:02:18.935
二つ書くと、左上と右下のペア、右上と左下のペアという、対角線ごとの組み合わせになります。

32
00:02:18.935 --> 00:02:22.666
三つ書くと真ん中の値が右上と左下で共用されます。

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

34
00:02:28.107 --> 00:02:34.325
たとえば一レム、ゼロ、一レム、ゼロと書けば、対角だけが丸い個性的な形になります。

35
00:02:34.325 --> 00:02:38.211
順番は時計回りと覚えると読み間違えにくくなります。

36
00:02:38.211 --> 00:02:44.896
並び順を間違えると、丸くしたい角と違う角が変わるので、ブラウザーで必ず確かめましょう。

37
00:02:44.896 --> 00:02:48.036
丸みは真円の弧である必要はありません。

38
00:02:48.036 --> 00:02:55.969
スラッシュを挟んで書くと、横方向の半径と縦方向の半径を別々に指定でき、角の弧が楕円形になります。

39
00:02:55.969 --> 00:02:59.439
スラッシュの前が横方向、後ろが縦方向です。

40
00:02:59.439 --> 00:03:07.703
また、角ごとに専用の個別プロパティも用意されていて、左上だけ、右上だけといった細かい指定ができます。

41
00:03:07.703 --> 00:03:12.495
ボーダーレイディアスは、それらをまとめて書ける省略形です。

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

43
00:03:20.758 --> 00:03:26.708
楕円の指定は最初は難しく見えますが、横と縦を分けて考えれば読み解けます。

44
00:03:26.708 --> 00:03:28.810
初期値と継承を確認します。

45
00:03:28.810 --> 00:03:36.408
ボーダーレイディアスの初期値は、四つの角に対応する個別プロパティの初期値を参照して決まります。

46
00:03:36.408 --> 00:03:39.318
実質的には丸みがない状態が基準です。

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

48
00:03:43.684 --> 00:03:50.474
親の箱に丸みを指定しても、中の画像や見出しに自動で同じ丸みが付くわけではないのです。

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

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

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

52
00:04:07.934 --> 00:04:15.048
継承しないため、子要素の画像などには別途指定が必要になる点も、後の注意点につながります。

53
00:04:15.048 --> 00:04:16.652
ここからは実例です。

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

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

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

57
00:04:36.703 --> 00:04:41.034
確認したいのは文章そのものではなく、箱の四隅の形です。

58
00:04:41.034 --> 00:04:46.488
文章量は角の丸みに直接影響しませんが、箱の高さが変わると全体の印象は変わるので、

59
00:04:46.488 --> 00:04:51.942
土台の状態を先に固定してから値を比べるのがポイントです。

60
00:04:51.942 --> 00:04:57.556
親のステージは、比較のための余白と枠を用意する役割だと考えてください。

61
00:04:57.556 --> 00:04:59.327
土台のシーエスエスです。

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

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

64
00:05:13.049 --> 00:05:20.722
そのうえで、最後の行でボーダーレイディアスに一レムを指定すると、枠線も背景も角の弧に沿って丸くなります。

65
00:05:20.722 --> 00:05:23.673
次に値だけをゼロへ置き換えてみましょう。

66
00:05:23.673 --> 00:05:28.690
他はまったく同じなのに、角が直角に戻り、印象がきりっと硬くなります。

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

68
00:05:32.526 --> 00:05:38.576
再読み込みのたびに角だけが切り替わる様子を見ると、プロパティの働きが実感できます。

69
00:05:38.576 --> 00:05:40.153
使うときの注意点です。

70
00:05:40.153 --> 00:05:45.029
箱の背景や枠線は角の弧に沿って描かれますが、中に入れた画像は別の要素なので、

71
00:05:45.029 --> 00:05:49.904
そのままでは角の部分に画像がはみ出して見えることがあります。

72
00:05:49.904 --> 00:05:54.493
その場合は、画像自身にも同じ丸みを指定するか、包んでいる要素にオーバーフローの指定を加えて、

73
00:05:54.493 --> 00:05:59.081
角の外側を切り取る方法を検討します。

74
00:05:59.081 --> 00:06:06.395
ただし、オーバーフローで隠す指定は、キーボードフォーカス時の輪郭線まで切り取ってしまう場合があります。

75
00:06:06.395 --> 00:06:11.700
内側に操作要素があるときは、フォーカス表示が欠けないか必ず確認しましょう。

76
00:06:11.700 --> 00:06:17.436
見た目を整える指定が、使いやすさを損なわないかまで含めて判断することが大切です。

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

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

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

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

81
00:06:37.330 --> 00:06:44.352
最後にコンピューテッドで最終的な値を確認します。

82
00:06:44.352 --> 00:06:50.538
丸みが付いていても、背景も枠もない要素では変化に気付けない場合もあります。

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

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

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

86
00:07:05.584 --> 00:07:07.446
最後に互換性とまとめです。

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

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

89
00:07:19.765 --> 00:07:20.624
まとめます。

90
00:07:20.624 --> 00:07:25.709
ボーダーレイディアスは箱の角を丸くするプロパティで、長さや割合を最大四つまで並べられ、

91
00:07:25.709 --> 00:07:30.794
スラッシュで楕円の丸みも作れ、通常は継承しませんでした。

92
00:07:30.794 --> 00:07:37.813
練習として、一レムとゼロの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。

93
00:07:37.813 --> 00:07:42.827
関連するボーダーやアウトラインも学ぶと、箱の見た目の調整が広がります。

94
00:07:42.827 --> 00:07:44.116
お疲れさまでした。

95
00:07:44.116 --> 00:07:50.132
まずは自分の手元のカードやボタンに一レムを指定して、印象の変化を試してみてください。