オンライン健康相談、gooドクター

ウェブサイトを手打ちで作成しています。

フレックスボックス(flexbox)を、パソコンのブラウザで非表示いしたいと考えています。

CSS でメディアクエリーを用いて、その中で display :none; を記述したのですが、非表示になってくれません。

CSS の flexbox を display: none; で非表示にできますか? 教えてください。お願いします。

質問者からの補足コメント

  • bx2さん、ご回答ありがとうございます。

    今回、HTMLとCSSは次のように記述しました。こちらを、スクリーンのサイズによって(幅599ピクセル以下は、スマホの設定で表示)、自動的に切り替えたいです。

    CSSにメディアクエリー(例えば、@media screen and (max-width: 599px))を設定すると、確かに、スクリーンサイズによってフレックスボックスは表示・非表示になるのですが、HTMLの要素「メニュー1 メニュー2 メニュー3」がテキストとして表示されてしまうのです。

    display:none; の記述にこだわらず、メディアクエリーで、フレックスボックスを、その中の要素(テキストや画像)も含めて非表示にする方法があれば教えてください。

      補足日時:2021/03/06 13:06
  • ■HTML
    <!-- パソコン表示用メニュー -->
    <div class="f-container_top_pc">
    <div class="f-item_top_pc">メニュー1</div>
    <div class="f-item_top_pc">メニュー2</div>
    <div class="f-item_top_pc">メニュー3</div>
    </div>

    <!-- スマホ表示用メニュー -->
    <div class="f-container_top_phone">
    <div class="f-item_top_phone">メニュー1</div>
    <div class="f-item_top_phone">メニュー2</div>
    <div class="f-item_top_phone">メニュー3</div>
    </div>

      補足日時:2021/03/06 13:06
  • ■CSS
    .f-container_top_pc{ /* PC用トップページのフレックスボックス */
    display:flex;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-around;
    align-items:stretch;

    background-color: #ccc;

    padding: 12px;
    }

    .f-item_top_pc{
    text-align: center;

    width: calc(33.3% - 10px);
    border-radius:5px;
    color:#fff;
    font-weight: bold;
    background-color:#55c3dc;

    padding: 24px;
    }

      補足日時:2021/03/06 13:07
  • .f-container_top_phone{ /* スマホ用トップページのフレックスボックス */
    display:flex;

    flex-direction: column;
    justify-content:space-around;
    align-items:stretch;

    background-color: #ccc;

    padding: 12px;
    }

    .f-item_top_phone{
    text-align: center;

    font-size: 1.5em;
    border-radius:5px;
    color:#fff;
    font-weight: bold;
    background-color:#55c3dc;

    padding: 24px;
    }

      補足日時:2021/03/06 13:07
gooドクター

A 回答 (1件)

下記でどうですか?



display: none !important;
    • good
    • 1
この回答へのお礼

bx2さん、早速のご回答ありがとうございます。

私の理解が足らず、質問の仕方が良くなかったようです。改めて「補足」させていただきます。ごらんください。

お礼日時:2021/03/06 13:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング