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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

2回答

972閲覧

sassでmixinを使ってメディアクエリを設定してブレイクポイント600pxにしてもpcサイズのCSSも効いてしまう

mori_sa

総合スコア3

CSS3

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2021/05/01 14:07

前提・実現したいこと

レスポンシブのWEBサイトをsassとmixinを使って模写しているのですが
pcサイズのCSSのコーディングは済んだのでスマホサイズのメディアクエリを設定してコーディングしているのですがブレイクポイント600pxにした時にデペロッパーツールを見るとPC用に設定してCSSスマホサイズ用もどっちも効いてしまいます
スマホサイズのときはスマホサイズ用のCSSを適用させたいのですがどうしたらいいですか

```SCSS コード  $width-sp: 600px; @mixin sp{ @media screen and (max-width: $width-sp) { @content; } } .wrapper { max-width: 960px; padding: 0 4%; margin: 0 auto ; } .title { font-size: 24px; margin-top: 130px; margin-bottom: 65px; text-align: center; } .inner { margin: 0 auto; } #wrapper-all { margin: 0 auto; #header_title { max-width: 1290px; padding: 120px 0px; #header_inner { text-align: center; max-width: 960px; display:flex; justify-content: space-around; align-items: center; margin: 0 auto; h1 { a { width: 120px; height: 27px; } } nav { margin-left:193px; ul { display: flex; li { font-family:"メイリオ"; font-size: 14.4; font-style: normal; list-style:none; margin-left: 30px; img { width: 20px; height: 20px; } } } } } } #mainvisual { width: 100%; img { height: 420px; } } #about { #about_inner { p { font-size: 14.4px; } #contact_infomation { font-size: 14.4px; margin-top: 30px; margin-bottom: 30px; } #profile_text { font-size: 14.4px; width: 840px; height: 63px; } } } #work { #image_box { display:flex; flex-wrap: wrap; img { width: 29%; margin-right: 29px; margin-bottom: 24px; } } } #news { #infomation { .infomation_box { display: inline-block; border-top: solid #C8C8C8 1px; border-bottom: solid #C8C8C8 1px; display :flex; font-size: 14.4px; padding: 15.1px 0px; a { color:#24292E; margin-left: 84px; text-decoration: none; } } } } #contact { display: flex; flex-direction: column; @include sp { max-width: 600px; } .form_container { display: flex; justify-content: space-between; @include sp { max-width: 365px; } } .label_form { font-size: 14.4px; } #name { margin-left: 80px; margin-bottom: 10px; width: 710px; } #mail { margin-left: 78px; margin-bottom: 10px; width: 710px; } #message_text { width: 710px; } #button_container { margin-top: 30px; text-align: center; } button { background-color: #24292E; color: #FFFFFF; height: 53px; width: 200px; } button:hover { color: #24292E; background-color: #ffffff; } } } @include sp { .wrapper { max-width: 375px; } #wrapper-all { max-width: 375px; #header_title { max-width: 375px; #header_inner { display: flex; flex-direction: column; h1 { a { text-align: center; img { object-fit: cover; width: 143px; height: 36px; } } } nav { margin: 0 auto; ul { li { font-size: 12.8px; font-family: "メイリオ"; margin-right: 20px; } } } } } #main { #mainvisual { img { object-fit:fill; width: 375px; height: 420px; }} #about { #about_inner { #contact_infomation #profile_text { width: 375px; } } } #contact { max-width: 600px; .form_container { max-width: 365px; } } } } }
@charset "UTF-8"; .wrapper { max-width: 960px; padding: 0 4%; margin: 0 auto; } .title { font-size: 24px; margin-top: 130px; margin-bottom: 65px; text-align: center; } .inner { margin: 0 auto; } #wrapper-all { margin: 0 auto; } #wrapper-all #header_title { max-width: 1290px; padding: 120px 0px; } #wrapper-all #header_title #header_inner { text-align: center; max-width: 960px; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; } #wrapper-all #header_title #header_inner h1 a { width: 120px; height: 27px; } #wrapper-all #header_title #header_inner nav { margin-left: 193px; } #wrapper-all #header_title #header_inner nav ul { display: flex; } #wrapper-all #header_title #header_inner nav ul li { font-family: "メイリオ"; font-size: 14.4; font-style: normal; list-style: none; margin-left: 30px; } #wrapper-all #header_title #header_inner nav ul li img { width: 20px; height: 20px; } #wrapper-all #mainvisual { width: 100%; } #wrapper-all #mainvisual img { height: 420px; } #wrapper-all #about #about_inner p { font-size: 14.4px; } #wrapper-all #about #about_inner #contact_infomation { font-size: 14.4px; margin-top: 30px; margin-bottom: 30px; } #wrapper-all #about #about_inner #profile_text { font-size: 14.4px; width: 840px; height: 63px; } #wrapper-all #work #image_box { display: flex; flex-wrap: wrap; } #wrapper-all #work #image_box img { width: 29%; margin-right: 29px; margin-bottom: 24px; } #wrapper-all #news #infomation .infomation_box { display: inline-block; border-top: solid #C8C8C8 1px; border-bottom: solid #C8C8C8 1px; display: flex; font-size: 14.4px; padding: 15.1px 0px; } #wrapper-all #news #infomation .infomation_box a { color: #24292E; margin-left: 84px; text-decoration: none; } #wrapper-all #contact { display: flex; flex-direction: column; } @media screen and (max-width: 600px) { #wrapper-all #contact { max-width: 600px; } } #wrapper-all #contact .form_container { display: flex; justify-content: space-between; } @media screen and (max-width: 600px) { #wrapper-all #contact .form_container { max-width: 365px; } } #wrapper-all #contact .label_form { font-size: 14.4px; } #wrapper-all #contact #name { margin-left: 80px; margin-bottom: 10px; width: 710px; } #wrapper-all #contact #mail { margin-left: 78px; margin-bottom: 10px; width: 710px; } #wrapper-all #contact #message_text { width: 710px; } #wrapper-all #contact #button_container { margin-top: 30px; text-align: center; } #wrapper-all #contact button { background-color: #24292E; color: #FFFFFF; height: 53px; width: 200px; } #wrapper-all #contact button:hover { color: #24292E; background-color: #ffffff; } @media screen and (max-width: 600px) { .wrapper { max-width: 375px; } #wrapper-all { max-width: 375px; } #wrapper-all #header_title { max-width: 375px; } #wrapper-all #header_title #header_inner { display: flex; flex-direction: column; } #wrapper-all #header_title #header_inner h1 a { text-align: center; } #wrapper-all #header_title #header_inner h1 a img { object-fit: cover; width: 143px; height: 36px; } #wrapper-all #header_title #header_inner nav { margin: 0 auto; } #wrapper-all #header_title #header_inner nav ul li { font-size: 12.8px; font-family: "メイリオ"; margin-right: 20px; } #wrapper-all #main #mainvisual img { object-fit: fill; width: 375px; height: 420px; } #wrapper-all #main #about #about_inner #contact_infomation #profile_text { width: 375px; } #wrapper-all #main #contact { max-width: 600px; } #wrapper-all #main #contact .form_container { max-width: 365px; } }

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

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

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

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

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

guest

回答2

0

ベストアンサー

「ウィンドウ幅が600px以下の時はスマホ用のCSSのみを適用させたい」ということであっていますでしょうか?

普通に書いたCSSは600px以下だろうが以上だろうがいつでも適用されてしまうので、PC用に作ったCSSをmin-width: 601pxのメディアクエリに入れるしかないですね。

ただ普通はSPとPCでCSSを完全に分けずに、まずPCのCSSを作成してから、その後必要な箇所だけ上書きすることでSP用のCSSを作るのが一般的です(もっと言えばSPから作る方が主流になってきています)。
つまりPC用のスタイルのなかでSPでも使える部分は流用して使うのが普通です。

投稿2021/05/01 14:29

編集2021/05/01 14:31
Masa-Shin

総合スコア269

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

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

mori_sa

2021/05/01 16:44

答えのヒントとなる回答してくださりありがとうございました。
guest

0

元の模写のソースコードを見たらデペロッパーツールで見たときpcのcssが表示されてなくて普通スマホのサイズにしたら表示されないものだと思っていました。
デペロッパーツールで斜線で引かれるように上書きされるのが普通のようなので

投稿2021/05/01 16:44

編集2021/05/01 17:00
mori_sa

総合スコア3

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問