Q&A
どのような理由で「メディアクエリを使わない」という制約が必要となったのでしょうか？
メディアクエリを使わずにレスポンシブデザインをしたいと考えております。
お世話になります。よろしくお願い申し上げます。
まず手始めに、親要素にdisplay:gridを指定し、
子要素赤いdiv（class:left、bg-color:red）と
青いdiv（class:right、bg-color:blue）を
用意しました。現時点では
左右両方ともwidth:500pxで左右に並べてあります。
実現したいこと
この時ブラウザのウィンドウを狭めていき、
375pxになった時点で
leftを上段、rightを下段になるようにしたいのです。
これを実現するための、
grid-template-columns、width、min()、max()、minmax()、calc()等の
設定の仕方が分かりません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="test1.css"> 8 <title>Document</title> 9</head> 10<body> 11 <div class="container"> 12 <div class="left">left</div> 13 <div class="right">right</div> 14 </div> 15</body> 16</html>
CSS
1.container { 2 display:grid; 3 grid-template-columns: 500px 500px; 4} 5.left { 6 background-color:#f00; 7 color:#fff; 8 border:#000 solid 1px; 9} 10.right { 11 background-color:#00f; 12 color:#fff; 13 border:#000 1px solid; 14} 15### 試したこと 16様々な「メディアクエリを使わずにレスポンシブデザイン」を 17実現しているサイトを参考にしてみたのですが、 18どれもうまくいきませんでした。 19 20### 補足情報（FW/ツールのバージョンなど） 21ブラウザはGoogle Chrome 22バージョン: 108.0.5359.94（Official Build） （64 ビット） 23 24どうかご教授ください。何卒よろしくお願い申し上げます。
列幅は500pxの固定ですか。
画面幅が1000pxより小さくなるとはみ出しますが、それは想定通りですか。
「375pxになった時点」というのは画面幅が375px以下になった時という意味ですか。
1.https://flex-font.com/faq/2019-09-responsive/をお読みください。
2.画面幅が1000pxより小さくなた場合は折り返します。
3.「375pxになった時点」というのは画面幅が375px以下になった時という意味です。
「画面幅が1000pxより小さくなた場合は折り返す」ということは、leftの下にrightがくるようにするということですか。これは「375pxになった時点でleftを上段、rightを下段になる」と、何が違いますか。
そもそも画面幅375px以下の端末は現在ほぼないと思いますが、その場合も想定する必要はありますか。
KDTD様
紹介してくださっている記事を読みました。
勉強になります。
一点念のためお伝えしたいことがあります。
（記事より抜粋）
> HTMLソースを確認してみると、PCとスマホとでは大きく違った別の内容を表示していて、メディアクエリ（@media）の画面サイズのみで表示を切り替えてはいませんでした。
> 最初にユーザーエージェント（デバイスの種類）で大きく分けてPC用またはスマホ用の表示をします。その後、細かな表示の調整をメディアクエリ（@media）の画面サイズでしていました。
> 無駄なデータを読み込まないようにしていることが分かります。
実際のサイトのソースは未確認ですが、おそらく、
①JavaScriptなどでユーザーエージェントを判断、該当するCSSを読み込み
②その上で、@mediaも使用して微調整
していると思います。
つまり、CSSのみで実現はしておりませんし、また、メディアクエリを使わないということでもありません。
ですのでご質問の内容は、参考記事と違うアプローチをしようとしている可能性があります。
回答3件
0
375pxから500pxの間のあふれた状態を判断するにはメディアクエリがベターでしょう
そうでないならjsで判断ください
投稿2022/12/05 02:19
総合スコア117680
0
こちらを確認しましたが、これは振り分けをサーバで行う前提となっています。単なるHTML+CSSで実現できる話ではありません。
投稿2022/12/06 14:03
総合スコア146550
そして、「grid-template-columns、width、min()、max()、minmax()、calc()等」で調整しているのであれば、それは「ブラウザに対してモバイルでもPCでも同じデータを送っている」のであって、この記事いわくの「メディアクエリによるデメリット」を何も回避できていないことになります。
わざわざメディアクエリを回避してコード量を増やすのでは本末転倒で、モバイルでの表示速度改善の効果は見込めません。
「特に環境由来の制限はないけれど、そういう形で書いてみたかった」のが理由なら、それで構わなかったです。
理由付けを後出しで変更されると、非常に混乱します。
0
詳細がよく分からないので、修正コメントにあった下記の点についてだけの回答です。
- 画面幅が1000pxより小さくなた場合は折り返します。
auto-fill を使えばいいでしょう。lef、right の要素の幅は500px固定としてます。
css
1.container { 2 display:grid; 3 grid-template-columns: repeat(auto-fill, minmax(500px, 500px)); 4}
参考リンク
ASCII.jp：これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る
投稿2022/12/06 13:49
編集2022/12/06 13:59総合スコア34362
あなたの回答
tips
プレビュー
