HTML・CSSでレスポンシブで作成する場合（今は大抵そうでしょうが）について、数値を固定することについてのデメリット等を知りたいです
HTMLを書き始める際にテンプレートとして
html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
から始めることが多いと思います（細かな部分は置いておいてください）
私の場合はお客様都合で基本はPCファーストというかPCをまず一通り書いてある程度出来た時点でメディアクエリ等で調整していく形を取っております。
今回PCを全く考慮しなくてよいというページを作る必要が出たのですが考慮しなくていいと言いつつ要するにPCでも同じ表示にしてほしいというようなつもりの事をおっしゃったようです。
でそれを実現するときにいろんなやり方があるとは思いますが今回はPCでは仮想スマホとして仮に400幅前提でhtml,bodyを固定して表示することにしました（PCブラウザで400幅で表示されて左右がら空きなイメージです）
一旦それで見せた所、縦幅を固定したい箇所がいくつかあったりで見た目がずれるので、どの端末（スマホ・タブレット）端末でも見た目がほぼおなじになるようにしてほしいという事を言われてちょっと考えてしまいました。
逆にPCはブラウザ幅に余裕があるので400固定してしまえば良いのですが、スマホ端末は100%幅にならないといけない。
通常のwidth=device-widthにしていると正直画面幅がいくつになるかわからないので逆にwidth=400とかにしてやればPC上での400幅と同じことになるので良いのかな？と思ったのですが確信が持てなかったのでネットで調べてみました。
ただ思ったよりその辺に触れている記述を読むと「ビューポートを固定させるな、width=device-widthにしろ」と書いてる記事はあれど「別に固定してもいいよ」と断言しているような記事は見つからなかったと思います。
このあたりご意見というか考え方をお聞かせいただきたく思いました。
そもそも考え方が間違ってる所等ありましたらご指摘頂けるとありがたく思います。
よろしくお願いいたします。
回答3件
#1
総合スコア146544
投稿2025/04/25 04:39
HTML・CSSでレスポンシブで作成する場合（今は大抵そうでしょうが）について、数値を固定することについてのデメリット等を知りたいです
そもそも論として、画面幅を固定したものはレスポンシブではありません。
#2
総合スコア37413
投稿2025/04/25 08:28
編集2025/04/25 08:37 ご存じのとおり、viewport のメタタグを記述しない場合、width=980と同等の現象になります。
ということは、「ビューポートを固定させるな、width=device-widthにしろ」は「viewport のメタタグを書け」と同等の内容であるはずです。つまり、「固定させるな」という記事の意図は、「固定することは悪いことだ」などの文法的あるいは倫理的なルールなどではなくて、「固定するとデザインやレイアウトに制約を受けるからdevice-width指定した方がいい」というアドバイスであろうかと思います。
ですから、そのアドバイスを読んでどうするのかは landy77 さん次第、ということになろうかと思います。
#3
maisumakunさんの話（固定してるならレスポンシブじゃない）はよく考えたらそれは当たり前だなと思いました。
レスポンシブじゃないですね、単純にPCとモバイルで同じ見た目にしてくれと言うだけの話でした。
そうなると、Lhankor_Mhyさんの話を読ませて頂いて、まずもってモバイルベースでPCも同じにしたいだけですのでPCで980ベースになるとどちらにしても同じ表示にならないのが一つ。
その事からhtmlやbodyもしくは内部でのmain等を例えば400pxで作って、viewportをwidth=400で作るのも必要性があるのであればやってダメなわけじゃなくてそれ自体が悪いことだというものではないというふうに考えても良さそうだなと感じました。
まぁLhankor_Mhyさんがおっしゃるようにビューポートの件自体は何も考えずに決め打ちすることだけが悪いことであとはその場の問題として場面に合わせれば良いという風に考えて作ってみます。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。