質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

レスポンシブ対応のブレイクポイントが反映されない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 71

score 28

実現したいこと
レスポンシブ対応の各ブレークポイントの大きさが適応されずに困っています。
@media screen and (max-width: 400px){
@media screen and (max-width: 500px){
の2つのブレイクポイントを指定しているのですが、300px代のスマホ幅でも(max-width: 400px)の方の大きさを適応したいのですが、max-width: 500pxの大きさが適応されてしまいます。

入力フォームの横幅width: 92%;をレスポンシブ対応(max-width: 400px)で適応したいのですが、
(max-width: 500px)で指定したwidth: 73%;が適応されてしまいます。

試したこと
(max-width: 400px)を(min-width: 400px)にしてみたのですが、(min-width: 400px)にすると .flex3{
flex-direction: column;をスマホのサイズの場合のみ指定したくて指定のですが、PCサイズでも適応されてしまうため、max-widthにしています。

今までレスポンシブ対応ではmin-width:で書いていたのでmin-width:で書きたいのが本音なのでが。

クロームのディベロッパーツールを使っています。

<!DOCTYPE html> 

<html lang="ja">

<head>
<meta content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="ppage1.css">
<link rel="stylesheet" href="responsive.css">

 <title>LPページ 初期申込フォーム</title> 
 <style type="text/css">


 /* 入力フォームの位置 */     
 .auto-style1 {
     margin: auto;
     text-align: center;
   }

/* wrap50は左右の両脇に背景色を追加するコード*/ 
.wrap50 {
            width: 100%;
            margin: 0 auto;
            background: rgb(42, 236, 17);
        }

/* 画像と文字の背景色の設定 */
.wrap01 {
            width: 80%;/* 残りの20%はwrap50で指定した背景色になる */
            margin: 0 auto;
            background:white;
        }

/* 画像と文字の背景色の設定 */
.wrap02 {
            width: 80%;/* 残りの20%はwrap50で指定した背景色になる */
            margin: 0 auto;
            background: white;
        }
</style>

</head>
<body>

<div class="wrap50">
<!--wrap50左右の両脇に背景色を追加-->


<div class="wrap01">
  <!--画像と文字の背景色の設定-->
  <div class="flex3">

          <img src="humenn1.PNG" alt="[写真]" class="example20"> 

      <div class="title3">
          <p>私は台湾出身です。</p>
          <p class="kuuhaku2"></p><!--空白の設定-->
          <div>
            テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
          </div>



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

        <div class="wrap02">

        <div class="flex3">   

               <img src="humenn2.PNG" alt="[写真]" class="example20">

            <div class="title3">
                <p>私は香港出身です。
                </p>
                <p class="kuuhaku2"></p><!--空白の設定-->
                <div>
                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
                  テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、
                    </div>
 </div>
</div>          
</div>



<form action ="▽▽" method ="post">

  <div class="auto-style1">

    <p class="px-num"> 
名前:※
    </p>
<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/>

</form>
</body></html>
 /* 空白の設定 */
.kuuhaku2{
  margin-top: 25px;
}
/* 画像の横の説明文の設定 */
.title3 div{



  font-size: 20px;
  color: rgb(68, 68, 68);
  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
  line-height:32px;
}

/* 画像の横に文字を配置する */
.flex3{
  display: flex;/* 画像の横に文字を配置する */
  padding: 10px;
  width: 1000px;/* 文字の列数を横に多くする */
  margin: 0 auto;
  justify-content: start;
  align-items: center;
}
.flex3>div{

  margin: 10px;
  padding: 10px;
}

/* 画像の横にタイトル) */
.title3 p{
margin: 8px;
font-size: 34px;
line-height:45px;

color:rgb(30, 13, 189);
}
/* 画像の大きさ調節 */
img.example20{


  height: 160px;

}


/* pxで指定 入力フォーム文字サイズ、太さ*/
.px-num{
  line-height: 40px;/* 文字の行間 */
  font-size: 26px;/* 文字の大さ */
  font-weight: 900;/* 文字の太さ */
  text-align: center;/* 文字を中央に配置 */
  color: #63e02d;
}

/* 入力フォームのスタイル */
#name {
    margin:0 auto; 
     text-align: center;
    border: 3px solid #63e02d;  /* 枠線 */
    background-color: snow;  /* 背景色 */
    width: 29.3em;             /* 横幅 */
    height: 56px;           /* 高さ */
    font-size: 1em;          /* テキスト内の表示文字サイズ */
    line-height: 1.2;         /* 行の高さ */
    box-sizing: border-box;/* レスポンシブ対応中央 */
}
/* 画面幅(400px以下の時までの適応)指定 */
@media screen and (max-width: 400px){

/* 空白の設定 */
  .kuuhaku2{
  margin-top: 25px;
  }
  /* 画像の横の説明文の設定 */
  .title3 div{


  font-size: 17px;
  color: rgb(68, 68, 68);/* 文字の色 */
  letter-spacing: 0.1em;/* 文字と文字の横の余白 */
  line-height:28px;
  }

  /* 画像の横に文字を配置する */
  .flex3{


  flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ
  に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */
  display: flex;/* 画像の横に文字を配置する */


  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 1px;



  width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */
  margin: 0 auto;
  justify-content: start;
  align-items: center;
  }
  .flex3>div{

  margin: 10px;
  padding: 10px;
  }
  /* 画像の横に文字のスタイル(タイトル) */
  .title3 p{
  margin: 8px;
  font-size: 21px;
  line-height:30px;

  color:rgb(30, 13, 189);
  }

  /* 画像の大きさ調節 */
  img.example20{
  height: 160px;

  }

 /* 入力フォーム */
 #name {
    height: 38px; 
    width: 92%;
    font-size: 1em;   /* テキスト内の表示文字サイズ */
   }
/* pxで指定 入力フォーム文字サイズ、太さ*/
.px-num{
    font-size: 17px;/* 文字の大さ */

}
} 


/* 画面幅(500px以下の時までの適応)指定 */
@media screen and (max-width: 500px){

/* 空白の設定 */
.kuuhaku2{
margin-top: 25px;
}
/* 画像の横の説明文の設定 */
.title3 div{



font-size: 17px;
color: rgb(68, 68, 68);/* 文字の色 */
letter-spacing: 0.1em;/* 文字と文字の横の余白 */
line-height:28px;/* 行間の高さ */
}

/* 画像の横に文字を配置する */
.flex3{


flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ
に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */
display: flex;/* 画像の横に文字を配置する */


padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 1px;



width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */
margin: 0 auto;
justify-content: start;
align-items: center;
}
.flex3>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする(title3 divを適応させるため) */

margin: 10px;
padding: 10px;
}
/* 画像の横に文字のスタイル(タイトル) */
.title3 p{
margin: 8px;
font-size: 21px;
line-height:30px;

color:rgb(30, 13, 189);
}
/* 画像の大きさ調節 */
img.example20{


height: 160px;

}

/* 入力フォーム */
   #name {

         width: 73%;
         border: 3px solid #63e02d;  /* 枠線 */
      height: 43px;
      font-size: 1.1em;   /* テキスト内の表示文字サイズ */


        }
  /* pxで指定 入力フォーム文字サイズ、太さ*/
    .px-num{
         font-size: 17px;/* 文字の大さ */
    }

      }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

@media screen and (max-width: 400px){
@media screen and (max-width: 500px){
の順番を逆にすればいいのでは。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/15 16:57

    返信遅くなりました。回答よろしくお願いいたします
    上記の方法で解決できました。感謝いたします。

    キャンセル

  • 2021/09/15 17:00

    お役に立てたようで何よりです

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る