実現したいこと。Rails5にてscssで記述したメディアクエリを反映させたい
・プログラミング学習サイトのProgateのコードを基に自分で同じレスポンシブ対応のホームページを作成しているのですが、scssに記述したメディアクエリが反映されません。
・閲覧幅1000px以下の場合にlessonクラスのwidthを50%に変更したいです。
発生している問題・エラーメッセージ
lessonクラスに対してscssに記述したメディアクエリが反映されません。
該当のソースコード
html
1※top.html.erbにて 2 <div class="lesson-wrapper"> 3 <div class="container"> 4 <h2>Learn Where to Get Started!</h2> 5 <div class="lessons"> 6 <div class="lesson"> 7 <div class="lesson-icon"> 8 <img src="https://prog-8.com/images/html/advanced/html.png"> 9 <p>HTML & CSS</p> 10 </div> 11 <p class="lesson-txt">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 12 </div> 13 <div class="lesson"> 14 <div class="lesson-icon"> 15 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 16 <p>jQuery</p> 17 </div> 18 <p class="lesson-txt">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 19 </div> 20 <div class="lesson"> 21 <div class="lesson-icon"> 22 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 23 <p>Ruby</p> 24 </div> 25 <p class="lesson-txt">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 26 </div> 27 <div class="lesson"> 28 <div class="lesson-icon"> 29 <img src="https://prog-8.com/images/html/advanced/php.png"> 30 <p>PHP</p> 31 </div> 32 <p class="lesson-txt">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 33 </div> 34 </div> 35 </div> 36 </div>
scss
1 2.container { 3 width: 100%; 4 padding: 0 15px; 5 margin: 0 auto; 6} 7 8.lesson-wrapper { 9 display: block; 10 height: 580px; 11 text-align: center; 12 background-color: #f7f7f7; 13 h2 { 14 display: inline-block; 15 padding: 80px 0 50px 0; 16 font-weight: normal; 17 color: #5f5d60; 18 } 19 .lessons { 20 .lesson { 21 float: left; 22 width: 25%; 23※lessonクラスに対してのSCSSはここまでなので途中省略 24 25※レスポンシブ対応の為、新しく追加したメディアクエリ 26@media only screen and (max-width:1000px) { 27 .lesson { 28 width: 50%; 29 margin-bottom: 50px; 30 } 31} 32
html
1※application.html.erbにて 2<head> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>SampleApp</title> 5 省略 6</head>
試したこと
・viewportの記述を<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">を試してみました。
・メディアクエリの記述を@media (max-width:1000px)を試してみました。
・viewportの記述位置をtitleタグの上に変更しました。
補足情報(FW/ツールのバージョンなど)
railsのバージョンは5.0.7.2です。
・scssの書き方に問題があるのか、headタグの中のviewport記述に間違いがあるのかコードを見直してみたり、railsのレスポンシブ対応について調べてみたのですが、レスポンシブ対応ができず、つまずいています。
質問長くなってしまいましたが、どうかご教示ください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/04 10:03