レスポンシブ 【初心者向け】display:none; が効かない時の対処法

初心者向け模写を最近やっています^^

そこで初心者の私がよくやってしまうミスをご紹介します！

皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でございます 

参考にした模写はこちら 

作って学ぶコーディング学習サイト　https://code-jump.com/coding-recommend/

見た目がシンプルで綺麗めのデザインなので初心者にはコーディング学習にぴったり！！

ある程度PC版の画面模写は仕上がってきたので、次はモバイル版になった時も見やすいようにレスポンシブデザインを考えていきたいと思います。

まずは今回私がレスポンシブする時使うのは、@media　です。

@media screen　は使い方にもいろんな方法があるので一度確認してみてください^^

今回の模写はPC版では２カラムと３カラムのレイアウトになっていました。

この画面をPC版よりも画面幅が狭くなるモバイル版でも対応できるように２カラム、３カラムのレイアウトを１カラムに変更していきましょう！

２カラム、３カラムになるように設定した　display: flex; 　があります。

画面幅がモバイル版になったとき　display: flex; 　を無効化する必要があります。

ここで display: none; 使いがちですが、これで無効化できなかった場合、

display: none;　ではなく、　display: block;　を使ってください^^

なぜなら、自分が使う親要素によっては、display: none; と指定しても親要素の設定が邪魔をして無効化できないことがあります。

（私の場合、親要素にsectionタグが入っていたのでそれが原因でした・・・）

今回　display: block;　を使ったことによってモバイル版になったときのレイアウトを1カラムに変更することができました！

display: block; は名前の通り、コンテンツをまとめるブロックという意味です。

このように、2カラム、3カラムのPC版から1カラムのモバイル版へレスポンシブデザインを考えるときに

「あれ？動かない・・・」「なんか思ってたのと違う！」とつまづきやすいですが、

ひとつひとつ丁寧に読み解くと答えは意外と簡単なところにあったりするかもしれません・・

ブラウザの検証をうまく使って解決していってくださいね^^

HTML CSS 中級模写　《レスポンシブ 【初心者向け】display:none; が効かない時の対処法》でした★