Q&A
これだけではなんとも言えないのでhtmlを追記してください
下記のコードをご覧ください。
@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で要素が変わります。
修正完了しました。
よろしくお願いします。
ありがとうございます。
私の環境ではちょうど1100pxで切り替わりました。
iframeなどでhtmlが入れ子になっているとブラウザサイズとメディアクエリがずれたりするんですが、そういうわけでもなさそうです。
どこの表示を見て1210pxで切り替わると確認しましたか？
追記しました。
よろしくお願いします。
写真ありがとうございます。
重複の確認になるのですが、（デベロッパを開いた状態で）ブラウザサイズをドラッグで変えた場合に右上にサイズがでると思うんですが、1枚目の状況で見ているのはその数値で良いですか？
こんな感じのやつです→https://imgur.com/a/JVcbwEU
そうだとするとちょっとわからないですね...
実はCSSで1210pxのメディアクエリを当ててたりしませんか？（無いと思いますが）
はい、その通りでございます。
上記のURLに記載があるpxでは1210pxで切り替わります。
いえ、cssで1210pxは当てていません。
可能であればGooglechromeｍのデベロッパーツール以外でサイズ変更や検証ツールなどはありますか?
k4aさん側では1100pxで切り替わるのであればおかしな点は無いはず。
お手間ですがよろしくお願いします。
他のブラウザを使ってみるくらいしか思いつかないです。
私の知識ではこれ以上原因がわかりませんが、もし余力があればjsfiddle（https://jsfiddle.net/）などを使って事象が再現できる状況を共有してもらえませんか？（画像はhttps://picsum.photos/などを使ったダミーに置き換えるか、消してしまっても良いです）
※通常jsfiddleの表示はiframeで埋め込まれてるので、メディアクエリはiframeのサイズで切り替わります。
※https://jsfiddle.net/*****/showの様に最後に"/show"をつけると、全画面表示（普通の表示）になります。
もしjsfiddleを使ってもhiiro46さんの環境では1210pxで切り替わり、私の環境では1100pxで切り替わるならブラウザやPCがおかしいのかもしれません。jsfiddle上で再現できないなら他のコードに原因があると推測できます。
k4aさん!!!!!
https://jsfiddle.net/*****/showをつけて実行しました!
見事に任意のpxで切り替えができました!!!
下記URLからです。
https://jsfiddle.net/kmzcr602/4/show
それは指定のpxで切り替わったから良かったという風に解釈して良いのでしょうか？
それとも同じコードなのに起きる事象が違うので困ったと捉えた方が良いでしょうか？
結果的には任意のpxに切り替わっているので目的は達成できました。
しかし、なぜjsfiddle側では任意のpxで替わるのか謎が残ります。
理由が知れたら一番最適です。
やはりブラウザ関係などでしょうか?
うーん。わからないですが、多分jsfiddleに載せたコードをそのままもう一度まっさらなhtmlファイルに移植してChromeで動かしても正しく動くような気がします。
意味のわからない（影響してないと思っている）部分によって予想外の動作が起きることは結構あります。
もう一度同じ様に作ってみると何故か動くんですが、実は把握していない部分があってそれが無いことで動くとか...
それか、scssからコンパイルしているのでそこで何か予想外のコードが挿入されていたりするのかもしれません（無いような気がしますが）
分かりました。
改めてコードを確認してから色々と動かしてみます。
長い質問に答えてくださりありがとうございました。
あなたの回答
tips
プレビュー
