SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのvisibilityの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:21動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ビジビリティです。
  4. 0:06これは、要素が占める場所はそのまま残して、内容が見えるかどうかだけを切り替えるプロパティです。
  5. 0:13値には、ビジブル、ヒドゥン、コラプスの三つがあります。
  6. 0:17たとえばヒドゥンにすると、箱は透明になったように見えなくなりますが、周りの要素は詰まってきません。
  7. 0:24あとで表示に戻したときにレイアウトがずれないのが大きな特徴です。
  8. 0:29この動画では、ディスプレイやオパシティとの違い、子要素だけを表示できる継承の仕組みまで、
  9. 0:33順番に整理していきます。
  10. 0:37まず基本の書き方です。
  11. 0:39スライドの例では、デモというクラスを持つ要素に、ビジビリティ、ヒドゥンを指定しています。
  12. 0:46プロパティ名の後ろにコロンを書き、値の最後にセミコロンを付ける、というシーエスエスの基本形はほかのプロパティと同じです。
  13. 0:55初期値はビジブルで、通常の継承をします。
  14. 0:58つまり、親にヒドゥンを指定すると、原則として子要素も見えなくなります。
  15. 1:03ただし、ビジビリティには子だけをビジブルに戻せるという珍しい特徴があり、
  16. 1:07それは後のセクションで詳しく紹介します。
  17. 1:12まずは、隠したい要素自身に書く、という基本を押さえましょう。
  18. 1:16中心になる二つの値を比べます。
  19. 1:18ビジブルは初期値で、要素は通常どおり表示されます。
  20. 1:22ヒドゥンは、要素の文字も背景も境界線も見えなくなりますが、幅や高さが作る場所はそのまま残ります。
  21. 1:29そのため、前後の文章や箱の位置は動きません。
  22. 1:32また、ヒドゥンの要素はマウスやタッチの対象にもならず、クリックできません。
  23. 1:37この点が、透明にしても操作できてしまうオパシティ、ゼロとの大きな違いです。
  24. 1:42読み込み中だけ場所を確保して隠しておきたい場合や、切り替えても周りが動いてほしくない場合に、
  25. 1:47ヒドゥンはとても向いています。
  26. 1:51似た目的で使われる三つを、二つの軸で整理しましょう。
  27. 1:55一つ目は場所が残るか、二つ目は操作できるかです。
  28. 1:59ディスプレイ、ノンは、要素自体がなかったかのように扱われ、場所も消えて周りが詰まります。
  29. 2:07オパシティ、ゼロは、見た目が透明になり場所は残りますが、見えないボタンを押せてしまうなど、
  30. 2:12操作はできてしまいます。
  31. 2:17ビジビリティ、ヒドゥンは、場所が残り、操作はできません。
  32. 2:21見えないのに押せるのは利用者を混乱させるので、隠した要素を操作させたくないならヒドゥンが安全です。
  33. 2:30目的に合わせて、この三つを使い分けることが大切です。
  34. 2:34ビジビリティならではの特徴を紹介します。
  35. 2:37親にヒドゥンを指定すると子は原則として隠れますが、特定の子にビジブルを指定すると、
  36. 2:41その子だけを表示できます。
  37. 2:45スライドの例では、親全体を隠しながら、キープというクラスを持つ子だけを見せています。
  38. 2:51これは、ディスプレイ、ノンではできません。
  39. 2:54親をノンにすると、子をどう指定しても一切表示されません。
  40. 2:58ツールチップやポップアップで、土台は隠しつつ一部だけ見せたい場面で役立つ仕組みです。
  41. 3:04継承するけれど子で上書きできる、という関係を覚えておくと、設定が効かないと感じたときの原因探しにも役立ちます。
  42. 3:12三つ目の値、コラプスを説明します。
  43. 3:15これは主に表で使う値で、行や列を畳んで、その分の場所も詰める働きをします。
  44. 3:21ヒドゥンとの違いは、場所までなくなる点です。
  45. 3:24ただし、表以外の普通の要素に指定した場合は、多くのブラウザーでヒドゥンと同じように扱われます。
  46. 3:32また、フレックスボックスなど、レイアウトの文脈によって扱いが変わることもあります。
  47. 3:38初心者の段階では、通常の表示と非表示はビジブルとヒドゥンで考え、コラプスは表の行や列を畳みたいとき専用の値、
  48. 3:43と整理しておくと迷いません。
  49. 3:49対応の細部はブラウザーごとに差がある点にも注意しましょう。
  50. 3:53実務でよく使われる、オパシティとの組み合わせを紹介します。
  51. 3:58パネルをふわりと消したいとき、オパシティだけだと透明になってもクリックできてしまいます。
  52. 4:04そこでビジビリティも一緒に切り替えます。
  53. 4:07表示するときはすぐにビジブルにしてから不透明度を上げ、消すときは不透明度が下がり切ったあとでヒドゥンにするのが定番です。
  54. 4:15スライドのようにトランジションにビジビリティも含めると、そのタイミングを自動で調整できます。
  55. 4:22メニューやモーダルを滑らかに開閉しながら、閉じた状態では操作もさせない、
  56. 4:26という完成度の高い動きが作れます。
  57. 4:29手元で試せる実例を紹介します。
  58. 4:32エイチティーエムエルでは、ステージという親の中に、デモという箱を一つ置きます。
  59. 4:38シーエスエスでは、親に最大幅と余白、箱に余白と枠線と背景色を指定して、違いが見える土台を作ります。
  60. 4:46そのうえで、最後のビジビリティだけを、ヒドゥンとビジブルで切り替えてください。
  61. 4:52ヒドゥンでは文字が見えなくなりますが、箱があった場所に空白が残るはずです。
  62. 4:58ファイル保存後にブラウザーを再読み込みし、周りの要素が動かないことを確認すると、
  63. 5:03場所を残すという特徴が体感できます。
  64. 5:07値を一つずつ変えるのが理解への近道です。
  65. 5:10効かないときの確認です。
  66. 5:13まず、親をヒドゥンにしたのに子が見えている場合は、子やその子孫にビジブルが指定されていないかを確認してください。
  67. 5:23継承と上書きの関係で、意図せず表示されることがあります。
  68. 5:28次に、開発者ツールのスタイル欄で、宣言が打ち消されていないか、別の宣言に上書きされていないかを見ます。
  69. 5:37さらに、ネットワーク欄でスタイルシートが正常に取得できているか、エレメンツ欄でクラス名とセレクターが一致しているかも基本の確認です。
  70. 5:49最後に、コンピューテッド欄で最終的な値がどうなったかを確かめると、原因を切り分けやすくなります。
  71. 5:58隠し方の選び方を、アクセシビリティの面からも考えます。
  72. 6:02ビジビリティ、ヒドゥンの要素は、画面に見えないだけでなく、支援技術の対象からも外れるのが一般的です。
  73. 6:10完全に見せたくない情報ならそれでよいのですが、画面上だけ隠して読み上げには残したい、
  74. 6:15という場合は、ビジビリティでは実現できません。
  75. 6:20そのような場面では、視覚的にだけ隠す専用の手法が別に用意されています。
  76. 6:26また、隠したつもりの要素にキーボードでたどり着けないか、三百二十ピクセル程度の狭い画面や文字拡大でも困らないかを、
  77. 6:32実際の操作で確認する習慣を付けましょう。
  78. 6:38見た目だけで判断しないことが大切です。
  79. 6:41最後に互換性とまとめです。
  80. 6:43ビジビリティは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、
  81. 6:49サファリ一以降で対応すると紹介されており、主要ブラウザーで古くから使える基本プロパティです。
  82. 6:56まとめます。
  83. 6:57ビジブルは表示、ヒドゥンは場所を残して非表示で操作も不可、コラプスは主に表で行や列を畳む値でした。
  84. 7:04練習として、実例でヒドゥンとビジブルを切り替え、空白が残る理由と、ディスプレイ、
  85. 7:09ノンとの違いを自分の言葉で説明してみてください。
  86. 7:13お疲れさまでした。
  87. 7:15この使い分けができれば、表示切り替えでレイアウトが崩れないページを作れます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

visibilityの役割と主な指定値を解説。箱の場所を残したまま内容が見えなくなります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのvisibilityの使い方：指定値・実例・効かない原因とブラウザー互換性 →