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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

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

CSS

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

Q&A

0回答

742閲覧

【Sass】@mixinを使用してmax-widthで任意のpxで切り替えたい

hiiro46

総合スコア21

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

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

CSS

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

0グッド

1クリップ

投稿2021/07/14 13:47

編集2022/01/12 10:55

下記のコードをご覧ください。

@mixin modal_size_1100($max-width:1100px){ @media screen and (max-width:$max-width) { @content; } } @include modal_size_1100{ .modal_range { & > .modal_portfolio_site{ grid-template-columns: 1fr 465px 1fr; grid-template-rows: 525px 1fr; column-gap: 0; row-gap: 20px; padding: 25px 50px 0; & > div:nth-of-type(1){ grid-column-start: 2; grid-row-start: 2; } & > div:nth-of-type(2){ grid-column-start: 2; text-align: center; } } } }

max-widthを1100pxで設定しています。
コンパイル後のコードは下記。

//CSSコンパイル @media screen and (max-width:1100px) { .modal_range > .modal_portfolio_site { grid-template-columns: 1fr 465px 1fr; grid-template-rows: 525px 1fr; column-gap: 0; row-gap: 20px; padding: 25px 50px 0; } .modal_range > .modal_portfolio_site > div:nth-of-type(1) { grid-column-start: 2; grid-row-start: 2; } .modal_range > .modal_portfolio_site > div:nth-of-type(2) { grid-column-start: 2; text-align: center; } }

しかし実際に動かすと1210pxで切り替わります。
gridの影響なのか、width関係なのか、判断ができません。

知りたいこと

任意に設定したmax-widthが違う値で切り替わることがあるのか。
あるのであれば、なぜ違う値で変わるのか知りたい。

解決したいこと

・任意のpxで切り替えたい

k4aさん質問ありがとうございます!
こちらがコードになります。

//HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>portfolio</title> <link rel="stylesheet" href="../css/sample.css"> </head> <body> <header class="profile_header"> <nav id = "header_bar"> <h1><a href="../profile.html">夢Design</a></h1> <ul id="menu_list"> <li class="menu_active menu_about">About</li> <li class="menu_active menu_profile">Profile</li> <li class="menu_active menu_skill">Skill</li> <li class="menu_active"><a href="sample.html">Portfolio</a></li> </ul> </nav> </header> <main> <div class="Portfolio_range"> <section> <h2>Portfolio</h2> <p>クライアント様(ユーザー様)の夢を実現するためには 想像で描いているデザインイメージを実現する力が必要です。 イメージとかけ離れたデザインを制作しても夢は叶わない。 クライアント様(ユーザー様)の夢を叶えるために 多種多様のデザインを制作しています。 </p> </section> </div> <div class="portfolio_group"> <div class="portfolio_site"> <h3>webサイト</h3> <ul> <li class="portfolio site"> <img src="../imge/start/portfolio_site1.png" alt="portfolio_webサイト1番目" data-img="portfolio_site1.png"> </li> <li class="portfolio site"> <img src="../imge/start/portfolio_site2.png" alt="portfolio_webサイト2番目" data-img="portfolio_site2.png"> </li> </ul> </div> <div class="portfolio_imge"> <h3>ヘッダー/サムネイル</h3> <ul> <li class="portfolio headerimg"> <img src="../imge/start/portfolio_img1.png" alt = "portfolio_header_img1枚目" data-img = "portfolio_img1.png"> </li> <li class="portfolio headerimg"> <img src="../imge/start/portfolio_img2.png" alt = "portfolio_header_img2枚目" data-img = "portfolio_img2.png"> </li> <li class="portfolio headerimg"> <img src="../imge/start/portfolio_img3.png" alt = "portfolio_header_img3枚目" data-img = "portfolio_img3.png"> </li> <li class="portfolio thumbnail"> <img src="../imge/start/portfolio_img4.png" alt = "portfolio_header_img4枚目" data-img = "portfolio_img4.png"> </li> <li class="portfolio thumbnail"> <img src="../imge/start/portfolio_img5.png" alt = "portfolio_header_img5枚目" data-img = "portfolio_img5.png"> </li> </ul> </div> </div> </main> <footer> <div class="footer_menu"> <ul> <li class="menu_active menu_about">About</li> <li class="menu_active menu_profile">Profile</li> <li class="menu_active menu_skill">Skill</li> <li class="menu_active"><a href="sample.html">Portfolio</a></li> </ul> </div> </footer> <script src="../js/sample.js"></script> </body> </html>

少し複雑ではありますが、JavascriptのcreateElement等でmodal_rangeを作成しています。
そのためHTMLには記載がありません。
関係する要素のJavascriptコードは下記になります。

//Javascript //モーダルウインドウ const body = document.querySelector("body"); const portfolio_list = document.querySelectorAll(".portfolio"); const portfolio_img = document.querySelectorAll(".portfolio img"); const text_list = { portfolio_website_01: "年齢層が20代後半~30代前半の出産を終えた主婦。\n淡い雰囲気と合わせるために主張を抑えて全体を小さくまとめた。", portfolio_website_02: "20代半ば~30代前半、目が疲れやすい人。\n不要なアニメーションを極力無くして要素を真ん中詰めに配置。\n見る人の目も考えてダークモードを実装。モノトーンベースにして目に優しいデザインを意識した。", portfolio_webimg_01: "フリーで活躍する主夫webデザイナーを想定したヘッダー。\nピンクの背景で可愛らしさと落ち着きのある雰囲気にした。家族との時間を作りたいと悩みを抱えるユーザーを狙ったデザイン。", portfolio_webimg_02: "背景色を淡くした言葉の主張が強いヘッダー。\n最も伝えたい言葉の背景色を白にして主張をさらに強めた。全体の角を取った丸いデザインにすることで優しさも加えた。主張と優しさのバランスを大事にしたヘッダー。", portfolio_webimg_03: "運営者のイメージカラーを背景色に採用して、ユーザーの変化や利益を提示したヘッダー。\n緑と白を組み合わせて未来に起こりうる出来事を訴えかけることが狙い。", portfolio_webimg_04: "年齢層を10代後半~20代前半のユーザー層に的を絞ったサムネイル。\n色調補正を掛けているため文字に立体感を持たせた。Vlog系特有の雰囲気も必要と思い英語部分はオシャレ感を演出。", portfolio_webimg_05: "試験を控えた学生ユーザー層に向けたサムネイル。\n「方法論について知れる動画」と認識させるために言葉の大きさを強めた。\n色相を赤系統、黄系統、青系統でまとめてユーザーの混乱を防ぐ。" } for (let i = 0; i < portfolio_list.length; i++) { portfolio_list[i].addEventListener("click",() => { body.style.overflow = "hidden"; //親要素作成_追加 let modalElement = document.createElement("div"); let modalwindow = document.createElement("div"); modalElement.setAttribute("class","modal_range"); if(portfolio_list[i].classList.contains("site")){ modalwindow.setAttribute("class","modal_portfolio_site"); }else if(portfolio_list[i].classList.contains("thumbnail")) { modalwindow.setAttribute("class","modal_portfolio_thumbnail") } else{ modalwindow.setAttribute("class","modal_portfolio_img"); } modalElement.appendChild(modalwindow); body.insertBefore(modalElement,body.firstChild); //子要素作成_追加 let modal_sentence = document.createElement("div"); let modal_text = document.createElement("p"); let text = Object.entries(text_list); modal_text.innerText = text[i][1]; let modal_img_group = document.createElement("div"); let modal_img = document.createElement("img"); modal_img_group.appendChild(modal_img); let modal_img_date = portfolio_img[i].getAttribute("data-img"); modal_img.src = `../imge/start/${modal_img_date}`; modal_sentence.appendChild(modal_text); modalwindow.appendChild(modal_sentence); modalwindow.appendChild(modal_img_group); }); }

k4aさんありがとうございます!
Googlechromeのデベロッパーツールからです。
下記のように確認しました。
イメージ説明
ブラウザの違いなどで誤差などはあるのでしょうか?

k4aさん、現在Googlechromeのデベロッパーツールにてレスポンシブの画面から直接1100pxを記入。
任意通りのpxで切り変わっていることを確認できました。
下記の画面からです。
イメージ説明

しかし、1枚目の写真の状況からは1210pxで要素が変わります。

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

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

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

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

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

k4a

2021/07/14 14:08

これだけではなんとも言えないのでhtmlを追記してください
hiiro46

2021/07/14 15:36

修正完了しました。 よろしくお願いします。
k4a

2021/07/14 16:24

ありがとうございます。 私の環境ではちょうど1100pxで切り替わりました。 iframeなどでhtmlが入れ子になっているとブラウザサイズとメディアクエリがずれたりするんですが、そういうわけでもなさそうです。 どこの表示を見て1210pxで切り替わると確認しましたか?
hiiro46

2021/07/15 10:19

追記しました。 よろしくお願いします。
k4a

2021/07/15 11:18

写真ありがとうございます。 重複の確認になるのですが、(デベロッパを開いた状態で)ブラウザサイズをドラッグで変えた場合に右上にサイズがでると思うんですが、1枚目の状況で見ているのはその数値で良いですか? こんな感じのやつです→https://imgur.com/a/JVcbwEU そうだとするとちょっとわからないですね... 実はCSSで1210pxのメディアクエリを当ててたりしませんか?(無いと思いますが)
hiiro46

2021/07/15 11:33

はい、その通りでございます。 上記のURLに記載があるpxでは1210pxで切り替わります。 いえ、cssで1210pxは当てていません。 可能であればGooglechromemのデベロッパーツール以外でサイズ変更や検証ツールなどはありますか? k4aさん側では1100pxで切り替わるのであればおかしな点は無いはず。 お手間ですがよろしくお願いします。
k4a

2021/07/15 11:55 編集

他のブラウザを使ってみるくらいしか思いつかないです。 私の知識ではこれ以上原因がわかりませんが、もし余力があればjsfiddle(https://jsfiddle.net/)などを使って事象が再現できる状況を共有してもらえませんか?(画像はhttps://picsum.photos/などを使ったダミーに置き換えるか、消してしまっても良いです) ※通常jsfiddleの表示はiframeで埋め込まれてるので、メディアクエリはiframeのサイズで切り替わります。 ※https://jsfiddle.net/*****/showの様に最後に"/show"をつけると、全画面表示(普通の表示)になります。 もしjsfiddleを使ってもhiiro46さんの環境では1210pxで切り替わり、私の環境では1100pxで切り替わるならブラウザやPCがおかしいのかもしれません。jsfiddle上で再現できないなら他のコードに原因があると推測できます。
k4a

2021/07/15 12:28

それは指定のpxで切り替わったから良かったという風に解釈して良いのでしょうか? それとも同じコードなのに起きる事象が違うので困ったと捉えた方が良いでしょうか?
hiiro46

2021/07/15 13:02

結果的には任意のpxに切り替わっているので目的は達成できました。 しかし、なぜjsfiddle側では任意のpxで替わるのか謎が残ります。 理由が知れたら一番最適です。 やはりブラウザ関係などでしょうか?
k4a

2021/07/15 13:13

うーん。わからないですが、多分jsfiddleに載せたコードをそのままもう一度まっさらなhtmlファイルに移植してChromeで動かしても正しく動くような気がします。 意味のわからない(影響してないと思っている)部分によって予想外の動作が起きることは結構あります。 もう一度同じ様に作ってみると何故か動くんですが、実は把握していない部分があってそれが無いことで動くとか... それか、scssからコンパイルしているのでそこで何か予想外のコードが挿入されていたりするのかもしれません(無いような気がしますが)
hiiro46

2021/07/16 11:46

分かりました。 改めてコードを確認してから色々と動かしてみます。 長い質問に答えてくださりありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問