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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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

Q&A

受付中

メディアクエリを使わずにレスポンシブ

KDTD
KDTD

総合スコア9

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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

3回答

0グッド

0クリップ

330閲覧

投稿2022/12/04 13:01

メディアクエリを使わずにレスポンシブデザインをしたいと考えております。

お世話になります。よろしくお願い申し上げます。
まず手始めに、親要素に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どうかご教授ください。何卒よろしくお願い申し上げます。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/12/04 13:02

どのような理由で「メディアクエリを使わない」という制約が必要となったのでしょうか?
hatena19

2022/12/05 01:16

列幅は500pxの固定ですか。 画面幅が1000pxより小さくなるとはみ出しますが、それは想定通りですか。 「375pxになった時点」というのは画面幅が375px以下になった時という意味ですか。
hatena19

2022/12/06 13:29 編集

「画面幅が1000pxより小さくなた場合は折り返す」ということは、leftの下にrightがくるようにするということですか。これは「375pxになった時点でleftを上段、rightを下段になる」と、何が違いますか。 そもそも画面幅375px以下の端末は現在ほぼないと思いますが、その場合も想定する必要はありますか。
Cocode

2022/12/06 21:33 編集

KDTD様 紹介してくださっている記事を読みました。 勉強になります。 一点念のためお伝えしたいことがあります。 (記事より抜粋) > HTMLソースを確認してみると、PCとスマホとでは大きく違った別の内容を表示していて、メディアクエリ(@media)の画面サイズのみで表示を切り替えてはいませんでした。 > 最初にユーザーエージェント(デバイスの種類)で大きく分けてPC用またはスマホ用の表示をします。その後、細かな表示の調整をメディアクエリ(@media)の画面サイズでしていました。 > 無駄なデータを読み込まないようにしていることが分かります。 実際のサイトのソースは未確認ですが、おそらく、 ①JavaScriptなどでユーザーエージェントを判断、該当するCSSを読み込み ②その上で、@mediaも使用して微調整 していると思います。 つまり、CSSのみで実現はしておりませんし、また、メディアクエリを使わないということでもありません。 ですのでご質問の内容は、参考記事と違うアプローチをしようとしている可能性があります。

回答3

1

375pxから500pxの間のあふれた状態を判断するにはメディアクエリがベターでしょう
そうでないならjsで判断ください

投稿2022/12/05 02:19

yambejp

総合スコア109126

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

  1. https://flex-font.com/faq/2019-09-responsive/ をお読みください。

こちらを確認しましたが、これは振り分けをサーバで行う前提となっています。単なるHTML+CSSで実現できる話ではありません。

投稿2022/12/06 14:03

maisumakun

総合スコア141545

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

maisumakun

2022/12/06 14:07 編集

そして、「grid-template-columns、width、min()、max()、minmax()、calc()等」で調整しているのであれば、それは「ブラウザに対してモバイルでもPCでも同じデータを送っている」のであって、この記事いわくの「メディアクエリによるデメリット」を何も回避できていないことになります。 わざわざメディアクエリを回避してコード量を増やすのでは本末転倒で、モバイルでの表示速度改善の効果は見込めません。
maisumakun

2022/12/07 03:58

「特に環境由来の制限はないけれど、そういう形で書いてみたかった」のが理由なら、それで構わなかったです。 理由付けを後出しで変更されると、非常に混乱します。

0

詳細がよく分からないので、修正コメントにあった下記の点についてだけの回答です。

  1. 画面幅が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
hatena19

総合スコア32031

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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