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

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

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

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

HTML5

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

レスポンシブWebデザイン

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

Q&A

解決済

1回答

1735閲覧

@media(max-width:〇〇〇px)を使用してのPCと高解像度スマホ画面のデザインを切り替えたい

shin555

総合スコア11

CSS3

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

HTML5

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

レスポンシブWebデザイン

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

0グッド

0クリップ

投稿2020/02/20 13:06

CSS

PCとスマホで画面のデザインを切り替えたいときに、下記のコードのように@media(max-width:600px){}で600px以下の横幅で適用する属性と値を{}内に記述することは理解できました。

しかし、高解像度のスマホだと、横幅が1000px前後のものもあり、上記の方法では、PCとスマホでどれくらいのpxでmax-widthを設定すれば良いのかわからなくなりました。

htmlで、<meta name="viewport" content="width=device-width, initial-scale=1.0">
を設定すると画面の大きさに合わせて表示されると知り設定しているのですが、横幅1000pxのスマホとPCとmax-widthとの関連や設定がわかりません。

お手数おかけしますが、ご教授お願いできないでしょうか。よろしくお願いいたします。

CSS

1/*スマホ用:横幅600px以下の場合 */ 2@media(max-width:600px)3    ・・・・・・ 4    ・・・・・・ 5    ・・・・・・ 6

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

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

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

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

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

guest

回答1

0

ベストアンサー

最新のスマホだと横1400px以上のものもありますね。
一方で格安ノートPCだと未だに横1300px程度のものが売られていたりします。
なのにPCでWebサイトを見るとPCっぽく、スマホからアクセスするとスマホっぽく表示されます。なぜうまく表示されるのでしょうか。

それは「CSSピクセル」という考え方を使ってうまく処理しているからです。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> ↑このコードの中に「width=device-width」という部分がありますね。 これは「HTMLを描画するウィンドウの幅をdevice-width(=デバイスの幅)に設定する」という意味です。

この「デバイスの幅」というのは「実際の解像度の横幅」ではなく「CSSピクセルで考えたときの横幅」を使用します。
例えばiPhone Xは実際の解像度は横1125pxですが、CSSピクセルの解像度は横375pxです。
なのでiPhone Xからアクセスしたとき、Webサイトは横幅を375pxで描画しているんです。
375pxなんてすごく小さく感じますよね。

CSSピクセルの考え方は以下のページがわかりやすいと思いますので見てみてください。
https://qiita.com/imusam/items/cd4f8da49c3ab73d6475

投稿2020/02/21 17:25

KimTom

総合スコア134

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

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

shin555

2020/02/22 01:51

Kim Tomさん 回答ありがとうございます。 回答を参考にCSSピクセル、リンクを参照しました。 デバイスピクセル比のことを知り、自動でCSSピクセルに最適化していることを理解できました。 これから端末のデバイスピクセル比のことをチェックしながら、サイトを作っていきたいと思います。 本当にありがとうございました。
KimTom

2020/02/22 05:34

解決してよかったです! 何pxで表示を切り替えるかは人によって微妙にバラバラだったりしますし、minを使うかmaxを使うかも状況によって変わってきます(モバイルのデザインからコーディングを始めたらminを使うことになりますね)。 そこについてもネット上で「最適な設定」を解説してくれている記事がたくさんあるので調べてみると参考になるかもしれません。頑張ってくださいね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問