CSSのみでスライドショーを作るときの備忘録
先に重要な点をまず一つ。
「CSSでスライドショーを作る」なんてことはしないほうがいいです。素直にJavaScriptを使ったほうが健全です。複雑な構造になるとレンダリングがヤバくなってリンクが正常に反応しなくなったり(反応が遅れたり)するので、「JavaScript禁止」とか「JavaScriptをhead内に書き込めない状況」などの場合以外はCSSでスライドショーなんて作らないほうがいいです。
わたし は つくりました
備忘録 display:noneの代替
display:none;は要素をまるごと消してくれる。具体的には高さや幅を維持せず本当に非表示にする。
visibility:hidden;は要素の高さや幅を維持したまま消してくれる。
visibility:hidden;
width:0;
height:0;
でdisplay:none;風のことができる。
visibility:hidden;の高さと幅を消すためにwidthとheightで0を指定している。
使い所
display:none;はtransitionの効果が反映されない。
であればvisibility:hidden;を使えばいいだろうと思ったのでやってみたら使えた。
aである要素をtargetしたときにdisplay:none;からdisplay:block;へとフェードをつけて切り替えたかった。しかしdisplay:none;からのアニメーション付き切り替えは不可能だとわかり、visibility:hidden;に乗り換えた。
visibility:visible;へ切り替える際、widthとheightの値をautoか任意の値にしてやる必要がある。
つまり
とりあえずこれでいく。
