WEBVTT

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

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

3
00:00:03.614 --> 00:00:06.174
今回のテーマは、ビジビリティです。

4
00:00:06.174 --> 00:00:13.252
これは、要素が占める場所はそのまま残して、内容が見えるかどうかだけを切り替えるプロパティです。

5
00:00:13.252 --> 00:00:17.318
値には、ビジブル、ヒドゥン、コラプスの三つがあります。

6
00:00:17.318 --> 00:00:24.696
たとえばヒドゥンにすると、箱は透明になったように見えなくなりますが、周りの要素は詰まってきません。

7
00:00:24.696 --> 00:00:29.515
あとで表示に戻したときにレイアウトがずれないのが大きな特徴です。

8
00:00:29.515 --> 00:00:33.732
この動画では、ディスプレイやオパシティとの違い、子要素だけを表示できる継承の仕組みまで、

9
00:00:33.732 --> 00:00:37.948
順番に整理していきます。

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

11
00:00:39.616 --> 00:00:46.287
スライドの例では、デモというクラスを持つ要素に、ビジビリティ、ヒドゥンを指定しています。

12
00:00:46.287 --> 00:00:55.383
プロパティ名の後ろにコロンを書き、値の最後にセミコロンを付ける、というシーエスエスの基本形はほかのプロパティと同じです。

13
00:00:55.383 --> 00:00:58.415
初期値はビジブルで、通常の継承をします。

14
00:00:58.415 --> 00:01:03.722
つまり、親にヒドゥンを指定すると、原則として子要素も見えなくなります。

15
00:01:03.722 --> 00:01:07.967
ただし、ビジビリティには子だけをビジブルに戻せるという珍しい特徴があり、

16
00:01:07.967 --> 00:01:12.212
それは後のセクションで詳しく紹介します。

17
00:01:12.212 --> 00:01:16.760
まずは、隠したい要素自身に書く、という基本を押さえましょう。

18
00:01:16.760 --> 00:01:18.882
中心になる二つの値を比べます。

19
00:01:18.882 --> 00:01:22.419
ビジブルは初期値で、要素は通常どおり表示されます。

20
00:01:22.419 --> 00:01:29.209
ヒドゥンは、要素の文字も背景も境界線も見えなくなりますが、幅や高さが作る場所はそのまま残ります。

21
00:01:29.209 --> 00:01:32.322
そのため、前後の文章や箱の位置は動きません。

22
00:01:32.322 --> 00:01:37.556
また、ヒドゥンの要素はマウスやタッチの対象にもならず、クリックできません。

23
00:01:37.556 --> 00:01:42.790
この点が、透明にしても操作できてしまうオパシティ、ゼロとの大きな違いです。

24
00:01:42.790 --> 00:01:47.105
読み込み中だけ場所を確保して隠しておきたい場合や、切り替えても周りが動いてほしくない場合に、

25
00:01:47.105 --> 00:01:51.420
ヒドゥンはとても向いています。

26
00:01:51.420 --> 00:01:55.854
似た目的で使われる三つを、二つの軸で整理しましょう。

27
00:01:55.854 --> 00:01:59.947
一つ目は場所が残るか、二つ目は操作できるかです。

28
00:01:59.947 --> 00:02:07.450
ディスプレイ、ノンは、要素自体がなかったかのように扱われ、場所も消えて周りが詰まります。

29
00:02:07.450 --> 00:02:12.310
オパシティ、ゼロは、見た目が透明になり場所は残りますが、見えないボタンを押せてしまうなど、

30
00:02:12.310 --> 00:02:17.170
操作はできてしまいます。

31
00:02:17.170 --> 00:02:21.945
ビジビリティ、ヒドゥンは、場所が残り、操作はできません。

32
00:02:21.945 --> 00:02:30.301
見えないのに押せるのは利用者を混乱させるので、隠した要素を操作させたくないならヒドゥンが安全です。

33
00:02:30.301 --> 00:02:34.735
目的に合わせて、この三つを使い分けることが大切です。

34
00:02:34.735 --> 00:02:37.637
ビジビリティならではの特徴を紹介します。

35
00:02:37.637 --> 00:02:41.555
親にヒドゥンを指定すると子は原則として隠れますが、特定の子にビジブルを指定すると、

36
00:02:41.555 --> 00:02:45.473
その子だけを表示できます。

37
00:02:45.473 --> 00:02:51.568
スライドの例では、親全体を隠しながら、キープというクラスを持つ子だけを見せています。

38
00:02:51.568 --> 00:02:54.616
これは、ディスプレイ、ノンではできません。

39
00:02:54.616 --> 00:02:58.679
親をノンにすると、子をどう指定しても一切表示されません。

40
00:02:58.679 --> 00:03:04.774
ツールチップやポップアップで、土台は隠しつつ一部だけ見せたい場面で役立つ仕組みです。

41
00:03:04.774 --> 00:03:12.755
継承するけれど子で上書きできる、という関係を覚えておくと、設定が効かないと感じたときの原因探しにも役立ちます。

42
00:03:12.755 --> 00:03:15.433
三つ目の値、コラプスを説明します。

43
00:03:15.433 --> 00:03:21.262
これは主に表で使う値で、行や列を畳んで、その分の場所も詰める働きをします。

44
00:03:21.262 --> 00:03:24.728
ヒドゥンとの違いは、場所までなくなる点です。

45
00:03:24.728 --> 00:03:32.132
ただし、表以外の普通の要素に指定した場合は、多くのブラウザーでヒドゥンと同じように扱われます。

46
00:03:32.132 --> 00:03:38.592
また、フレックスボックスなど、レイアウトの文脈によって扱いが変わることもあります。

47
00:03:38.592 --> 00:03:43.948
初心者の段階では、通常の表示と非表示はビジブルとヒドゥンで考え、コラプスは表の行や列を畳みたいとき専用の値、

48
00:03:43.948 --> 00:03:49.304
と整理しておくと迷いません。

49
00:03:49.304 --> 00:03:53.873
対応の細部はブラウザーごとに差がある点にも注意しましょう。

50
00:03:53.873 --> 00:03:58.017
実務でよく使われる、オパシティとの組み合わせを紹介します。

51
00:03:58.017 --> 00:04:04.303
パネルをふわりと消したいとき、オパシティだけだと透明になってもクリックできてしまいます。

52
00:04:04.303 --> 00:04:07.161
そこでビジビリティも一緒に切り替えます。

53
00:04:07.161 --> 00:04:15.734
表示するときはすぐにビジブルにしてから不透明度を上げ、消すときは不透明度が下がり切ったあとでヒドゥンにするのが定番です。

54
00:04:15.734 --> 00:04:22.306
スライドのようにトランジションにビジビリティも含めると、そのタイミングを自動で調整できます。

55
00:04:22.306 --> 00:04:26.093
メニューやモーダルを滑らかに開閉しながら、閉じた状態では操作もさせない、

56
00:04:26.093 --> 00:04:29.879
という完成度の高い動きが作れます。

57
00:04:29.879 --> 00:04:32.273
手元で試せる実例を紹介します。

58
00:04:32.273 --> 00:04:38.498
エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。

59
00:04:38.498 --> 00:04:46.319
シーエスエスでは、親に最大幅と余白、箱に余白と枠線と背景色を指定して、違いが見える土台を作ります。

60
00:04:46.319 --> 00:04:52.544
そのうえで、最後のビジビリティだけを、ヒドゥンとビジブルで切り替えてください。

61
00:04:52.544 --> 00:04:58.449
ヒドゥンでは文字が見えなくなりますが、箱があった場所に空白が残るはずです。

62
00:04:58.449 --> 00:05:03.078
ファイル保存後にブラウザーを再読み込みし、周りの要素が動かないことを確認すると、

63
00:05:03.078 --> 00:05:07.707
場所を残すという特徴が体感できます。

64
00:05:07.707 --> 00:05:10.899
値を一つずつ変えるのが理解への近道です。

65
00:05:10.899 --> 00:05:13.070
効かないときの確認です。

66
00:05:13.070 --> 00:05:23.199
まず、親をヒドゥンにしたのに子が見えている場合は、子やその子孫にビジブルが指定されていないかを確認してください。

67
00:05:23.199 --> 00:05:28.264
継承と上書きの関係で、意図せず表示されることがあります。

68
00:05:28.264 --> 00:05:37.490
次に、開発者ツールのスタイル欄で、宣言が打ち消されていないか、別の宣言に上書きされていないかを見ます。

69
00:05:37.490 --> 00:05:49.428
さらに、ネットワーク欄でスタイルシートが正常に取得できているか、エレメンツ欄でクラス名とセレクターが一致しているかも基本の確認です。

70
00:05:49.428 --> 00:05:58.111
最後に、コンピューテッド欄で最終的な値がどうなったかを確かめると、原因を切り分けやすくなります。

71
00:05:58.111 --> 00:06:02.436
隠し方の選び方を、アクセシビリティの面からも考えます。

72
00:06:02.436 --> 00:06:10.446
ビジビリティ、ヒドゥンの要素は、画面に見えないだけでなく、支援技術の対象からも外れるのが一般的です。

73
00:06:10.446 --> 00:06:15.652
完全に見せたくない情報ならそれでよいのですが、画面上だけ隠して読み上げには残したい、

74
00:06:15.652 --> 00:06:20.858
という場合は、ビジビリティでは実現できません。

75
00:06:20.858 --> 00:06:26.465
そのような場面では、視覚的にだけ隠す専用の手法が別に用意されています。

76
00:06:26.465 --> 00:06:32.632
また、隠したつもりの要素にキーボードでたどり着けないか、三百二十ピクセル程度の狭い画面や文字拡大でも困らないかを、

77
00:06:32.632 --> 00:06:38.799
実際の操作で確認する習慣を付けましょう。

78
00:06:38.799 --> 00:06:41.843
見た目だけで判断しないことが大切です。

79
00:06:41.843 --> 00:06:43.783
最後に互換性とまとめです。

80
00:06:43.783 --> 00:06:49.975
ビジビリティは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、

81
00:06:49.975 --> 00:06:56.167
サファリ一以降で対応すると紹介されており、主要ブラウザーで古くから使える基本プロパティです。

82
00:06:56.167 --> 00:06:57.063
まとめます。

83
00:06:57.063 --> 00:07:04.374
ビジブルは表示、ヒドゥンは場所を残して非表示で操作も不可、コラプスは主に表で行や列を畳む値でした。

84
00:07:04.374 --> 00:07:09.149
練習として、実例でヒドゥンとビジブルを切り替え、空白が残る理由と、ディスプレイ、

85
00:07:09.149 --> 00:07:13.924
ノンとの違いを自分の言葉で説明してみてください。

86
00:07:13.924 --> 00:07:15.267
お疲れさまでした。

87
00:07:15.267 --> 00:07:20.937
この使い分けができれば、表示切り替えでレイアウトが崩れないページを作れます。