display:noneから表示に戻すとレイアウトが崩れる原因と対処法

2019年3月10日CSS

JavaScriptやjQueryのcss()でdisplay:noneで非表示にしている要素を表示に戻した時にレイアウトが崩れてしまう原因と対処法です

display:noneから表示に戻すとレイアウトが崩れる原因

display:noneから表示に戻すとレイアウトが崩れるのは、もともとCSSの初期値でdisplay:noneを設定している要素は問題なく、JavaScriptやjQueryのスクリプトで非表示に書き換えた要素にて発生します

原因は元パラメータがblockではないのにdisplay:blockで表示に戻している場合が殆どで、display:flexなどレイアウトに影響を与える他のパラメータを設定されていた要素をnoneで上書きしていて、戻す時にblockなので元のデザインと変わってしまうから

また、CSSでdisplayを変更していない要素でも初期値の違いがあります

例えばpやdivのデフォルト値はblockですが、aやspan、imgなどはinlineと初期値が違うので再表示する際は注意です

display:noneから表示に戻すとレイアウトが崩れる時の対処法

そのままですが、表示に戻す祭にdisplay:blockではなく元々のスタイルを設定すればOK

aタグやspan、画像などでのデフォルト値の場合は、display:inlineとします

2019年3月10日CSS

Posted by Yousuke.U