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

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

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

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

HTML5

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

レスポンシブWebデザイン

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

Q&A

解決済

1回答

10018閲覧

メディアクエリ内のmax-widthが効かない

chocolatehouse

総合スコア13

CSS3

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

HTML5

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

レスポンシブWebデザイン

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

0グッド

0クリップ

投稿2018/08/16 09:38

編集2018/08/16 09:58

前提・実現したいこと

html/cssにてbootstrapを用いたレスポンシブデザインのLPを作成中です。
768px以下のときに、フォームのinputの長さを可変幅(最大幅は400px)で、左右のマージン20pxで中央配置したいです。

発生している問題・エラーメッセージ

@media 内で最大幅幅400pxを設定しておりますが、画面サイズを420px以下にしてもフォーム(textもsubmitも)が縮まりません。

該当のソースコード

HTML

1<div class="top_form"> 2 3 <input type="text" name="email" placeholder="メールアドレス" class="oneline" > 4 <input type="text" name="pass" placeholder="パスワード" class="oneline"> 5 <input type=submit value="" class="btn_trial"> 6 </div> 7

CSS

1.top_form{ 2 width:480px; 3 height: 480px; 4 float: right; 5 background-color: rgba(256,256,256,0.75); 6 z-index: 10; 7 padding: 30px 40px ; 8 border: solid 1px #707070; 9 box-shadow: 2px 2px 10px rgba(0,0,0,0.4); 10 position: absolute; 11 top: 20px; 12 left: 160px; 13 14} 15 16.oneline{ 17 width: 400px; 18 height: 50px; 19 padding: 15px; 20 margin-bottom: 20px; 21} 22 23.btn_trial{ 24 color: #fff; 25 background-image: url(btn-pink.png); 26 width:400px; 27 height: 68px; 28 font-size:30px; 29 margin: 20px 0px; 30 padding: 20px 50px; 31 border-style: none; 32 border-radius: 5px; 33 line-height: 0; 34 35@media screen and (max-width: 768px){ 36 37 .top_form{ 38 position: static; 39 width: 100%; 40 text-align: center; 41 padding: 6% 3%; 42 } 43 input{ 44 max-width: 400px; 45 width:10%; 46 margin: 0 auto; 47 }

試したこと

メディアクエリ内でwidthを80%ほどに設定して、max-width400pxにしましたが、変わらず。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

分かったこと:

  • .btn_trialの}忘れ
  • @meida内のセレクタが弱い(input{}よりも.btn_trial{}の方が強く影響している)
  • セレクタの強さはここで確認できます→http://specificity.keegan.st/

テコ入れなので,あまりお勧めはしませんが,

css

1input:not(:root){ 2 max-width: 400px; 3 width:10%; 4 margin: 0 auto; 5}

というふうに,セレクタの詳細度を上げれば,一応適応されるはずです
時間があったら,根本的解決法を考えてみようと思います

投稿2018/08/16 09:59

liveasnotes

総合スコア1284

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

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

chocolatehouse

2018/08/16 10:04

参考URLまで、丁寧なご回答ありがとうございます。 セレクタの範囲が大きすぎると弱くなってしまうのですね。 提示していただいたコードで解決しました。ありがとうございます。 btn_trialの}はコピペミスでした、申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問