diff options
Diffstat (limited to 'files/ja/learn/css')
| -rw-r--r-- | files/ja/learn/css/css_layout/media_queries/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html index f1e90c3f90..0438d1a3f3 100644 --- a/files/ja/learn/css/css_layout/media_queries/index.html +++ b/files/ja/learn/css/css_layout/media_queries/index.html @@ -37,12 +37,12 @@ translation_of: Learn/CSS/CSS_layout/Media_queries <p>これは、次のもので構成されます。</p> <ul> - <li>メディアタイプ（media type）。 このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。</li> + <li>メディア種別（media type）。 このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。</li> <li>メディア式。 規則（rule）または、含まれている CSS を適用するために合格する必要があるテストです。</li> - <li>CSS 規則のセット。 テストに合格し、メディアタイプが正しい場合に適用されます。</li> + <li>CSS 規則のセット。 テストに合格し、メディア種別が正しい場合に適用されます。</li> </ul> -<h3 id="Media_types" name="Media_types">メディアタイプ</h3> +<h3 id="Media_types" name="Media_types">メディア種別</h3> <p>指定できるメディアの種類は次のとおりです。</p> @@ -62,15 +62,15 @@ translation_of: Learn/CSS/CSS_layout/Media_queries }</code></pre> <div class="blockIndicator note"> -<p><strong>注</strong>: ここでのメディアタイプは、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。</p> +<p><strong>注</strong>: ここでのメディア種別は、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。</p> </div> <div class="blockIndicator note"> -<p><strong>注</strong>: レベル3のメディアクエリー仕様には、他にも多くのメディアタイプが定義されています。 これらは非推奨であり、避けるべきです。</p> +<p><strong>注</strong>: レベル3のメディアクエリー仕様には、他にも多くのメディア種別が定義されています。 これらは非推奨であり、避けるべきです。</p> </div> <div class="blockIndicator note"> -<p><strong>注</strong>: メディアタイプはオプションです。 メディアクエリーでメディアタイプを指定しない場合、メディアクエリーはデフォルトですべてのメディアタイプ用になります。</p> +<p><strong>注</strong>: メディア種別はオプションです。 メディアクエリーでメディア種別を指定しない場合、メディアクエリーはデフォルトですべてのメディア種別用になります。</p> </div> <h3 id="Media_feature_rules" name="Media_feature_rules">メディア特性の規則</h3> @@ -103,7 +103,7 @@ translation_of: Learn/CSS/CSS_layout/Media_queries <p>実際には、レスポンシブデザインでは最小値または最大値を使用する方がはるかに便利であるため、<code>width</code> または <code>height</code> を単独で使用することはほとんどありません。</p> -<p>テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル4および5で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディアクエリーの使用: メディア特性</a>で見つけることができます。</p> +<p>テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル4および5で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、<a href="/ja/docs/Web/CSS/@media#メディア特性">メディアクエリーの使用: メディア特性</a>で見つけることができます。</p> <h4 id="Orientation" name="Orientation">オリエンテーション</h4> @@ -143,7 +143,7 @@ translation_of: Learn/CSS/CSS_layout/Media_queries <h3 id="and_logic_in_media_queries" name="and_logic_in_media_queries">メディアクエリーの "and" 論理</h3> -<p>メディア特性を組み合わせるには、上記で <code>and</code> を使用してメディアタイプとメディア特性を組み合わせるのとほぼ同じ方法で <code>and</code> を使用できます。 例えば、<code>min-width</code> と <code>orientation</code> をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、デバイスがランドスケープモードの場合にのみ <code>body</code> のテキストは青色になります。</p> +<p>メディア特性を組み合わせるには、上記で <code>and</code> を使用してメディア種別とメディア特性を組み合わせるのとほぼ同じ方法で <code>and</code> を使用できます。 例えば、<code>min-width</code> と <code>orientation</code> をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、デバイスがランドスケープモードの場合にのみ <code>body</code> のテキストは青色になります。</p> <pre class="brush: css notranslate"><code>@media screen and (min-width: 600px) and (orientation: landscape) { body { |