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

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

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

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

HTML5

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

解決済

メディアクエリが効かない

rubyprogram
rubyprogram

総合スコア0

CSS3

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

HTML5

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

1回答

0評価

0クリップ

862閲覧

投稿2020/04/07 13:30

前提・実現したいこと

RailsでLPのレスポンシブ対応を行いたいですのですが、特定の部分でメディアクエリが効かず困っております。

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

4つのブロックをPC表示では横一列に並べて表示しているところを、スマホ表示では2列×2行で表示させようとしています。
CSSの中にメディアクエリを記載することで実現しようとしているのですが、スマホ表示のcssが反映されておりません。GoogleChromeの検証ツールで確認してみると、スマホ表示のメディアクエリのCSSが横棒で消されている?ことになっていてPC表示のcssが効いているようです。
他の部分のメディアクエリは効いているため、自分のコードに問題があると思うのですが調べても解決できずアドバイスを頂けますと幸いです。

該当のソースコード

--------HTMLのソースコードです------------------------------------------------------------------
<div class="features-four">
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">勤怠</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
従業員の業務時間が視える事で</br>
働き方改革関連法における、</br>
労働時間の把握義務への対応</br>
が可能です。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">業務</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
繰り返し業務や単純作業が</br>
視えることで、誰がどのくらい</br>
対象の業務をやっているかを</br>
把握することができるため、</br>
業務効率化が検討できます。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">セキュリティ</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
USBなどの外付けハード機器に</br>
誰が、どのデータを入れたか、</br>
把握することができるため、</br>
情報流出の管理に繋がります。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">IT資産</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
使用するPC端末に入っている</br>
セキュリティ関連のソフトの</br>
バージョン情報が視えることで</br>
端末の一元管理にも繋がります。</span></p>
</div>
</div>
---------------CSSのソースコードです。----------------------------------------------------------
(CSS)
div.features-four{
display: flex;
justify-content: space-around;
margin: 2.5% 0 2.5% 0%;
}
@media screen and (max-width: 768px){
div.features-four{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}

試したこと

・ブレイクポイントが間違っているかと思い、メディアクエリ部分のmax-widthの値を修正してみましたが変化はなくブレイクポイントの設定は正しいようです。
・PC表示のcssコードにはメディアクエリを記載していなかったので下記のようにPC表示の部分にもメディアクエリを記載してみましたが変化はなかったです。

@media screen and (min-width: 1000px){
div.features-four{
display: flex;
justify-content: space-around;
margin: 2.5% 0 2.5% 0%;
}
}
@media screen and (max-width: 768px){
div.features-four{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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