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

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

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

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

6回答

380閲覧

CSS メディアクエリの必要性について

earnest_gay

総合スコア615

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/03/23 16:01

編集2018/03/23 16:03

今回はWEBページのデザインと実装方法についての疑問です。
結論から言ってしまうとレスポンジブデザインと端末によるCSS切り替えどっちがいいかって話です。

まず、レスポンシブについて。
レスポンシブの場合、メディアクエリでブラウザ幅が〜〜なら〜〜〜って感じで微調整していきますよね。
メリットはユーザーにはありますが、開発側にはデメリットしかないと思っています。
1ファイルに詰め込みすぎてわけわからなくなりそうです。

次に、端末によるCSS切り替え。
サーバー側でアクセス端末がモバイルを検知したらSP用のCSSを適応。
そうじゃないなら、WEB(PC)用のCSSを適応。
といった風にしている現場も多々ありました。

<?php if ($isMobile) { $mode = 'sp'; } else { $mode = 'web'; } ?> <link rel="stylesheet" href="css/<?= $mode ?>/style.css">

css
┣sp
┗web

みたいな感じです。

これだと、開発者視点だとすごく分かりやすくて管理もしやすいです。少なくとも僕は。

で、僕はレスポンシブってイコール、メディアクエリーだと思っています。
みんなレスポンシブ、レスポンシブっていうけど、モバイル端末の画面は、PCのブラウザみたいに画面端ドラッグして可変させることなんかできないからレスポンシブって必要ないんじゃないのかなと思っています。

style.cssというcssファイルは、SPもWEBも共通で、メディアクエリによって端末毎のスタイルを定義しているケースで考えると、やっぱり画面幅が固定のモバイル端末ではメディアクエリは意味がなく、WEBで有効かと思っています。(SPでは無効ということではありません)

一方で、web/style.cssとsp/style.cssという2つのcssファイルを用意し、
web/style.cssは基本的にpx構成で、
sp/style.cssはiphone4やiphone6plusやipadなどのスクリーンサイズが異なる端末にも対応するために基本的に%指定で構成すれば、メディアクエリなんか必要ないと思うわけです。

これについて、なんかおかしいと思う方がいましたらどこがどうおかしいのか指摘お願いします。

ここまで書いてなんかちょっとまとめてスッキリした感があります。

で、僕はレスポンシブってイコール、メディアクエリーだと思っています。

これは誤りかもしれません。
要はメディアクエリーを使うか使わないかの違いかな。。。

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

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

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

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

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

guest

回答6

0

ベストアンサー

メディアクエリとUA検出

「メディアクエリ」と「UA検出」は対立するものではないと思います。

機能用途
メディアクエリ解像度別に切り替える
UA検出UA別に切り替える

判断基準は明らかです。

  • 解像度別に切り替えたいので、メディアクエリを使う
  • UA別に切り替えたいので、UA検出を使う

両方を採用してもいいですし、一方を採用してもいいでしょう。

縦向き/横向き

メディアクエリには、モバイル端末の「縦向き」「横向き」で表示を切り替えられるメリットがあります。
デスクトップ用モニタでも、モニタアームを利用して縦向きで利用している方がいらっしゃるようです。

メディアクエリで端末判定する是非

メディアクエリによってUA検出をしているような使い方を多く見受けるので混同していました。

古くはスマートフォンの解像度が低かった為に「低解像度の端末はスマートフォンである」と決め打ちする手法が採用されました。
現在はスマートフォンでも高解像度の端末があり、タブレット端末も普及してきた為、解像度でモバイル端末を判定できなくなっています。

そもそも、デスクトップPCでもウインドウサイズを変更すれば、メディアクエリの恩恵を受ける事が出来ますので、解像度から端末を判定するのは方法論として間違っていると考えます。
スマートフォン用UI、PC用UIで区分けする基準は「タッチパネルを持っているか」だと思いますが、現在のデスクトップPC用のブラウザでは、window.ontouchstart プロパティが存在する為、機能検出するのは困難です。
(現在はPCにもタッチパネルが搭載される時代なので、ブラウザが持つ機能で差別化できません)
現在、採用される事の多いUA認識で強制的にUIを決定する手法は、スマートフォン/タブレット端末でPC用UIを望むユーザのの利便性を損なうデメリットがあります。
以上の理由から「自動的に端末別にUIを決定する」のは現実的ではなく、ユーザが任意のUIを選択する方法を用意するのが理想だと考えています。

  • メディアクエリで解像度別にUIを用意する
  • トップページは「UA検出でPC用UI/タッチパネル用UIにリダイレクトする」or「PC用UI/タッチパネル用のリンクを設けて、ユーザが任意のUIを選択できるようにする」
  • ユーザが任意のUI(PC用UI/タッチパネル用UI)を選択できるように、全ページで「PC用UI」「タッチパネル用UI」のリンクを設置しておく

Re: MG1986JP さん

投稿2018/03/24 15:45

編集2018/03/25 10:25
think49

総合スコア18156

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

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

earnest_gay

2018/03/24 15:54

ありがとうございます。 メディアクエリによってUA検出をしているような使い方を多く見受けるので混同していました。
think49

2018/03/25 10:26

> メディアクエリによってUA検出をしているような使い方を多く見受けるので混同していました。 そういう傾向があるのは否定しませんが、方法論としては間違っていると考えています。 親記事に追記しました。
guest

0

iphone4やiphone6plusやipadなどのスクリーンサイズが異なる端末にも対応するために基本的に%指定で構成

iPhone4 は 320x480、iPad4 は 768x1024。
iPhone4縦持ちとiPad4横持ちで幅が3倍ぐらい違うんですが、それについて「別に同じレイアウトでいいんじゃない?」と思えない人たちがいる、ということではないでしょうか。

もちろん、「じゃあiPadはPCのスタイルを適用しよう」ということもできるんでしょうけど、そうすると新しいデバイスが登場するたびに「これはsp、これはweb」とメンテをする必要がありますよね。
それをするぐらいなら、初めからレスポンシブに、という開発を好む人たちもいておかしくないと思います。

投稿2018/03/24 01:54

Lhankor_Mhy

総合スコア35871

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

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

0

最後の方で少し気付かれていますが
メディアクエリであろうと別cssファイルにできる以上、ファイル分割はメリットになりません。なぜか「メディアクエリは同一ファイル」と思ってらっしゃるようですが…

cssでやれることは見た目を変えることだけなのでphpなどでサーバー側で切り替えようがクライアント側でメディアクエリにしようがどっちでもいいと思います。

逆にhtmlを変えないんならわざわざサーバー側でcssを切り替えるまでもなくメディアクエリでいいかなと個人的には思います。

投稿2018/03/23 18:09

sousuke

総合スコア3828

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

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

earnest_gay

2018/03/24 04:58

なんかスッキリしました。 やはり、自分の中ではSPもWEBも1つのCSSファイルに全て定義していくのは嫌なので、 web/style.cssとsp/style.cssで切り分ける感じで、必要があればsp/style.cssでメディアクエリを使っていく構成で確立したいと思います。 style.cssをひとまとめにしている場合、スマホから見ているケースで考えると、WEBで必要となるCSS記述は不必要なはずなので、本当に必要な定義しか読み込まないという意味でも分割したいという考えです。
sousuke

2018/03/24 05:32

そこらへんはもはや個人の主観ですので、それでいいかと思います。 私はものぐさなので ・ウィンドウサイズを変えるだけで結果が見える ・phpなしで実験できる ・cssを分けて書く場合同じ記述が出ると気持ちが悪い のような理由でcssをpcとスマホで分ける事は現状していません。
guest

0

モバイル端末の画面は、PCのブラウザみたいに画面端ドラッグして可変させることなんかできないからレスポンシブって必要ないんじゃないのかなと思っています。

まさにそのとおりですね。
どのくらいいるのか分かりませんが、スマホでPC画面を観たいニーズもまだあると思います。
メディアクエリでコーディングされているところは、スマホで「デスクトップ用サイトを表示」が出来ないです。

ユーザ側からの視点だと、見たい情報が早く表示される事が最優先だと思うので、ユーザ目線で優しい作りと言えば、ユーザーエージェントで切り換えて余分なファイルが読み込まれない作りが良いのだと思います。
メディアクエリーにした場合は、実際表示されないソースや画像とかも読み込んでしまって、デメリットがあります。
というかユーザ側としたら、メディアクエリの場合メリットなんてほとんどないんじゃないかなと。
幅を広げたときにコロコロかわるのが面白いとかあると思いますけど、そうやって見るのって、正直web業界の人ぐらいですよね。

しかし自分は、開発者視点とすれば、ファイルが大量にある方が混乱してしまいます。
メディアクエリで実装した方が、ワンソースに(もしくはできるだけ少ないファイルで)管理出来るので個人的に好きです。

開発側からすれば、
▼ファイル別管理の場合
・PCに最適な画像、SPに最適な画像をそれぞれ用意できる。しかし、それぞれの環境に配慮して作る必要がある。
・色変更など、PC/SP両方に影響する修正の場合、両方共反映しないといけない。
・PCのみ、SPのみの修正をする場合は、お互いの環境を考慮しなくてよい。
→手間が掛かったり、管理するファイルが増えるが、その分最適化はできる。

▼メディアクエリの場合
・どんな画像でも、想定し得る一番解像度の高い画像を一枚用意すれば、CSS上で何とかなるのでOK。
・CSS設計にもよるが、PC/SPで共通のCSSを管理する場合は、一箇所変えるだけで両方に反映できる。
・ひとつの修正をしたら、想定し得る環境をすべてで表示・動作チェックを行なう必要がある。
→管理上最低限のファイルで構成できる。

など、メディアクエリのメリットって、管理上の問題とか、やっぱり開発側によったところだと思うんですよね。

メディアクエリの必要性があるかといえば、無いです。
結局は、どちらにもメリットデメリットはあるので、好みで良いと思います。

投稿2018/03/24 15:31

kszk311

総合スコア3404

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

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

kszk311

2018/03/24 15:57

細かい調整をしたいときは、たとえば「スマホ用のCSSは、PCとは別で用意したが、iPhoneSEとかの狭いときだけ表示がおかしいのでメディアクエリを利用する」とかする時もあるかもしれません。 なので、必ずしもどちらかで完結するものではないですね。
guest

0

メディアクエリを使い、CSS は CSS(Sass使う) だけで管理する方が私は好みです。
sousukeさまのおっしゃる通り、ファイル分割もできますし。

「ほぼ同じスタイルだけどスマホの時に一部だけちょこっと変えたい」という場合、
メディアクエリを使って近い場所に記述する方がわかりやすいし管理しやすいと思います。

投稿2018/03/24 01:23

編集2018/03/24 01:24
takna

総合スコア784

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

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

0

以下は個人的見解です.


で、僕はレスポンシブってイコール、メディアクエリーだと思っています。

いいえ, (厳密には)誤りです.
なぜならメディアクエリがレスポンシブデザインのためだけに用意された仕組みではなく, より多彩な課題を解決できるように設計されているからです.
例えばメディアクエリを用いればJavaScriptの力に頼ることなくCSSの機能だけで印刷時に必要となるスタイルを適用できることでしょう.
(とは言え, メディアクエリ導入の動機にはレスポンシブデザインの台頭があったことは事実と思われます)

CSSの運用は環境毎にベストなものが異なります. あなたがおっしゃったようにCSSファイルそのものをサーバー側で切り替えてしまうのも一つの手ですが, 世の中にはそれが出来ない環境もあるためその場合にメディアクエリは大いに役に立つでしょう.

要はメディアクエリーを使うか使わないかの違いかな。。。

結局は私もそうだと思います.

参考
https://triple-underscore.github.io/css-conditional-ja.html

投稿2018/03/23 17:47

defghi1977

総合スコア4756

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問