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

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

解決済

2回答

1035閲覧

メディアクエリは適用されるが、CSSが適応されない。

TMTN

総合スコア52

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/02/02 04:48

前提・実現したいこと

初歩的な質問で申し訳ございません。
ただいまWEB制作に取り組んでおり勉強中でなのですが、メディアクエリを適用されなくて困っております。

昨日はレスポンシブを別ファイルで作成し、きちんとCSSも適用されていましたが、
本日scssを試してみたいと思い変更をしたところCSSが適用されなくなってしまいました。

Chromeの検証にて、画面を変更した時に各それぞれのブレイクポイントで機能はしているのですが、CSSが適用されません・・・。

html {
scroll-behavior: smooth;
font-size: 16px;
}

しかし上記のようにfont-sizeを全体に指定して、それぞれのブレイクポイントではfont-sizeを小さくしてますが、そちらは適用されています。
その他がChrome検証にてCSSが斜線で適用されません。

色々と調べて試してみましたが改善されません。

どなたかご教示いただけませんでしょうか。

該当のソースコード

HTML

1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <link rel="stylesheet" href="css/portfolio.css" /> 8 <title>TMTN</title> 9 </head> 10 <header> 11 <div class="nav-inner flex"> 12 <div class="nav-title flex font-title"> 13 <div class="nav-main-title">TMTN</div> 14 <div class="nav-sub-title"></div> 15 </div> 16 <div class="nav-header-menu"> 17 <nav class="nav-sns-menu"> 18 <ul class="nav-sns-list"> 19 <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-twitter"></a></i></li> 20 <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-instagram"></i></a></li> 21 <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-facebook-square"></i></a></li> 22 </ul> 23 </nav> 24 <nav class="nav-menu"> 25 <ul class="nav-list"> 26 <li class="nav-item"><a href="#about">ABOUT</a></li> 27 <li class="nav-item"><a href="#selfpr">SELF PR</a></li> 28 <li class="nav-item"><a href="#vision">VISION</a></li> 29 <li class="nav-item"><a href="#works">WORKS</a></li> 30 <li class="nav-item"><a href="#contact">CONTACT</a></li> 31 </ul> 32 </nav> 33 </div> 34 </div> 35 <div class="burger-btn"> 36 <span class="bar bar_top"></span> 37 <span class="bar bar_mid"></span> 38 <span class="bar bar_bottom"></span> 39 </div> 40 </header> 41 <body> 42 <div id="content" class="top"> 43 <a href="#" id="top-button"><i class="fas fa-chevron-up"></i></a> 44 </div> 45 <div class="main-header-inner flex"> 46 <div class="main-header-items"> 47 <div class="main-header-item-box-a"></div> 48 <div class="main-header-item-font font-title">TMTN</div> 49 <div class="main-header-item-img"></div> 50 <div class="main-header-item-box-b"></div> 51 <div class="main-header-item-skill"> 52 <ul> 53 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 54 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 55 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 56 </ul> 57 </div> 58 </div> 59 </div> 60 <h2 class="about-title fade-in-bottom flex font-title animate" id="about">ABOUT</h2> 61 <div class="about-inner flex"> 62 <div class="about-inner-items flex"> 63 <div class="about-img"></div> 64 <div class="about-intro"> 65 <ul> 66 <li>INTRO</li> 67 <li>ABOUT</li> 68 <li>ME</li> 69 </ul> 70 <div class="about-name"> 71 <ul> 72 <li>Hellow!</li> 73 <li>I'm TMTN</li> 74 </ul> 75 </div> 76 <div class="about-carrier"> 77 <ul> 78 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 79 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 80 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 81 <li>Lorem ipsum dolor sit amet, consectetur adip</li> 82 </ul> 83 </div> 84 </div> 85 <div class="about-circle animate-about"></div> 86 </div> 87 </div> 88 </body> 89</html>

CSS

1/* <====== 全体共通 ======> */ 2 3* { 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7} 8 9html { 10 scroll-behavior: smooth; 11 font-size: 16px; 12} 13 14p { 15 line-height: 2rem; 16 font-size: 0.875rem; 17} 18 19ul li { 20 list-style: none; 21 padding: 0.5rem; 22} 23 24a { 25 text-decoration: none; 26 color: #fff; 27} 28 29h2 { 30 font-size: 2rem; 31} 32 33.flex { 34 display: flex; 35 justify-content: center; 36 align-items: center; 37} 38 39.font-title { 40 font-family: "Caveat", cursive; 41} 42 43/* <====== 変数 ======> */ 44 45$main-bg-color: rgba(102, 89, 89, 0.281); 46$main-color-w: rgb(255, 255, 255); 47$main-color-b: rgb(0, 0, 0); 48 49/* <====== nav-header ======> */ 50 51.nav-inner { 52 width: 100%; 53 height: 4rem; 54 background-color: rgba(255, 255, 255, 0.719); 55 justify-content: space-around; 56 padding: 3rem; 57 position: fixed; 58 top: 0; 59 z-index: 1; 60 61 .nav-title { 62 width: 20rem; 63 flex-direction: column; 64 65 .nav-main-title { 66 font-size: 2rem; 67 } 68 .nav-sub-title { 69 font-size: 1rem; 70 margin-left: 1rem; 71 } 72 } 73 74 .nav-header-menu { 75 width: 30rem; 76 flex-direction: column; 77 78 .nav-sns-menu ul { 79 width: 38%; 80 display: flex; 81 justify-content: space-between; 82 padding-left: 1rem; 83 } 84 } 85} 86 87.nav-item a { 88 color: $main-color-b; 89 font-weight: bold; 90} 91 92/* <====== main-header ======> */ 93 94.main-header-inner { 95 width: 100%; 96 height: 40rem; 97 margin-top: 4rem; 98 99 .main-header-items { 100 width: 80%; 101 height: 32rem; 102 position: relative; 103 104 .main-header-item-box-a { 105 width: 80%; 106 height: 19rem; 107 background-color: $main-color-b; 108 position: absolute; 109 bottom: 4rem; 110 } 111 112 .main-header-item-box-b { 113 width: 30%; 114 height: 10rem; 115 background-color: rgba(228, 222, 222, 0.753); 116 position: absolute; 117 bottom: 1rem; 118 right: 2rem; 119 z-index: -1; 120 } 121 122 .main-header-item-font { 123 color: $main-color-w; 124 position: absolute; 125 bottom: -7rem; 126 left: -6rem; 127 font-size: 21rem; 128 } 129 130 .main-header-item-img { 131 width: 51%; 132 height: 21rem; 133 background-image: url(../img/MainImg.jpg); 134 background-size: cover; 135 box-shadow: 0.5rem -0.5rem 1rem; 136 position: absolute; 137 right: 0; 138 } 139 140 .main-header-item-skill { 141 width: 25rem; 142 height: 5rem; 143 position: absolute; 144 color: $main-color-w; 145 top: 10rem; 146 left: 1rem; 147 line-height: 2rem; 148 font-size: 0.875rem; 149 150 ul li { 151 padding: 0; 152 } 153 } 154 } 155} 156 157/* <====== about ======> */ 158 159h2#about { 160 padding-top: 11rem; 161 margin-top: -5rem; 162} 163 164.about-inner { 165 width: 100%; 166 height: 30rem; 167 168 .about-inner-items { 169 width: 90%; 170 height: 30rem; 171 justify-content: space-around; 172 position: relative; 173 174 .about-img { 175 width: 350px; 176 height: 350px; 177 background-image: url(../img/AboutImg.jpg); 178 background-size: cover; 179 border-radius: 50%; 180 border: 3px solid $main-bg-color; 181 } 182 183 .about-intro ul li { 184 padding: 0; 185 } 186 .about-name { 187 padding: 1rem 0; 188 189 ul li { 190 font-size: 2rem; 191 font-weight: bold; 192 } 193 } 194 195 .about-carrier ul li { 196 line-height: 2rem; 197 font-size: 0.875rem; 198 } 199 200 .about-circle { 201 width: 15rem; 202 height: 15rem; 203 border-radius: 50%; 204 background-color: $main-bg-color; 205 position: absolute; 206 right: 0; 207 bottom: 0; 208 } 209 } 210} 211 212/* <====== Media Queries======> */ 213 214$breakpoint-pc: 1440px; 215$breakpoint-tablet: 1024px; 216$breakpoint-mobile: 600px; 217 218@mixin pc { 219 @media (max-width: ($breakpoint-pc)) { 220 @content; 221 } 222} 223@mixin tab { 224 @media (max-width: ($breakpoint-tablet)) { 225 @content; 226 } 227} 228@mixin sp { 229 @media (max-width: ($breakpoint-mobile)) { 230 @content; 231 } 232} 233 234/* <====== 全体共通 ======> */ 235 236html { 237 @include tab { 238 font-size: 13px; 239 } 240 @include sp { 241 font-size: 8px; 242 } 243} 244 245.nav-list { 246 @include pc { 247 display: flex; 248 } 249 @include tab { 250 display: flex; 251 } 252} 253 254/* <====== about ======> */ 255 256.about-title { 257 @include sp { 258 margin-bottom: 2rem; 259 } 260} 261 262.about-img { 263 @include pc { 264 width: 350px; 265 height: 350px; 266 } 267 @include tab { 268 width: 300px; 269 height: 300px; 270 } 271 @include sp { 272 width: 200px; 273 height: 200px; 274 } 275} 276 277.about-intro { 278 @include tab { 279 width: 45%; 280 } 281 @include sp { 282 width: 45%; 283 } 284} 285 286/* <====== main-header ======> */ 287 288.main-header-item-font { 289 @include sp { 290 left: -4rem; 291 font-size: 17rem; 292 } 293} 294

試したこと

「ビューポートの確認」と「メディアクエリの画面幅の確認」

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

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

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

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

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

Lhankor_Mhy

2021/02/02 04:57

mixinもご提示ください。
Lhankor_Mhy

2021/02/02 04:58

すみません、見落としていました。失礼しました。
Lhankor_Mhy

2021/02/02 05:03 編集

ご提示のコードを試してみましたが、scroll-behavior: smooth; は打ち消されませんでした。 つまり、問題が再現しませんでした。 ご提示いただいていない部分に原因があると思われます。
Lhankor_Mhy

2021/02/02 05:07

あ、いや、違うのかな? html { scroll-behavior: smooth; font-size: 16px; } は関係なくて、その他の要素のルールのプロパティが効いていない、とかそういうことですか?
Lhankor_Mhy

2021/02/02 05:09

そういうことみたいですね。 問題を把握しました。
TMTN

2021/02/02 05:11

おっしゃる通りです。 そのほかの要素のプロパティが効かないてす・・ 例えば、aboutと作っている要素の中に、画像と説明を記述しているのですが、 その画像をスマホとタブレットでそれぞれ大きさを変えたいのですが、変わらな状況です。
TMTN

2021/02/02 05:24

試してみましたが、やはり適用されないようです。 ChromeでCSSのところに横線が入ってメディアクエリが適用されてないようなんですよね。。
Lhankor_Mhy

2021/02/02 05:33 編集

自明かと思いましたので書きませんでしたが、回答のコードは一部の一例であって、全部のコードをそのように書き直さなくてはならない、という意味なのですが、伝わっていますでしょうか。
TMTN

2021/02/02 05:37

そういうことですね。大変申し訳ございません。 すべて書き直して試してみます。
Lhankor_Mhy

2021/02/02 05:39

いえ、それは私が間違っていた場合に無駄足なので、一部を変更して、その部分が想定通りになっているかどうかを確認した方がいいのではありませんか?
TMTN

2021/02/02 05:40

一部変更して既に試してみましたが、それで変更がされませんでした。。
Lhankor_Mhy

2021/02/02 05:45

https://jsfiddle.net/Lhankor_Mhy/wu4fngma/ サンプルを作成しました。 当方の環境ですと、.main-header-item-font の left は -4rem になっている(メディアクエリが効いている)のですが、TMTNさんの環境ではいかがですか?
TMTN

2021/02/02 08:30

すいません。用事で返事遅くなりました。 メディアクエリは当方の環境でも効いておりました。 崩れてしまった箇所を更に調整をしたいのですが、そちらが反映されないんですよね・・
Lhankor_Mhy

2021/02/02 08:48 編集

「崩れてしまった箇所」というのがどこなのかわかりませんので、なんとも申し上げられませんが…… もし、さらに回答を求めているのであれば、問題をもう少し詳しく説明した方がいいかもしれません。 もう回答を求めていないのであれば、自己解決の処理をお願いします。
TMTN

2021/02/02 08:52

申し訳ございません。 上記でも申し上げたように「about」と作っている要素の中に、 Lhankor様のサンプルにもありますように画像と説明を境に記述しているのですが、 その画像は「px」表記で記述している為か固定されており、 画面幅を変えてもサイズが変化しません・・・
Lhankor_Mhy

2021/02/02 08:54

そこはサンプルでは触っていないので、もちろんそのままになっていますが…… どういうところがわからないのでしょうか? 回答と同様の方法ではダメでしたか?
Lhankor_Mhy

2021/02/02 09:01

繰り返しになりますが、回答は一部(.main-header-item-font)だけしか修正していませんから、他の部分はそのままになっています。 ですので、サンプルでもそのままになっています。なので、他の部分のスタイルが反映されないのは当方の意図通りです。 つまり、「他の部分は自分で同様にやってくださいね」ということなんですが、伝わっていますか?
guest

回答2

0

自己解決

SCSSで記述し、CSS上入れ子で記述されていましたが、メディアクエリ上は入れ子で指定せずに
クラス要素に対して変更点を記述していた為、適用されませんでした。

以下のように記述すれば解決しました。

Q.about-imgの画像を画面幅を変えた時にCSSを適用させたい。

✖誤った例

.about-img {
@include pc {
width: 350px;
height: 350px;
}
@include tab {
width: 300px;
height: 300px;
}
@include sp {
width: 200px;
height: 200px;
}
}

〇正しい例

.about-inner.about-inner-items.about-img {
@include pc {
width: 350px;
height: 350px;
}
@include tab {
width: 300px;
height: 300px;
}
@include sp {
width: 200px;
height: 200px;
}
}

投稿2021/02/04 10:47

TMTN

総合スコア52

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

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

0

詳細度の問題です。
以下のようにしてみてください。

css

1 .main-header-item-font { 2 color: $main-color-w; 3 position: absolute; 4 bottom: -7rem; 5 left: -6rem; 6 font-size: 21rem; 7 @include sp { 8 left: -4rem; 9 font-size: 17rem; 10 } 11 }

参考:
100年後も崩れないCSS勉強会 · 第1回「詳細度」

投稿2021/02/02 05:12

Lhankor_Mhy

総合スコア35871

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問