プロが教えるわが家の防犯対策術！

PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ

解決済

  • 質問者：hayosato
  • 質問日時：
  • 回答数：5件

PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ400px以下の時に、縦に、赤青赤青と交互に並ぶようにしたいです。
今までスマホサイズ 400px以下 で赤青と交互にきちんと縦に並んでいたのですが、html内に、新たに PCサイズ2000px以下でのみ<div class="parallax-bg3">を適応したいと思い、 <div class="parallax-bg3"> を ２か所を追加したら、 <div id="me"> の直下でflexが効かなくなってしましました。

これを <div class="parallax-bg3"> をPCでのみ適応させて、さらに、 <div id="me">の直下でflexを400pxで適応させたいです。

実際のサイトのURL（ <div id="me">）が効かない ものが以下です。
https://rensyuu12.tokyo/PHPMailer/abab.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta content="text/html; charset=utf-8" />
<title></title>

<style>
</style>
</head>
<body>

<!--☆PCのみ適応parallax-bg3-->
<div class="parallax-bg3">
<!--スマホサイズ直下を指定する-->
<div id="me">
<!--赤い画像-->
<div class="wrap0001">

<div class="item2 parallax-bg2"><!--ぼかしパパラックス適応>
<img src="red1.png">
</div>

<div class="item2 parallax-bg2">
<img src="red2.png">
</div>

</div>
</div>
</div>

<!--☆PCのみ適応parallax-bg3-->
<div class="parallax-bg3">
<!--青い画像-->
<div class="wrap0001">

<div class="item2 parallax-bg2">
<img src="blue1.png">
</div>

<div class="item2 parallax-bg2">
<img src="blue2.png">
</div>

</div>
</div>
</div>
</body>
</html>

◎◎◎aaa.css
/* 400px*/
@media screen and (max-width: 400px){
/* 赤青赤青に縦に */
#me { /* me直下*/
display: flex;
flex-wrap: wrap;
}
.wrap0001 {
display: contents;
}
.wrap0001:nth-child(1) .item2:nth-child(1) {
order: 1;
}
.wrap0001:nth-child(1) .item2:nth-child(2) {
order: 3;
}
.wrap0001:nth-child(2) .item2:nth-child(1) {
order: 2;
}
.wrap0001:nth-child(2) .item2:nth-child(2) {
order: 4;
}
.item2 {
width: 100%;
text-align: center;
}
｝
/*2000px以下 */
@media screen and (max-width: 2000px){
/* PC横ならび */
.wrap0001 {
display: flex;
width: 80%;
margin: 0 auto;
}
.item2 {
width: 33.3%;
text-align: center;
}
/*パパラックスぼかし画像*/
.parallax-bg2 {
}
/*※PCのみパパラックス画像*/
.parallax-bg3 {
background-image: url('45mouth.png');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}

「PCサイズで赤い画像2つと、青い画像2つ」の質問画像

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

  • すみません。文字数オーバーで、/*パパラックスぼかし画像*/
    .parallax-bg2 {
    }のcssの部分をカットしています。

    内容はparallax-bg3と全く同じで、画像のコントラストが違うだけです。すみません。

      補足日時：2022/04/11 12:13
    通報する

  • すみません。文字数オーバーで、/*パパラックスぼかし画像*/
    .parallax-bg2 {
    }のcssの部分をカットしています。

    内容はparallax-bg3と全く同じで、画像のコントラストが違うだけです。すみません。

      補足日時：2022/04/11 12:13
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

うんでも、すんでも無いから、これが最後


divの入れ子のミス。自分で書いて見ろ！

<div id="me">が赤で終了してしまった。本来は全体に掛る。

その親要素<div class="parallax-bg3">を入れてしまった為、その終了divのつもりだろうが、<div id="me">の終了と見做されてしまってるんだよ！
    • good
    • 1
    • 件
通報する
この回答へのお礼

すみません。返信遅くなりました。なんとか解決できました。すみません。色々ありがとうございました。助かりました。

通報する
お礼日時：2022/04/14 11:03

No.4

  • 回答者： t_fumiaki
  • 回答日時：

cssで2000px以下を先に記述する。


⇒実際のhtmlでは先に読み込んでるから、ここはok。

parallax-bg3は全体に掛る様にする。
現状では両方のwrapに掛っている。

実際のhtmlでは間違って無い様だけどコメント部をチェックして下さい。
<!--ぼかしパパラックス適応>: コメントの終了は-->
    • good
    • 1
    • 件
通報する
この回答へのお礼

すみません。ありがとうございました

通報する
お礼日時：2022/04/14 11:02

No.3

  • 回答者： gura_
  • 回答日時：

hayosato さん


　･･･････PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ400px以下の時に、縦に、赤青赤青と交互に並ぶようにしたいです。･･･････

こちらをご参考に↓
https://detail.chiebukuro.yahoo.co.jp/qa/questio …
    • good
    • 2
    • 件
通報する

No.2

  • 回答者： t_fumiaki
  • 回答日時：

提示したhtmlとcss、自分で動かして見ました？？


まずは、チャント動くhtmlとcssを提示しましょう。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
そもそもwrap0001の下にはコンテンツ(img)が2個しか無く、そこで閉じられてる。

また#meは赤部分で閉じられてる。

だから、orderが効くのは最初の赤だけ。
その後ろに青があるから、結果、上書されて青2個の画像だけが表示される。

@media screen and (max-width: 400px)①　幅400以下
@media screen and (max-width: 2000px)②　幅2000以下

(スマホの場合も、幅が360なら①と②の両方が適用され、結果、青だけとなる。）
PCなら当然、青2個。

②はmin-width: 401px　じゃ無いの？？？
    • good
    • 2
    • 件
通報する
この回答へのお礼

ありがとうございます

通報する
お礼日時：2022/04/14 11:01

No.1

  • 回答者： naokita
  • 回答日時：

全く検証もしていないけど、


/*2000px以下 */ を追加したら、効かなくなったという事は、
優先度が上書きされたという事なので、
/*2000px以下 */ と /*400px以下 */ を入れ替えれば良いでしょう。
（上下の場所を入れ替える ＝ 400の上に2000を！）
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2022/04/11 16:53

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報