CSSのみで表示/非表示にする設定方法
それぞれの表示・非表示での違い
opacityでの表示・非表示
opacity: 1の設定。opacity: 1の設定。
opacity: 0.8の設定。opacity: 0.8の設定。
opacity: 0.6の設定。opacity: 0.6の設定。
opacity: 0.4の設定。opacity: 0.4の設定。
opacity: 0.2の設定。opacity: 0.2の設定。
opacity: 0の設定。opacity: 0の設定。
※↑ここにopacity:0も設定していますが、0のため見えません。
displayでの表示・非表示
display: blockで表示している
display: noneで非表示にしている
※↑ここにdisplay:none;も設定していますが、noneのため見えません。
テキストの途中や色々な要素に使えます。
←この「使えます。」の後にbrで改行を入れていますが、そのbrにdisplay:noneを設定したので、改行が入らないテキストになっています。
visibilityでの表示・非表示
visibility: visibleで表示している
visibility: hiddenで非表示にしている
※↑ここにvisibility:hidden;も設定していますが、hiddenのため見えません。
opacity、display、visibilityでの違い
要素の検証
↓高さ300pxの要素をopacity:0で非表示↓
opacity: 0の設定。opacity: 0の設定。
↓高さ300pxの要素をdisplay:noneで非表示↓
display: noneで非表示にしている
↓高さ300pxの要素をvisibility:hiddenで非表示↓
visibility: hiddenで非表示にしている
display:none以外は、それぞれ見えていないだけで、要素自体は存在する事になります。ただし、opacityもvisibilityもheight:0を指定しておけば、同じ見え方になります。
クリックやコピペの検証
tabキーなどでリンクURLを確認できます。
リンクはトップページに飛ばしてますが、わかりやすいように仮のアンカーリンクを付けて確認できるようにしています。
opacity:0のリンクだけ、リンククリックできますし、ドラッグしてコピーすれば、テキストなども全てコピーが可能です。