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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

968閲覧

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

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/15 03:36

編集2021/09/15 03:39

実現したいこと
レスポンシブ対応の各ブレークポイントの大きさが適応されずに困っています。
@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:で書きたいのが本音なのでが。

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

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6<meta content="text/html; charset=utf-8"/> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8<link rel="stylesheet" href="reset.css"> 9<link rel="stylesheet" href="ppage1.css"> 10<link rel="stylesheet" href="responsive.css"> 11 12 <title>LPページ 初期申込フォーム</title> 13 <style type="text/css"> 14 15 16 /* 入力フォームの位置 */ 17 .auto-style1 { 18 margin: auto; 19 text-align: center; 20 } 21 22/* wrap50は左右の両脇に背景色を追加するコード*/ 23.wrap50 { 24 width: 100%; 25 margin: 0 auto; 26 background: rgb(42, 236, 17); 27 } 28 29/* 画像と文字の背景色の設定 */ 30.wrap01 { 31 width: 80%;/* 残りの20%はwrap50で指定した背景色になる */ 32 margin: 0 auto; 33 background:white; 34 } 35 36/* 画像と文字の背景色の設定 */ 37.wrap02 { 38 width: 80%;/* 残りの20%はwrap50で指定した背景色になる */ 39 margin: 0 auto; 40 background: white; 41 } 42</style> 43 44</head> 45<body> 46 47<div class="wrap50"> 48<!--wrap50左右の両脇に背景色を追加--> 49 50 51<div class="wrap01"> 52 <!--画像と文字の背景色の設定--> 53 <div class="flex3"> 54 55 <img src="humenn1.PNG" alt="[写真]" class="example20"> 56 57 <div class="title3"> 58 <p>私は台湾出身です。</p> 59 <p class="kuuhaku2"></p><!--空白の設定--> 60 <div> 61 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 62テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 63テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 64テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 65 </div> 66 67 68 69 </div> 70 </div> 71 </div> 72 73 <div class="wrap02"> 74 75 <div class="flex3"> 76 77 <img src="humenn2.PNG" alt="[写真]" class="example20"> 78 79 <div class="title3"> 80 <p>私は香港出身です。 81 </p> 82 <p class="kuuhaku2"></p><!--空白の設定--> 83 <div> 84 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 85 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 86 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 87 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 88 </div> 89 </div> 90</div> 91</div> 92 93 94 95<form action ="▽▽" method ="post"> 96 97 <div class="auto-style1"> 98 99 <p class="px-num"> 100名前:※ 101 </p> 102<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/> 103 104</form> 105</body></html> 106

css

1 /* 空白の設定 */ 2.kuuhaku2{ 3 margin-top: 25px; 4} 5/* 画像の横の説明文の設定 */ 6.title3 div{ 7 8 9 10 font-size: 20px; 11 color: rgb(68, 68, 68); 12 letter-spacing: 0.1em;/* 文字と文字の横の余白 */ 13 line-height:32px; 14} 15 16/* 画像の横に文字を配置する */ 17.flex3{ 18 display: flex;/* 画像の横に文字を配置する */ 19 padding: 10px; 20 width: 1000px;/* 文字の列数を横に多くする */ 21 margin: 0 auto; 22 justify-content: start; 23 align-items: center; 24} 25.flex3>div{ 26 27 margin: 10px; 28 padding: 10px; 29} 30 31/* 画像の横にタイトル) */ 32.title3 p{ 33margin: 8px; 34font-size: 34px; 35line-height:45px; 36 37color:rgb(30, 13, 189); 38} 39/* 画像の大きさ調節 */ 40img.example20{ 41 42 43 height: 160px; 44 45} 46 47 48/* pxで指定 入力フォーム文字サイズ、太さ*/ 49.px-num{ 50 line-height: 40px;/* 文字の行間 */ 51 font-size: 26px;/* 文字の大さ */ 52 font-weight: 900;/* 文字の太さ */ 53 text-align: center;/* 文字を中央に配置 */ 54 color: #63e02d; 55} 56 57/* 入力フォームのスタイル */ 58#name { 59 margin:0 auto; 60 text-align: center; 61 border: 3px solid #63e02d; /* 枠線 */ 62 background-color: snow; /* 背景色 */ 63 width: 29.3em; /* 横幅 */ 64 height: 56px; /* 高さ */ 65 font-size: 1em; /* テキスト内の表示文字サイズ */ 66 line-height: 1.2; /* 行の高さ */ 67 box-sizing: border-box;/* レスポンシブ対応中央 */ 68} 69

responsivecss

1 2/* 画面幅(400px以下の時までの適応)指定 */ 3@media screen and (max-width: 400px){ 4 5/* 空白の設定 */ 6 .kuuhaku2{ 7 margin-top: 25px; 8 } 9 /* 画像の横の説明文の設定 */ 10 .title3 div{ 11 12 13 font-size: 17px; 14 color: rgb(68, 68, 68);/* 文字の色 */ 15 letter-spacing: 0.1em;/* 文字と文字の横の余白 */ 16 line-height:28px; 17 } 18 19 /* 画像の横に文字を配置する */ 20 .flex3{ 21 22 23 flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ 24 に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */ 25 display: flex;/* 画像の横に文字を配置する */ 26 27 28 padding-top: 5px; 29 padding-right: 5px; 30 padding-bottom: 5px; 31 padding-left: 1px; 32 33 34 35 width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */ 36 margin: 0 auto; 37 justify-content: start; 38 align-items: center; 39 } 40 .flex3>div{ 41 42 margin: 10px; 43 padding: 10px; 44 } 45 /* 画像の横に文字のスタイル(タイトル) */ 46 .title3 p{ 47 margin: 8px; 48 font-size: 21px; 49 line-height:30px; 50 51 color:rgb(30, 13, 189); 52 } 53 54 /* 画像の大きさ調節 */ 55 img.example20{ 56 height: 160px; 57 58 } 59 60 /* 入力フォーム */ 61 #name { 62 height: 38px; 63 width: 92%; 64 font-size: 1em; /* テキスト内の表示文字サイズ */ 65 } 66/* pxで指定 入力フォーム文字サイズ、太さ*/ 67.px-num{ 68 font-size: 17px;/* 文字の大さ */ 69 70} 71} 72 73 74/* 画面幅(500px以下の時までの適応)指定 */ 75@media screen and (max-width: 500px){ 76 77/* 空白の設定 */ 78.kuuhaku2{ 79margin-top: 25px; 80} 81/* 画像の横の説明文の設定 */ 82.title3 div{ 83 84 85 86font-size: 17px; 87color: rgb(68, 68, 68);/* 文字の色 */ 88letter-spacing: 0.1em;/* 文字と文字の横の余白 */ 89line-height:28px;/* 行間の高さ */ 90} 91 92/* 画像の横に文字を配置する */ 93.flex3{ 94 95 96flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ 97に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */ 98display: flex;/* 画像の横に文字を配置する */ 99 100 101padding-top: 5px; 102padding-right: 5px; 103padding-bottom: 5px; 104padding-left: 1px; 105 106 107 108width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */ 109margin: 0 auto; 110justify-content: start; 111align-items: center; 112} 113.flex3>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする(title3 divを適応させるため) */ 114 115margin: 10px; 116padding: 10px; 117} 118/* 画像の横に文字のスタイル(タイトル) */ 119.title3 p{ 120margin: 8px; 121font-size: 21px; 122line-height:30px; 123 124color:rgb(30, 13, 189); 125} 126/* 画像の大きさ調節 */ 127img.example20{ 128 129 130height: 160px; 131 132} 133 134/* 入力フォーム */ 135 #name { 136 137 width: 73%; 138 border: 3px solid #63e02d; /* 枠線 */ 139 height: 43px; 140 font-size: 1.1em; /* テキスト内の表示文字サイズ */ 141 142 143 } 144 /* pxで指定 入力フォーム文字サイズ、太さ*/ 145 .px-num{ 146 font-size: 17px;/* 文字の大さ */ 147 } 148 149 } 150

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2021/09/15 03:52

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ghtew2

2021/09/15 07:57

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

2021/09/15 08:00

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問