お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
YouTubeに横スクロールバーが出...
-
CSS の flexbox を display: no...
-
Google Chrome で訪問済みのリ...
-
バッチファイル内のコマンドプ...
-
Firefoxクラッシュ頻発
-
DUN対応とは?
-
firefoxの右のスクロールバーが...
-
Webページの作成日時と最終更新...
-
サンダーバードメール移動しない
-
OUTLOOKで受信したメールがうま...
-
【FireFox】ブックマークのfavi...
-
Firefoxのアドオンが全く効かな...
-
(CMYK/8)と(CMYK/8#)の違い
-
メールのリンクをクリックする...
-
サンダーバードでリンクURLと違...
-
IEでhotmailの受信メールが開か...
-
プリンタプロファイルのMK(LD)って
-
Thunderbirdで添付ファイルが開...
-
ブラウザOperaについて
-
firefox ツールバーの表示がお...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS の flexbox を display: no...
-
【Firefox】userChrome.css 「n...
-
Firefoxのツールバーの変更
-
YouTubeに横スクロールバーが出...
-
googleリーダーの既読、未読の...
-
行間の設定:firefox Stylish
-
Firefox のウィンドウ枠を変更...
-
Firefoxのブックマークのマウス...
-
#wrapperタグに意味を教えてく...
-
白い部分の名前を教えて
-
ファイヤーフォックス リンクの色
-
FirefoxのuserChrome.css の使い方
-
CSSを利用して、特定のリンクや...
-
Firefox5 デフォルトファビコン...
-
firefoxのスクロールバーの色変更
-
FirefoxのCSSで勉強がてら広告...
-
新しい質問や回答の記入欄ってP...
-
firefoxの<li>について、行番号...
-
firefoxメニューバーアイコンを...
-
firefoxのカスタマイズをしてい...
おすすめ情報
bx2さん、ご回答ありがとうございます。
今回、HTMLとCSSは次のように記述しました。こちらを、スクリーンのサイズによって(幅599ピクセル以下は、スマホの設定で表示)、自動的に切り替えたいです。
CSSにメディアクエリー(例えば、@media screen and (max-width: 599px))を設定すると、確かに、スクリーンサイズによってフレックスボックスは表示・非表示になるのですが、HTMLの要素「メニュー1 メニュー2 メニュー3」がテキストとして表示されてしまうのです。
display:none; の記述にこだわらず、メディアクエリーで、フレックスボックスを、その中の要素(テキストや画像)も含めて非表示にする方法があれば教えてください。
■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>
■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;
}
.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;
}