diff options
Diffstat (limited to 'files/ja/conflicting/web/css')
23 files changed, 2287 insertions, 0 deletions
diff --git a/files/ja/conflicting/web/css/@media/index.html b/files/ja/conflicting/web/css/@media/index.html new file mode 100644 index 0000000000..5bf2140f1d --- /dev/null +++ b/files/ja/conflicting/web/css/@media/index.html @@ -0,0 +1,5 @@ +--- +title: Media +slug: Web/CSS/Media +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html new file mode 100644 index 0000000000..87ca6f864c --- /dev/null +++ b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html @@ -0,0 +1,17 @@ +--- +title: Visual +slug: Web/CSS/Media/Visual +tags: + - CSS + - CSS Reference + - MDC Project + - NeedsContent +translation_of: Web/CSS/@media +translation_of_original: Web/CSS/media/visual +--- +<div>{{ CSSRef() }}</div> +<p><a href="/ja/CSS" title="ja/CSS">CSS</a> 標準で定義された<a href="/ja/CSS/@media#Media_groups" title="ja/CSS/@media#Media_groups">メディアグループ</a>。</p> +<h2 id="英語版章題(See_also)_参照">{{ 英語版章題("See also") }}参照</h2> +<p><a class="external" href="http://www.w3.org/TR/CSS2/media.html" title="W3C Media Types Spec">W3C Media Types Spec</a></p> +<p><span class="comment">Interwiki Languages Links</span></p> +<div>{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}</div> diff --git a/files/ja/conflicting/web/css/@viewport/index.html b/files/ja/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..38f093896b --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport/index.html @@ -0,0 +1,86 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p> + +<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css notranslate">/* 1つの値 */ +height: auto; +height: 320px; +height: 15em; + +/* Two values */ +height: 320px 200px; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>使用値は他の CSS 記述子の値から計算されます。</dd> + <dt><code><length></code></dt> + <dd>負の数ではない絶対的または相対的な長さです。</dd> + <dt><code><percentage></code></dt> + <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3> + +<pre class="brush: css notranslate">@viewport { + height: 500px; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.height")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..0e9f9079f0 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +<div>{{CSSRef}}</div> + +<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p> + +<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css">/* Keyword value */ +max-height: auto; + +/* <length> values */ +max-height: 400px; +max-height: 50em; +max-height: 20cm; + +/* <percentage> value */ +max-height: 75%;</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>使用する値は他の CSS 記述子の値から計算されます。</dd> + <dt><code><length></code></dt> + <dd>負ではない絶対値または相対値。</dd> + <dt><code><percentage></code></dt> + <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: css">@viewport { + max-height: 600px; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..01b0ae54b2 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,71 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - '@viewport' + - CSS + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p> + +<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css">/* キーワード値 */ +min-zoom: auto; + +/* <number> 値 */ +min-zoom: 0.8; +min-zoom: 2.0; + +/* <percentage> 値 */ +min-zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>非負の数値で、表示倍率の下限です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>非負のパーセント値で、表示倍率の下限です。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..97814ca702 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,78 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - CSS 記述子 + - Experimental + - Reference + - モバイル + - 画面レイアウト +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css; no-line-numbers">/* キーワード値 */ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd> + <dt><code>contain</code></dt> + <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd> + <dt><code>cover</code></dt> + <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">auto | contain | cover +</pre> + +<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..483e5c214f --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,89 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p> + +<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css notranslate">/* キーワード値 */ +max-zoom: auto; + +/* <number> 値 */ +max-zoom: 0.8; +max-zoom: 2.0; + +/* <percentage> 値 */ +max-zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>非負の数値で、表示倍率の上限です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>非負のパーセント値で、表示倍率の上限です。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3> + +<pre class="notranslate"><code>@viewport { + max-zoom: 1.5; +}</code> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..f05447a501 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,91 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p> + +<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css notranslate">/* キーワード値 */ +zoom: auto; + +/* <number> 値 */ +zoom: 0.8; +zoom: 2.0; + +/* <percentage> 値 */ +zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>表示倍率として使われる非負の数値です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>表示倍率として使われる非負のパーセント値です。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3> + +<pre class="notranslate"><code>@viewport { + zoom: 2.0; +}</code></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.zoom")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..f9e7367a09 --- /dev/null +++ b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,59 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-moz-placeholder' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p> + +<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div> + +<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p> + +<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例はプレースホルダの文字色を緑色に変更しています。</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</pre> + +<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p> + +<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> + +<p>{{ Bug(457801) }}</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div> + +<h3 id="SeeAlso" name="SeeAlso">参考</h3> + +<ul> + <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("textarea") }}</li> +</ul> diff --git a/files/ja/conflicting/web/css/box-ordinal-group/index.html b/files/ja/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..147bdbd9b4 --- /dev/null +++ b/files/ja/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - フレックスボックス +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +<p>{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}</p> + +<p>このプロパティの代わりに何を使用するべきかについての詳細情報は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>をご覧ください。</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。</p> + +<h2 id="Values" name="Values">値</h2> + +<p>値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><style type="text/css"> + #Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; + } + + #text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; + } + + #text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; + } + + #text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; + } + + #text4 { + background: orange; + } +</style> + +<div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div> +</pre> diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..fa7ce58677 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,103 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +<p>CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。</p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">大きな画像をタイル状に配置する</h2> + +<p>1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。</p> + +<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> + +<p>これは以下の CSS を使うことで達成されます。</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(fxlogo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} +</pre> + +<p>もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">画像を引き伸ばす</h2> + +<p>以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>その結果はこのようになります。</p> + +<p><img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像を拡大する</h2> + +<p>この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。</p> + +<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特別な値の「contain」と「cover」</h2> + +<p>CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 <code>contain</code> と <code>cover</code> の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。</p> + +<h3 id="contain" name="contain">contain</h3> + +<p>contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。</p> + +<div style="width: 100%; height: 200px; border: solid 2px;"> +<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> +</div> + +<p>上の例の CSS は以下のようなものです。</p> + +<pre class="brush: css; highlight:[4]">width: 100%; +height: 200px; +background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); +background-size: contain; +border: solid 2px; +</pre> + +<h3 id="cover" name="cover">cover</h3> + +<p>cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。</p> + +<div style="width: 100%; height: 200px; border: solid 2px;"> +<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> +</div> + +<p>この例では以下の CSS を使用しています。</p> + +<pre class="brush: css; highlight:[4]">width: 100%; +height: 200px; +background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); +background-size: cover; +border: solid 2px; +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("background")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..4c7327f6c1 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,74 @@ +--- +title: CSS での複数の背景の利用方法 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +<p id="Summary">{{CSSRef}}</p> + +<p>CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。</p> + +<p>複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。</p> + +<pre class="syntaxbox">.myclass { + background: 背景1, 背景2, ..., 背景N; +}</pre> + +<p>この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>次の例では、上位レイヤーから</p> + +<ol> + <li>Firefox のロゴ</li> + <li><a href="/ja/CSS/linear-gradient" title="linear-gradient">線形グラデーション</a></li> + <li>花の画像</li> +</ol> + +<p>の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。</p> + +<pre class="brush: css">.multi_bg_example { + background-image: + url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */ + linear-gradient( to right, rgba(255,255,255,0), #fff ), + url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg"); + + background-repeat: + no-repeat, /* 最前面の背景レイヤーに対応 */ + no-repeat, + repeat; + + background-position: + bottom right, /* 最前面の背景レイヤーに対応 */ + left, + right; +}</pre> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">スクリーンショット</td> + </tr> + <tr> + <td><img alt="css_multibg.png" src="/@api/deki/files/4028/=css_multibg.png"></td> + </tr> + </tbody> +</table> + +<p>スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ <code>background-image</code> で記述した各値に対し、同じ順番で適用されます。つまり、<code>background-image</code> の最初の値として指定した FireFox のアイコンの画像に対し、<br> + {{cssxref("background-repeat")}} は "<code>bottom left</code>"、<br> + {{cssxref("background-position")}} は "<code>no-repeat</code>"<br> + が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの<em>右下に</em>、<em>ひとつだけ</em> 表示されるのです。</p> + +<h2 id="See_also" name="See_also">関連記事</h2> + +<ul> + <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="グラデーションの利用">グラデーションの利用</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..fc56bb1de6 --- /dev/null +++ b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,47 @@ +--- +title: cursor のプロパティーに URL 値を使用する +slug: Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +--- +<p> </p> +<p><a href="ja/Gecko">Gecko</a> 1.8 (<a href="ja/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) では、<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 cursor プロパティー</a> で URL 値が使用できます。これにより、自由な画像 — Gecko がサポートする画像形式なら — がマウスカーソルとして利用できます。</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<p>このプロパティーの記述方式は以下のようになります。</p> +<pre class="eval">cursor: [<url>,]* keyword; +</pre> +<p>これは、カンマ区切りのゼロ個以上の URL が指定可能で、その後ろに <a href="ja/CSS">CSS</a> 規格で定義されている <code>auto</code> や <code>pointer</code> といったキーワードを一つ指定する<b>必要</b>があります。</p> +<p>たとえば、以下のような指定は可能です :</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>この場合、最初に foo.cur を読み込もうとします。もし、存在しないかその他の理由により利用できない場合、bar.gif を試しますが、両方利用できない場合は <code>auto</code> が利用されます。</p> +<p>cursor 値での CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">書式</a> のサポートが Gecko 1.8beta3 で付け加えられました。(そのため、Firefox 1.5 でも動作します) このことにより、カーソルのホットスポットの座標を指定できるようになります。もし、指定されていなければ、ホットスポットの座標はファイルそのもの (CUR もしくは XBM ファイル) か、画像の左上端に設定されます。CSS3 における書式のサンプルは</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>となります。</p> +<p>最初の値が x 座標、二つ目の値が y 座標になります。サンプルではホットスポットが、左上端 (0,0) に対して (4,12) のピクセルに設定されます。</p> +<h3 id=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85" name=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85">制限事項</h3> +<p>Gecko でサポートされているすべての画像形式が利用可能です。これは、BMP、JPG、CUR、GIF などが利用できることを意味します。しかしながら、ANI はサポートされていません。また、アニメーション GIF を指定した場合でも、カーソルはアニメーションを行いません。この制限は、将来のリリースで除かれる可能性があります。</p> +<p>Gecko それ自体には、カーソルサイズの制限はありません。しかしながら、OS やプラットフォームの互換性のために、最大サイズを 32x32 にするのがよいでしょう。特に、このサイズより大きなカーソルは、Windows 9x (95, 98, Me) では動作しません。</p> +<p>半透明カーソルは、Windows XP より前ではサポートされていません。これは、OS の制限です。透明度はすべてのプラットフォームで動作します。</p> +<p>Windows、OS/2 と Linux (GTK+ 2.4 以上の場合) での Mozilla リリースでのみ、カーソルにURL 値が利用できます。その他のプラットフォームでのサポートは、将来のリリースで加えられる予定です。(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7" name=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ほかのブラウザとの互換性</h3> +<p>Microsoft Internet Explorer でも <code>cursor</code> プロパティーに URL 値を利用できます。しかしながら、CUR と ANI フォーマットのみをサポートしています。</p> +<p>また、<code>cursor</code> プロパティーの書式の制限もゆるいです。これは、</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>または:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>なども、MSIE では動作することを意味しますが、Geckoブラウザでは動作しません。Gecko との互換性と CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。</p> +<dl> + <dd> + <i> + To-do: MSIE が CSS3 ホットスポット座標について行うことについて記述</i> + </dd> +</dl> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,368 @@ +--- +title: クロスブラウザのフレックスボックスのミックスイン +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - CSS フレックスボックス + - ミックスイン + - リファレンス +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +<div>{{cssref}}</div> + +<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p> + +<p>このセットは次のものを使用します。</p> + +<ul> + <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li> + <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li> +</ul> + +<p>原文:</p> + +<ul> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> +</ul> + +<p>参考文献:</p> + +<ul> + <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> + <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> + <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> + <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li> + <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li> +</ul> + +<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div> + +<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3> + +<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p> + +<ul> + <li>値: <code>flex</code> | <code>inline-flex</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li> +</ul> + +<pre class="brush: css">@mixin flexbox { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +//Using this mixin +%flexbox { @include flexbox; }</pre> + +<div> +<pre class="brush: css">@mixin inline-flex { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; }</pre> +</div> + +<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3> + +<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-direction: reverse; + -moz-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-direction: normal; + -moz-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + -moz-box-direction: reverse; + -moz-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -moz-box-direction: normal; + -moz-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +// Shorter version: +@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> +</div> + +<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3> + +<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p> + +<ul> + <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-wrap($value: nowrap) { + // No Webkit/FF Box fallback. + -webkit-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +}</pre> +</div> + +<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3> + +<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>nowrap</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { + // No Webkit/FF Box fallback. + -webkit-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +}</pre> +</div> + +<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3> + +<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -moz-box-ordinal-group: $int + 1; + -webkit-order: $int; + -ms-flex-order: $int; + order: $int; +}</pre> +</div> + +<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3> + +<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-grow($int: 1) { + -webkit-box-flex: $int; + -moz-box-flex: $int; + -webkit-flex-grow: $int; + -ms-flex: $int; + flex-grow: $int; +}</pre> +</div> + +<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3> + +<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-shrink($int: 0) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex: $int; + flex-shrink: $int; +}</pre> +</div> + +<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3> + +<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p> + +<ul> + <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + flex-basis: $value; +}</pre> +</div> + +<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3> + +<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p> + +<ul> + <li>値: See the {{cssxref("flex")}} reference for values and default</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so lets grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box: $fg-boxflex; + -moz-box: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -ms-flexbox: $fg $fs $fb; + flex: $fg $fs $fb; +}</pre> +</div> + +<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3> + +<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p> +</div> + +<ul> + <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -moz-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -moz-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -moz-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -moz-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); }</pre> +</div> + +<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3> + +<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -moz-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -moz-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -moz-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + align-items: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3> + +<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p> + +<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p> + +<div> +<pre class="brush: css">@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3> + +<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +}</pre> +</div> diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..4458dddff2 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +title: Web アプリケーションのレイアウトに flexbox を使用する +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - Advanced + - CSS + - CSS Flexible Boxes + - Example + - Guide + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p> + +<ul> + <li>ページの中央に要素を置きたい場合。</li> + <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li> + <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li> +</ul> + +<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p> + +<h2 id="Basics" name="Basics">基本</h2> + +<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p> + +<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p> + +<ul> + <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li> + <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li> + <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li> +</ul> + +<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p> + +<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2> + +<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p> + +<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p> + +<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2> + +<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p> + +<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[8,14]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Result_2" name="Result_2">結果</h3> + +<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p> + +<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p> + +<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2> + +<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p> + +<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Result_3" name="Result_3">結果</h3> + +<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/float/index.html b/files/ja/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..562347725e --- /dev/null +++ b/files/ja/conflicting/web/css/float/index.html @@ -0,0 +1,32 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +<div> + {{CSSRef()}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong><code>none</code></strong> キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。</p> +<h2 id="Used_in" name="Used_in">none 値が使用可能な CSS プロパティ</h2> +<ul> + <li>{{ Cssxref("float") }}<br> + 要素はフロートしません。</li> + <li>{{ Cssxref("text-decoration") }}<br> + 要素の装飾を行いません。</li> + <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}<br> + 高さ・幅を特定値で制限しません。</li> + <li>{{ Cssxref("background-image") }}</li> + <li>{{ Cssxref("border-style") }}</li> + <li>{{ Cssxref("clear") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("counter-increment") }}</li> + <li>{{ Cssxref("counter-reset") }}</li> + <li>{{ Cssxref("display") }}</li> + <li>{{ Cssxref("list-style-type") }}</li> + <li>{{ Cssxref("quotes") }}</li> + <li>{{ Cssxref("text-transform") }}</li> +</ul> diff --git a/files/ja/conflicting/web/css/font-variant/index.html b/files/ja/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..4f1a3acf6b --- /dev/null +++ b/files/ja/conflicting/web/css/font-variant/index.html @@ -0,0 +1,37 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS Reference +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +<div> + {{CSSRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong><code>normal</code></strong> は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。</p> +<h2 id="Used_in" name="Used_in">normal が使用可能な CSS プロパティ</h2> +<dl> + <dt> + {{Cssxref("font-weight")}}</dt> + <dd> + <code>normal</code> を指定した場合、font-weight プロパティの基準値（<code>400</code>）と同等となります。太字にも細字にもなりません。</dd> + <dt> + {{Cssxref("font-style")}}</dt> + <dd> + <code>normal</code> を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。</dd> + <dt> + {{Cssxref("word-spacing")}}</dt> + <dd> + <code>normal</code> を指定した場合、フォントの標準的な字間で文字がレンダリングされます。</dd> +</dl> +<p>他にも、以下の様なプロパティ等で <code>normal</code> が指定可能です。</p> +<ul> + <li>{{Cssxref("font-variant")}}</li> + <li>{{Cssxref("letter-spacing")}}</li> + <li>{{Cssxref("white-space")}}</li> + <li>{{Cssxref("speak")}}</li> + <li>{{Cssxref("unicode-bidi")}}</li> + <li>{{Cssxref("line-height")}}</li> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html new file mode 100644 index 0000000000..7eed5bdf59 --- /dev/null +++ b/files/ja/conflicting/web/css/index.html @@ -0,0 +1,31 @@ +--- +title: CSS-2 Quick Reference +slug: CSS-2_Quick_Reference +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS +translation_of_original: CSS-2_Quick_Reference +--- +<p> </p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p><p><big><b><a href="ja/CSS-2_Quick_Reference/All_in_a_page">CSS-2 クイックリファレンス(一括)</a></b></big> +</p><p>さらに詳しい情報とブラウザのサポート: +</p><p><big> +<b><a href="ja/CSS-2_Quick_Reference/Selectors">セレクタ</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Box_model">ボックスモデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_model">視覚的構成モデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_details">視覚的構成の詳細</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_effects">視覚効果</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Lists">リスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Color_and_Background">カラーと背景</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Font">フォント</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Text">テキスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Tables">表組み</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/User_interface">ユーザインタフェース</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Units">単位</a></b><br> +</big> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference", "fr": "fr/Pr\u00e9cis_CSS_2", "pl": "pl/Szybka_dokumentacja_CSS-2" } ) }} diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: メディアクエリ +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS Reference +--- +<p>{{ gecko_minversion_header("1.9.1") }}</p> + +<p>CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>メディアクエリは、<a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">メディアタイプ</a>と、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、<strong>さらに</strong>メディアクエリのすべての式が true のとき、true になります。</p> + +<h3 id="Logical operators" name="Logical operators">論理演算子</h3> + +<p>論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、<code>not</code> および <code>and</code>, <code>only</code> があります。</p> + +<p>また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。</p> + +<p><code>not</code> キーワードは、クエリの結果を否定します。例えば、"<span style="font-family: monospace;">all</span><code> and (not color)</code>" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。</p> + +<p><code>only</code> キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:</p> + +<pre><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)" name="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">擬似 BNF (この表記を好む方のために)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。</p> + +<div class="note"><strong>注記:</strong> 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。</div> + +<h2 id="Media features" name="Media features">メディア特性</h2> + +<p>ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。</p> + +<div class="note"><strong>注記:</strong> メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。</div> + +<h3 id="color">color</h3> + +<p><strong>値:</strong> {{cssxref("<color>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。</p> + +<div class="note"><strong>注記:</strong> カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>すべてのカラー表示可能なデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (color) { ... } +</pre> + +<p>カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのカラー検索テーブルのエントリ数を指示します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:</p> + +<pre>@media all and (color-index) { ... } +</pre> + +<p>最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:</p> + +<pre><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>値:</strong> 整数 / 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。</p> + +<pre>@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>値:</strong> 整数 / 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。</p> + +<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:</p> + +<pre><link rel="stylesheet" media="screen and (max-device-width: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> + +<h3 id="grid">grid</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> all<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。</p> + +<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:</p> + +<pre>@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>注記:</strong> "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。</div> + +<h3 id="height">height</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p><code>height</code> メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。</p> + +<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>すべてのモノクロデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (monochrome) { ... } +</pre> + +<p>ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>値:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>縦置き方向のときにだけスタイルシートを適用するには:</p> + +<pre>@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>値:</strong> {{cssxref("<resolution>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:</p> + +<pre>@media print and (min-resolution: 300dpi) { ... } +</pre> + +<h3 id="scan">scan</h3> + +<p><strong>値:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong>メディア:</strong> {{cssxref("Media/TV", "tv")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>テレビ出力デバイスの走査方式を記述します。</p> + +<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在 <code>tv</code> メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:</p> + +<pre>@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p><code>width</code> メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。</p> + +<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:</p> + +<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:</p> + +<pre><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:</p> + +<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Mozilla-specific media features" name="Mozilla-specific media features">Mozilla 独自のメディア特性</h2> + +<p>{{ gecko_minversion_header("1.9.2") }}</p> + +<p>Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。</p> + +<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。</p> + +<h3 id="-moz-windows-classic">-moz-windows-classic</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。</p> + +<h2 id="See_also" name="See_also">参照</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">Media types</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/reference/index.html b/files/ja/conflicting/web/css/reference/index.html new file mode 100644 index 0000000000..9d20688007 --- /dev/null +++ b/files/ja/conflicting/web/css/reference/index.html @@ -0,0 +1,189 @@ +--- +title: All in a page +slug: CSS-2_Quick_Reference/All_in_a_page +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS/Reference +translation_of_original: CSS-2_Quick_Reference/All_in_a_page +--- +<p> +</p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p> +<h3 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB"> ボックスモデル </h3> +<p><small> +<b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b><br> +</small></p><p><b>padding-top : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-right : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-left : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b><br> +</p><p><b>border-top-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-right-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-left-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-width : thin | medium | thick | <i>length</i>;</b><br> +</p><p><b>border-top-color : <i>color</i> | transparent;</b><br> +<b>border-right-color : <i>color</i> | transparent;</b><br> +<b>border-bottom-color : <i>color</i> | transparent;</b><br> +<b>border-left-color : <i>color</i> | transparent;</b><br> +<b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b><br> +</p><p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b><br> +</p><p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.83.A2.E3.83.87.E3.83.AB"> 視覚的構成モデル </h3> +<p><small> +<b>display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;</b><br> +</small></p><p><b>position : static | relative | absolute | fixed;</b><br> +</p><p><b>top : <i>length</i> | <i>percentage</i> | auto;</b> +<b>right : <i>length</i> | <i>percentage</i> | auto;</b> +<b>bottom : <i>length</i> | <i>percentage</i> | auto;</b> +<b>left : <i>length</i> | <i>percentage</i> | auto;</b> +</p><p><b>float : left | right | none;</b><br> +<b>clear : none | left | right | both;</b><br> +</p><p><b>z-index : auto | <i>integer</i>;</b><br> +</p><p><b>direction : ltr | rtl;</b><br> +<b>unicode-bidi : normal | embed | bidi-override;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.81.AE.E8.A9.B3.E7.B4.B0"> 視覚的構成の詳細 </h3> +<p><small> +<b>width : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-width : <i>length</i> | <i>percentage</i>;</b> +<b>max-width : <i>length</i> | <i>percentage</i> | none;</b> +</small></p><p><b>height : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-height : <i>length</i> | <i>percentage</i>;</b> +<b>max-height : <i>length</i> | <i>percentage</i> | none;</b> +</p><p><b>line-height : normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b> +</p><p><b>vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E5.8A.B9.E6.9E.9C"> 視覚効果 </h3> +<p><small> +<b>overflow : visible | hidden | scroll | auto;</b><br> +</small></p><p><b>clip : <i>rect(top,right,bottom,left)</i> | auto;</b><br> +</p><p><b>visibility : visible | hidden | collapse;</b><br> </p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88"> リスト </h3> +<p><small> +<b>list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;</b><br> +<b>list-style-image : <i>uri</i> | none;</b><br> +<b>list-style-position : inside | outside;</b><br> +<b>list-style : <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b> +</small> +</p> +<h3 id=".E3.82.AB.E3.83.A9.E3.83.BC.E3.81.A8.E8.83.8C.E6.99.AF"> カラーと背景 </h3> +<p><small> +<b>color : <i>color</i>;</b><br> +</small></p><p><b>background-color : <i>color</i> | transparent;</b><br> +<b>background-image : <i>uri</i> | none;</b><br> +<b>background-repeat : repeat | repeat-x | repeat-y | no-repeat;</b><br> +<b>background-attachment : scroll | fixed;</b><br> +<b>background-position : {{ mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right') }} {{ mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom') }} ;</b><br> +<b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b><br> </p> +<h3 id=".E3.83.95.E3.82.A9.E3.83.B3.E3.83.88"> フォント </h3> +<p><small> +<b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b><br> +<b>font-style: normal | italic | oblique; </b><br> +<b>font-variant: normal | small-caps; </b><br> +<b>font-weight: normal | bold | bolder | lighter | 100 | ... | 900;</b><br> +<b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b><br> +<b>font: {{ mediawiki.external('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>') }} <i>font-size</i> {{ mediawiki.external('<i>/line-height</i>') }} <i>font-family</i>;</b> +</small> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88"> テキスト </h3> +<p><small> +<b>text-indent : <i>length</i> | <i>percentage</i>;<br></b> +<b>text-align : left | right | center | justify ;<br></b> +<b>text-decoration : none | {{ mediawiki.external(' underline overline line-through blink ') }};<br></b> +<b>text-transform : capitalize | uppercase | lowercase | none;<br></b> +<br> +<b>letter-spacing : normal | <i>length</i>;<br></b> +<b>word-spacing : normal | <i>length</i>;<br></b> +<b>white-space : normal | pre | nowrap | pre-wrap | pre-line;<br></b> +</small></p><p> +</p> +<h3 id=".E8.A1.A8.E7.B5.84.E3.81.BF"> 表組み </h3> +<p><small> +<b>caption-side : top | bottom;</b><br> +</small></p><p><b>table-layout : auto | fixed;</b><br> +</p><p><b>vertical-align : baseline | top | bottom | middle;</b><br> +</p><p><b>border-collapse : collapse | separate;</b><br> +<b>border-spacing : <i>length</i> {{ mediawiki.external('<i>length</i>') }};</b><br> +</p><p><b>empty-cells : show | hide;</b><br> </p> +<h3 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9"> ユーザインタフェース </h3> +<p><small> +<b>cursor : {{ mediawiki.external('<i>uri</i>') }} {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ') }}, ...;</b><br> +</small></p><p><b>outline-color : <i>color</i> | invert;</b><br> +<b>outline-style : <i>border-style</i>;</b><br> +<b>outline-width : <i>border-width</i>;</b><br> +<b>outline : <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b><br> </p> +<h3 id=".E5.8D.98.E4.BD.8D"> 単位 </h3> +<p><small> +<b>相対単位 : em, ex, px</b> +</small></p> +<ul><li> em : 1 em はフォントサイズと等しい +</li><li> ex : 1 ex はフォントの "x" の高さと等しい +</li><li> px : ピクセル +</li></ul> +<p><b>絶対単位 : in, cm, mm, pt, pc</b> +</p> +<ul><li> in : インチ +</li><li> cm : センチメートル +</li><li> mm : ミリメートル +</li><li> pt : ポイント {{ 訳注() }} +</li><li> pc : パイカ {{ 訳注() }} +</li></ul> +<p><b>カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b> +</p> +<ul><li> #306090 : 十六進数で赤が 30、緑が 60、青が 90。 +</li><li> #fa5 : 十六進数で赤が FF、緑が AA、青が 55。 +</li><li> rgb(127,255,0) : 赤が 127、緑が 255、青が 0。 +</li><li> rgb(40%,50%,60%) : 赤が 40%、緑が 50%、青が 60%。 +</li></ul> +<p> +</p> +<h3 id=".E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF"> セレクタ </h3> +<p><small> +<b>型セレクタ</b><br> +<code>h1 { text-decoration: underline; }</code><br> +</small></p><p><b>クラスセレクタ</b><br> +<code>.myclass { text-decoration: underline; }</code><br> +</p><p><b>一意セレクタ</b><br> +<code>#myid { text-decoration: underline; }</code><br> +</p><p><b>子孫セレクタ</b><br> +<code>#mainpage h1 { text-decoration: underline; }</code><br> +</p><p><b>リンク擬似クラスセレクタ</b><br> +<code>a:link { color: blue; }</code><br> +<code>a:visited { color: purple; }</code><br> +</p><p><b>動的擬似クラスセレクタ</b><br> +<code>a:hover { text-decoration: underline; }</code><br> +<code>a:active { color: #666666; }</code><br> +<code>a:focus { outline: 1px dashed red; }</code><br> +</p><p><b>印刷用擬似要素セレクタ</b><br> +<code>p:first-line { font-weight: bold; }</code><br> +<code>p:first-letter { font-size: 2em; }</code><br> +</p><p><b>コンテンツ擬似要素セレクタ</b><br> +<code>p:before { content: "["; }</code><br> +<code>p:after { content: "]"; }</code><br> +</p><p><b>子セレクタ</b><br> +<code>#title > p { font-weight: bold; }</code><br> +</p><p><b>first-child 擬似クラスセレクタ</b><br> +<code>p:first-child { margin-top: 0; }</code><br> +</p><p><b>隣接セレクタ</b><br> +<code>h1 + p { font-style: italic; }</code><br> +</p><p><b>属性セレクタ</b><br> +<code>option{{ mediawiki.external('selected') }} { color: #ff0000; }</code><br> +<code>input{{ mediawiki.external('type=\"password\"') }} { color: #cccccc; }</code><br> +<code>a{{ mediawiki.external('rel~=\"next\"') }} { background: #ffffff; }</code><br> +<code>*{{ mediawiki.external('lang|=\"en\"') }} { color: red; }</code><br> </p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference/All_in_a_page", "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }} diff --git a/files/ja/conflicting/web/css/url()/index.html b/files/ja/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..2ca334be5a --- /dev/null +++ b/files/ja/conflicting/web/css/url()/index.html @@ -0,0 +1,98 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - CSS データ型 + - Reference + - URI + - URL + - urn + - レイアウト +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +<div>{{CssRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p> + +<div class="note"> +<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p> + +<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code><uri></code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code><url></code> のみを記述します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code><url></code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p> + +<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") +<a_css_property>: url('http://mysite.example.com/mycursor.png') +<a_css_property>: url(http://mysite.example.com/mycursor.png) +</pre> + +<div class="note"> +<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: css">.topbanner { + background: url("topbanner.png") #00D no-repeat fixed; +} +</pre> + +<pre class="brush: css">ul { + list-style: square url(http://www.example.com/redball.png); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>CSS Level 2 (Revision 1) から重要な変更なし</td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>CSS Level 1 から重要な変更なし</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("css.types.url")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/width/index.html b/files/ja/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..cae634e45a --- /dev/null +++ b/files/ja/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +<div> + {{CSSRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ユーザエージェントによって自動的に計算される値です。その具体的な効果は <code>auto</code> が適用されたプロパティ毎にそれぞれ異なります。</p> +<h2 id="Used_in" name="Used_in">auto 値の使用が可能なプロパティ</h2> +<ul> + <li>{{Cssxref("overflow")}}</li> + <li>{{Cssxref("overflow-x")}}</li> + <li>{{Cssxref("overflow-y")}}</li> + <li>{{Cssxref("cursor")}}</li> + <li>{{Cssxref("width")}}</li> + <li>{{Cssxref("marker-offset")}}</li> + <li>{{Cssxref("margin")}}</li> + <li>margin-* (left|bottom|top|right|start|end)</li> + <li>{{Cssxref("bottom")}}</li> + <li>{{Cssxref("left")}}</li> + <li>{{Cssxref("table-layout")}}</li> + <li>{{Cssxref("z-index")}}</li> + <li>{{Cssxref("column-width")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html new file mode 100644 index 0000000000..aad9d6d606 --- /dev/null +++ b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html @@ -0,0 +1,37 @@ +--- +title: width +slug: width +tags: + - Disambiguation +translation_of: Web/CSS/width +translation_of_original: width +--- +<p><code>width</code> は多くの文脈で用いられます。</p> + +<h2 id="CSS" name="CSS">CSS</h2> + +<ul> + <li>CSS {{cssxref("width")}} プロパティ</li> +</ul> + +<h2 id="DOM" name="DOM"><a href="/ja/docs/DOM">DOM</a></h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("table.width")}}</li> + <li>{{domxref("element.style","element.style.width")}}</li> +</ul> + +<h2 id="SVG" name="SVG">SVG</h2> + +<ul> + <li>SVG <a href="/ja/docs/SVG/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<h2 id="XUL" name="XUL">XUL</h2> + +<ul> + <li>XUL <a href="/ja/docs/XUL/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> |