Q&A
「どちらが仕様的には正しい」の「どちら」を具体的に記述してください。現在の記述ではどの部分が「書いていることが違う」と感じているのかがわかりません。
実現したいこと
ローカル環境でブログのようなものを作っており、Media Queriesを使ってフォントサイズをレスポンシブにしようとMedia Queriesについて調べた際の疑問です(今回はminを例にして話をすすめさせていただきます)。
まずこちらが読んだサイトです。
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html
https://qiita.com/knml/items/c94dc493571dd4127d43
上のサイトから順番に疑問に思った点を書きますと、
Min Width
ビューエリアが指定したサイズ（900px）より大きい場合に、スタイルが適用されます。
次のサイトが、
Min Width：
ビューエリアの最小幅。このサイズより大きい場合に適用
です。
この2つのサイトにはより大きいと書かれていますが、こちら(https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)のサイトでは、
ほとんどのメディア特性は、「以上」や「以下」といった条件を付けるために "min-" や "max-" という接頭辞を付けることができます。
と書いてあるます。
Qiitaやcolissはかなり有名なサイトなので間違っていることはないと思っていますが、どちらが仕様的には正しいのでしょうか？それとも仕様変更があって内容にずれが出てしまっているんでしょうか？
よろしくお願いします。
挙げた最初の2つのサイトには「より大きい」と書かれていまして、MDNには「以上、以下」と書かれています。「Aより大きい」はAを含まないですが、「A以上」はAを含むと理解しています。なので、どちらが正しいかによって結構変わってしまうのではと。
必ずしも回答者が「質問への追記･修正の依頼」を読むとは限らないので、質問文に反映させると良いと思います。
回答2件
0
ベストアンサー
質問者さんが最後に挙げたMDNの記事が正しいです。W3CのMedia Queries W3C Recommendation 19 June 2012の4章からの引用とその日本語訳は以下のようになります。
Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.
ほとんどのメディア機能は、「より大きいか等しい」および「より小さいか等しい」という制約を表すために、オプションの「min-」または「max-」接頭辞を受け入れます。この構文は、HTMLおよびXMLと競合する可能性のある "<"および ">"文字を避けるために使用されます。プレフィックスを受け入れるメディア機能は、ほとんどの場合、プレフィックスとともに使用されますが、単独でも使用できます。
投稿2017/12/05 19:24
総合スコア14731
ご回答ありがとうございます。なるほど、mdnの記事が正しかったのですね。coliss, Qiitaはかなりお世話になっているので妄信的になっていたようです。何が正しい情報か見分ける能力を磨いていこうと思います。改めて、ご回答ありがとうございました。
0
Media Queries Level 4
メディアクエリの最新版は Level 4 なので、仕様書より引用します。
- Using a “min-” prefix on a feature name is equivalent to using the “>=” operator. For example, (min-height: 600px) is equivalent to ''(height >= 600px)''.
- Using a “max-” prefix on a feature name is equivalent to using the “<=” operator. For example, (max-width: 40em) is equivalent to ''(width <= 40em)''.
- 特能名に対する "min-" 接頭辞の利用は、 ">=" 演算子の利用に等価になる。 例えば (min-height: 600px) は、 (height >= 600px) に等価になる。
- 特能名に対する "max-" 接頭辞の利用は、 "<=" 演算子の利用に等価になる。 例えば (max-width: 40em) は、 (width <= 40em) に等価になる。
従って、**min- は「以上」**を表し、**max- は「以下」**を表します。
一次情報と二次情報
Qiitaやcolissはかなり有名なサイトなので間違っていることはないと思っていますが、
「有名なサイト」は本当に信頼できるのでしょうか。
- coliss は個人サイトなので著者のcolissさんが間違いを犯さないとは断言できません。
- Qiitaは個人がよせた情報の寄せ集めであり、投稿者によって信頼の多寡が変わってきます。初心者も熟練者も等しく投稿できるためです。
- MDNはFirefoxを制作しているベンダーサイトなので、上2つと比較すれば信頼性が高いといえます。
ただし、所詮は二次情報です。一次情報(仕様書)には遠く及びません。
MDNも日本語サイトは情報が古い事がありますし、英語でも用語レベルの間違いは何度か発見しています。
今回のように仕様に関する疑問があれば、まずは仕様書(一次情報)を当たってみると良いと思います。
仕様書は大抵、W3CやWHATWGにありますが、場所が分からなければMDNからのリンク、Google検索を駆使すると見つかります。
Re: 0101ecy3 さん
投稿2017/12/06 01:20
編集2017/12/06 01:26
総合スコア18162
ご回答ありがとうございます。s8_chuさんにも教えていただきましたが、こちらはそこで引用している仕様書よりも新しいものなのですね。とても参考になります。一次情報と二次情報について、仰る通りだと感じました。2次情報のほうがわかりやすく解説されていて仕様書よりもいいと思っていましたが、伝言ゲームのようにわずかな言葉の解釈の違いから本来とは違った伝え方になってしまったりしてしまうこともしばしばあるのだと気づくことができました。今後はどちらの情報が正しいものか迷ったとき、一時情報と照らし合わせたりしながら確かめていこうと思います。あらためて、ご回答ありがとうございました。
あなたの回答
tips
プレビュー
