要素を非表示にしたい時には？
cssで要素を非表示にしたい時がある。Java Scriptでタブﾒﾆｭｰを実装する時などによく使われるだろう。
ここでは要素の非表示の方法を２つ紹介する。それぞれ用途が違うので注意し区別すること。
初心者はこう言った基本をしっかり身につけることで、後々Java Scriptの勉強に進んだ時に理解が速くなると思う。
display: none;とvisibility: hidden;
display: none;とvisibility: hidden;両者で要素を非表示にすることができる。しかし両者にはおおきな違いがある。
まずdisplay: none;はもともと表示されていた要素は無かったことになる。「無かったこと」とは、はじめから存在しなかったと言う意味である。つまりその要素の後に他の要素があった場合、後の要素が前の要素の位置にせりあがると言うことである。noneの意味は「無し」。
一方、visibility: hidden;は要素自体は見えなくなるが、見えないだけで実際には要素がある。完全に要素が消えるのではなく、透明になっているような状態になる。つまり後に続く要素があっても無視されずに要素の位置は変わらないのである。hiddenの意味は「隠す」。