CSSでデザインをしていく中で、レスポンシブなデザインをしたい時、デザインの4原則の反復から外すデザインをしたい時など、要素を非表示にしたいと思っとことはありませんか？
今回はそんなCSSをあまり触ったことがない人に向けて、要素を非表示にする方法をご紹介していきます。
Contents
要素を非表示にする方法
display:none
要素を非表示にするための1つ目の方法が、displayプロパティを使用することです。
使用するdisplayプロパティは ↓
display:none非表示にしたい要素に、これを指定することでキレイに要素を非表示にすることができます。
非表示を解除したいときには、display:none以外のdisplayプロパティを指定することによって、非表示を解除することができます。
display:noneはクリックしたら表示だっり、レスポンシブデザイン時によく使用します。
[blogcard url=”https://chillblog.org/2022/07/09/%e6%a7%98%e3%80%85%e3%81%aadisplay%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%90%86%e8%a7%a3%e3%81%97%e3%82%88%e3%81%86%e3%80%90css%e3%80%91/”]2つ目の方法がvisibilityプロパティを使用することです。
使用するvisibilityプロパティは ↓
visibility:hiddenvisibility:hiddenは、要素を非表示にしますが、その要素が持っている位置や幅、高さなどの構造は維持されます。
非表示を解除したい時には、visibility:visibleを指定すると指定した部分を表示することが出来ます。
visibility:hiddenはホバーすると表示などという時によく使用します。
